Fix/2901 improve devtools a11y #2947
Conversation
default element changes to aside from footer because aside represents a portion of a document whose content is only indirectly related to the document's main content. aria-label is also added to replace the text "generic" in a11y tree.
aria-expanded indicates open/closed of the menu aria-haspopup indicates this is a menu button aria-controls to link to the menu, also added aria-label on the menu to label it. Read more: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
This is because the element is just hidden visually, but is still inside the DOM. The added conditional display only affects the inner container, which means the animation of opening/closing is reserved.
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tanstack/react-query/FJDfVVLAwrfbYCPeH4qFtGRgbybT |
|
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. Latest deployment of this branch, based on commit 672aee5:
|
Codecov Report
@@ Coverage Diff @@
## master #2947 +/- ##
=======================================
Coverage 96.40% 96.40%
=======================================
Files 45 45
Lines 2227 2228 +1
Branches 637 638 +1
=======================================
+ Hits 2147 2148 +1
Misses 77 77
Partials 3 3
Continue to review full report at Codecov.
|
|
🎉 This PR is included in version 3.33.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #2901
Test plan
Devtools is rendered as
asideby defaultButton aria: expanded
Button aria: collapsed
Hide
menuitemwhen Devtools is closed