-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
[test] Assert accessible name #18609
Conversation
</FormControl>, | ||
); | ||
|
||
expect(getByRole('button')).to.have.accessibleName('Age Ten'); |
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.
Don't get distracted with the role (it's unclear whether this is correct). Nvda properly announces this as a combobox.
The important part is that we have a test for the accessible name of a select. I'll add a test to the TextField
as well and to check how native vs non-native behaves (which requires verification with nvda).
No bundle size changes comparing a5f4a4d...4be4622 |
// this whitespace is ok since actual AT will only use so called "flat strings" | ||
// https://w3c.github.io/accname/#mapping_additional_nd_te | ||
expect(label).to.equal(' Release: Stable'); | ||
expect(getByRole('button')).to.have.accessibleName('Release: Stable'); |
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.
Now with less code and less whitespace
Using https://github.com/eps1lon/dom-accessibility-api#dom-accessibility-api we add a custom matcher to make statements about the accessible name. This can be seen as the content that a screen reader will announce when the cursor is on the element.
The idea is that this will later be incorporated into
ByRole
. App tests will be written asgetByRole('textbox', { name: 'foo' })
while the library test verifies that the rendered textbox does indeed have the accessible name (via aria-label or aria-labelledby or label element).This will let us write better test that capture how the accessibility story of e.g. inputs looks. It is not obvious right now how to get this right and I don't want to rewrite a bunch of tests when we can improve the API and implementation later (see experimental
useUniqueId
orScope
).Implementation notes:
getComputedStyle
is faked locally