fix(Dropdown): a11y issues with keyboard behavior#1104
fix(Dropdown): a11y issues with keyboard behavior#1104kheinrich-eightfold wants to merge 5 commits intomainfrom
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1104 +/- ##
==========================================
+ Coverage 84.14% 84.24% +0.10%
==========================================
Files 1146 1146
Lines 21179 21248 +69
Branches 8053 8069 +16
==========================================
+ Hits 17821 17901 +80
+ Misses 3271 3260 -11
Partials 87 87 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
kheinrich-eightfold
force-pushed
the
kheinrich/dropdown-keyboard-nav-fixes
branch
4 times, most recently
from
8ec7d73 to
5f55835
Compare
![factory-droid[bot]](https://avatars.githubusercontent.com/in/358017?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Description:
This PR enhances the Dropdown component's keyboard accessibility by implementing WAI-ARIA compliant navigation behaviors. Key changes include proper Tab key handling (closing dropdown and moving to next element), Arrow Up navigation (opening dropdown and focusing last item), and deprecation of toggleDropdownOnShiftTab. The implementation adds focus management utilities, state tracking via refs, comprehensive tests, and a new Storybook example for keyboard navigation testing.
Review:
LGTM
Click For Summary of Files
Summary of Files
Files Modified
src/components/Dropdown/Dropdown.test.tsx
Enhanced Dropdown component test coverage for keyboard accessibility:
- Added test cases for keyboard navigation behaviors:
- Tab/Shift+Tab focus management and dropdown closing
- Arrow Up/Down for opening dropdown and focusing first/last items
- Focus handling when closing dropdown via keyboard
- Added test components to verify accessibility props:
- shouldCloseOnTab behavior
- toggleDropdownOnShiftTab functionality
- initialFocus control
- Improved test implementation with proper animation timing and focus management
src/components/Dropdown/Dropdown.types.ts
Updated toggleDropdownOnShiftTab prop documentation and behavior for improved accessibility:
- Changed default value from true to false to align with WAI-ARIA standards
- Enhanced property documentation to clarify behavior with Shift+Tab key interaction
- Added deprecation notice for non-compliant usage (passing true)
src/components/Dropdown/Dropdown.tsx
Enhanced keyboard navigation and focus management in Dropdown component:
- Implemented WAI-ARIA compliant keyboard behaviors:
- Arrow Up opens dropdown and focuses last item
- Tab closes dropdown and moves to next element
- Shift+Tab returns focus to trigger element
- Added robust focus management utilities with timeout-based focus scheduling
- Improved cleanup handling for focus-related timeouts and intervals
src/components/Dropdown/Dropdown.stories.tsx
Added keyboard accessibility demonstration story for Dropdown component:
- Created new Dropdown_Button_KeyboardFocus story showcasing WAI-ARIA compliant keyboard navigation
- Removed deprecated toggleDropdownOnShiftTab property and introduced shouldCloseOnTab for improved tab key handling
- Added focus visibility configuration and visual feedback through rotating chevron icons
Tips
Review Droid is highly customizable and comes with powerful features for augmenting your organization's code review process. Here are some tips to get the most out of it.
Table of contents
- Droid Fill - Contextual PR Body Replacement
- Review Guidelines - Creating guidelines for Droid to enforce
- Droid Chat - Follow up with Droid's Comments
- PR Healing - Diagnose & Fix Failures in CI
- Teaching Droid - Giving Droid feedback so it learns
- Review Usage
⌨️ Droid Fill
Contextual PR Body Replacement
When you create a PR with the @droid fill command anywhere in your PR body, Review Droid will fill in the PR description for your pull request based on it's PR analysis. This will also take into account your pull request templates.
Review Droid can also analyze your project management system. If you have a project management system integrated with Factory (e.g. Linear, Jira) Review Droid will also integrate information from linked and related tickets.
At Factory, we typically create our PR's with this command. For example, let's say I'm creating a PR which addresses the jira ticket FAC-123. I would write the following PR description:
@droid fill FAC-123
and your Review Droid fills in the rest!
📚 Review Guidelines
Creating guidelines for Droid to follow
You can configure guidelines that Droid will follow when reviewing your PRs. Droid will focus on these aspects of your code and aim to leave in-line comments if any guidelines are violated.
Guidelines are defined in your repository's .droid.yaml. Every week, Droid will automatically refine and edit these guidelines based on the feedback you leave on Droid's comments.
💬 Droid Chat
Ask questions on a PR
You can leave in-line comments on PR's by tagging @droid in-line. This can be helpful when reviewing other's PRs. Some examples include:
@droid this section looks sketchy, are there issues with it?@droid can you show me some examples of what this regex matches?@droid is this the most efficient way to do this? I'm concerned about performance.
Follow up with Review Droid's Comments
You can reply to Review Droid's in-line review comments directly to ask questions or provide feedback. Some examples include:
@droid I made the change you suggested, does that fix the issue?@droid we don't actually need to do this because of X, Y, Z. Can you confirm?@droid do we have any scripts that rely on this behavior?
🛠️ PR Healing
Diagnose & Fix Failures in CI
Review Droid is aware of the CI processes you utilize and proposes fixes in case of any failures. This allows it to promptly address issues in your pull requests before they escalate.
By default, PR Healing is activated. Your organization does not have advanced PR healing enabled, which involved Review Droid directly making a PR to your PR which fixes the issue. If you would like to enable this feature, you must have an Enterprise Plan.
🎓 Teaching Droid
Giving Droid feedback so it learns
You can give feedback to Review Droid by replying or reacting to its comments (👍 / 👎). This helps Review Droid learn from your preferences and improve its future reviews.
To send feedback directly to the Factory team, include @droid feedback in your comment. Droid will file a ticket with your feedback and provide a ticket ID so you can track it with our support team.
🔎 Review Usage
Re-Requesting Review
If you make changes to your PR and want Review Droid to re-review it, you can simply comment @droid review on the PR. This will trigger Droid to re-review the PR and update the review body.
.droid.yaml to Configure Review Droid
You can place a .droid.yaml file in the root of your repository. This file contains settings for a variety of features and settings including:
- Guidelines - For defining the rules that Review Droid will enforce
- Enabling/Disabling Per-file Summaries
- Enabling/Disabling PR Healing
- Path Filters (For ignoring certain files or directories)
- Auto-Review Settings
- Chat settings
To override a setting leave a comment on a PR with the setting to disable/enable/reset. For example @droid setting disable progress_comment. The current options are: progress_comment, lgtm_comment, and list.
list is a special setting that will list all the settings that you have set and will explain what each setting does.
For more information, you can view our documentation at https://docs.factory.ai - the password is factory.
Ignoring Reviews
If you want to have your PR ignored by Review Droid you can define Droid Ignored Title Words in your .droid.yaml file. If the title of your PR contains any of these words, Review Droid will ignore the PR.
Your organization currently has the following words in the Droid Ignored Title Words list:
None
kheinrich-eightfold
force-pushed
the
kheinrich/dropdown-keyboard-nav-fixes
branch
3 times, most recently
from
cacd1a6 to
b605bcc
Compare
ychhabra-eightfold
changed the title
…tory and unit test
…uidelines; refactor and test
…r Escape; update tests
kheinrich-eightfold
force-pushed
the
kheinrich/dropdown-keyboard-nav-fixes
branch
from
b605bcc to
0816f27
Compare
1 participant
SUMMARY:
This PR fixes Dropdown keyboard behavior to align with WAI-ARIA menu button practices.
Issues fixed
preventDefault()and, after close, focus the next focusable in document order whenshouldCloseOnTabis true.focusTargetAfterCloseRefto the trigger; the shared “on close” effect runs this so focus always returns.toggleDropdownOnShiftTabis nowfalse(close when focus leaves via Shift+Tab). WhenshouldCloseOnTabis true, Shift+Tab closes and returns focus to the trigger.toggleDropdownOnShiftTab={true}is deprecated.Refactoring
mergedVisiblebecomes false and, if set, invokesfocusTargetAfterCloseRef.current?.()then clears it. Tab, Shift+Tab, Escape, and outside/trigger click all set this ref.closedByTabRef,focusLastOnOpenRef, andfocusTargetAfterCloseRefrecord close/open intent so the effect picks the right focus target.getOverlayFocusableItems(),getDocumentFocusableElements(),getNextFocusableAfterReference(),hasFocusWithin(),focusUntilActive()/focusFirstElement()/focusLastElement()reduce duplication.useEffectcleanup on unmount.Testing & docs
toggleDropdownOnShiftTab).Dropdown_Button_KeyboardFocusfor manual Tab/Shift+Tab and focus verification.GITHUB ISSUE (Open Source Contributors)
JIRA TASK (Eightfold Employees Only):
https://eightfoldai.atlassian.net/browse/ENG-162951
https://eightfoldai.atlassian.net/browse/ENG-163088
CHANGE TYPE:
TEST COVERAGE:
TEST PLAN:
Testing in vscode sandbox (recommended)
Test 1 - Account dropdown should follow Menu Button pattern (ENG-162951)
When focus is on the trigger button:
When focus is on a menu item inside the popup:
Test 2 - Dates dropdown should have correct focus management (ENG-163088)
Testing in Octuple Storybook
yarn storybook