-
Notifications
You must be signed in to change notification settings - Fork 3.4k
[Fix Accessibility] Add focus-visible styles to keyboard navigation #1722
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
… ClipboardCopy component
…boardCopy component
…ariantMenu component
…avDrawer component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR addresses accessibility issues by adding consistent focus-visible outline styles to keyboard navigation elements across mobile components, ensuring better visual feedback for users navigating with keyboards.
- Added focus-visible outline styles to four mobile interactive buttons (menu, search, table of contents, CLI version selector)
- Updated the clipboard copy button's outline offset from 2px to 1px for consistency
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
File | Description |
---|---|
nav-drawer.js | Added focus-visible styles to mobile menu button |
search.js | Added focus-visible styles to mobile search button |
table-of-contents.js | Added focus-visible styles to mobile TOC summary button |
variant-select.js | Added focus-visible styles to CLI version selector button |
code.js | Updated outline offset for clipboard copy button consistency |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
📁 File Changes (5 files modified):
nav-drawer.js
- Added focus-visible styles to mobile menu buttonsearch.js
- Added focus-visible styles to mobile search buttontable-of-contents.js
- Added focus-visible styles to mobile TOC summary buttonvariant-select.js
- Added focus-visible styles to CLI version selector buttoncode.js
- Updated outlineOffset from 2px to 1px for clipboard copy button📋 Summary:
This PR improves keyboard accessibility by adding consistent focus-visible outline styles to interactive buttons across mobile components, ensuring better visual feedback for keyboard navigation users.
Keyboard focus indicator is not visible on 'search' icon
Keyboard focus indicator is not visible on the 'Select CLI Version' button
Keyboard focus indicator is not visible on 'Table of contents