adding more pages to a11y testing#4435
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4435/ |
chandlerprall
left a comment
There was a problem hiding this comment.
Couple small items
| </button> | ||
| <div | ||
| id="euiNestedTreeView-euiTreeView_generated-id" | ||
| id="euiNestedTreeView-euiTreeView_generated-id--euiTreeView_generated-id" |
There was a problem hiding this comment.
I'm not sure this outcome is what you were expecting? That's a really long id that seems to duplicate the same string.
There was a problem hiding this comment.
Yup, this is the expected outcome in the test.
It's so long because the component setup this pattern of a semi-understandable id throughout its use. So by knowing just the parent id, you can construct a child id (to some degree).
I could make the id shorter and the code simpler if we got rid of this and just used purely random ids but I'm not sure if that'll break something for someone at this point so I kept with the same system as this component had before (even though I had to change it slightly because there were duplicate id issues).
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4435/ |
cchaos
left a comment
There was a problem hiding this comment.
Looks good from my side, but I'll want @chandlerprall to look at the lifecycle stuff.
chandlerprall
left a comment
There was a problem hiding this comment.
Changes LGTM! Verified intended changes are reflected by snapshots
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4435/ |
Summary
Enable 5 more docs pages for automatic a11y testing: Button, TreeView, SideNav, CSS Utility Classes, Focus Traps
Update axe-core (one minor, 2 patches), axe-puppeteer (one minor), puppeteer (one minor, one patch)
Checklist
[ ] Check against all themes for compatibility in both light and dark modes[ ] Checked in mobile[ ] Checked in Chrome, Safari, Edge, and Firefox[ ] Props have proper autodocs[ ] Added documentation[ ] Checked Code Sandbox works for the any docs examples