Skip to content

fix(AppHeaderBanner): add focus-visible styles for keyboard accessibility - #48962

Open
waterWang wants to merge 1 commit into
mui:masterfrom
waterWang:fix/banner-focus-visible-48959
Open

fix(AppHeaderBanner): add focus-visible styles for keyboard accessibility#48962
waterWang wants to merge 1 commit into
mui:masterfrom
waterWang:fix/banner-focus-visible-48959

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Closes #48959

Adds :focus-visible styles to the announcement banner link in AppHeaderBanner to ensure keyboard users can see where focus is positioned.

Changes

  • Added :focus-visible outline styles to the linkStyleOverrides in AppHeaderBanner.tsx
  • Applied the same styles in the dark mode variant
  • The outline uses a white 2px ring with 2px offset for clear visibility against the blue gradient background

Before

Focusing the announcement banner link via keyboard produced zero visual change — the default browser outline was suppressed with no author-defined replacement.

After

A white outline ring appears around the link when focused via keyboard (:focus-visible), satisfying WCAG 2.4.7 Focus Visible and 1.4.11 Non-Text Contrast.

@code-infra-dashboard

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48962--material-ui.netlify.app/
QR code for https://deploy-preview-48962--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility: Top announcement banner link fails WCAG 2.2 focus visible and contrast criteria (2.4.7, 1.4.11)

2 participants