Skip to content
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

Merged
merged 4 commits into from
Nov 29, 2019
Merged

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Nov 28, 2019

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 as getByRole('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 or Scope).

Implementation notes:

  • assuming visibility locally but verifying in CI i.e. getComputedStyle is faked locally

</FormControl>,
);

expect(getByRole('button')).to.have.accessibleName('Age Ten');
Copy link
Member Author

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).

@mui-pr-bot
Copy link

mui-pr-bot commented Nov 28, 2019

No bundle size changes comparing a5f4a4d...4be4622

Generated by 🚫 dangerJS against 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');
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants