fix: Add keyboard a11y for table filters #48894
Conversation
Signed-off-by: Alina Andrieieva <emilialina@list.ru>
…e1sy/ant-design into table-column-filter-a11y-issue
|
|
|
|
|
👁 Visual Regression Report for PR #48894 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
…e1sy/ant-design into table-column-filter-a11y-issue
…e1sy/ant-design into table-column-filter-a11y-issue
|
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 ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #48894 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 745 745
Lines 12976 13023 +47
Branches 3400 3411 +11
=========================================
+ Hits 12976 13023 +47 ☔ View full report in Codecov by Sentry. |
|
👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎ This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. |
| @@ -72,6 +72,9 @@ if (process.env.RUN_ENV === 'PRODUCTION') { | |||
| new DuplicatePackageCheckerPlugin({ | |||
| verbose: true, | |||
| emitError: true, | |||
| exclude(instance) { | |||
| return instance.name === 'react-is'; | |||
There was a problem hiding this comment.
I added this to resolve the issue: The rc-util uses the version of react-is@^18.2.0 while the react-focus-lock > prop-types uses "react-is": "^16.13.1" (Allow react-is ^17 as dependency · Issue #354 · facebook/prop-types ), this throws an error on npm run dist.
There was a problem hiding this comment.
This duplicated package will increase bundle size significantly.
| onDeactivation={() => { | ||
| triggerBtnRef.current?.focus(); | ||
| }} | ||
| autoFocus={false} |
There was a problem hiding this comment.
I replaced this with focusFirstFocusableElement function, because there are some issues on the page http://localhost:8001/components/table where there are a lot of components, and focus is called too fast before dropdown is rendered, it results in a page to be scrolled to the top. We need at least zero timeout here, but react-focus-lock doesn't allow to add it.
| @@ -537,15 +604,29 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) { | |||
| getPopupContainer={getPopupContainer} | |||
| placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'} | |||
| rootClassName={rootClassName} | |||
| destroyPopupOnHide | |||
There was a problem hiding this comment.
The content inside menu is not rerendered, so I cannot pass visible to FocusLock to set the disabled prop, as it doesn't update component, this is the only way to run the onDeactivation callback
Ke1sy
changed the title
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related issue link
close #37508
💡 Background and solution
📝 Changelog
Added keyboard accessibility for table filters.
Installed
react-focus-lockpackage to lock the focus inside the flter dropdown.☑️ Self-Check before Merge