-
Notifications
You must be signed in to change notification settings - Fork 384
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
Accessibility-related matchers #55
Comments
Prior art: jest-axe 👍 |
This sounds incredible! @gnapse, since *One prime area that is missing through is anything where it deals with more than one element: like |
Yes, the drawback is that in addition to tests being too verbose, people would need to know what to test for in order to test that a UI is "accessible". I was kinda hoping to provide something akin to Apparently |
Hahaha, kk, It would be really amazing to have the ability to have an in-depth automated accessibility test that was really accurate and walked you through how to resolve the issues. I have been using axe (chrome plugin) and Lighthouse (in chrome dev tools audits tab) to find issues and they seem to work really well. I was really excited to see something like this!
|
That's something, yeah. I wonder if Another possibility is to test, for instance, that you're not applying I assume these are the kinds of things that |
**What**: Add queries for role dom attribute <!-- Why are these changes necessary? --> **Why**: As evidenced by [testing-library/jest-dom#55](testing-library/jest-dom#55) having a role attribute query would be helpful when attempting to get elements that don't fit the other queries. My example was a dialog who did not have any other matching queries and due to the associated library. I was able to add data-testid but that added the attribute too low in the generated dom not to the container root as expected, this is a problem with the library not dom-testing-library. <!-- How were these changes implemented? --> **How**: I added new query selectors for the node attribute. <!-- Have you done all of these things? --> **Checklist**: <!-- add "N/A" to the end of each line that's irrelevant to your changes --> <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" --> - [x] Documentation - [x] Tests - [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? --> - [x] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions --> <!-- feel free to add additional comments -->
Hrm, the core of axe is really cool! For example if we did make a Explicit Label <label for="explicit">Label</label>
<input id="explicit" type="text"> Implicit Label <label><input id="implicit" type="radio">Label</label> Labelledby <span id="labelledby">Label</span>
<input type="text" aria-labelledby="labelledby"> Direct Label <input type="text" aria-label="Label"> Title <input type="text" title="Label"> Also the following rules must be true: The explicit label should be visible, there should only be one explicit label, and the help text (E.G.: Title and Label) should not be same exact text. I am wondering if it makes sense for any of these matchers to directly use axe validation (on a per matcher basis - so axe would be configured per matcher to only look for one thing). So for example We would need to be careful though about scoping (to a specific set of elements) and JSDOM:
|
WRT to I think it's not public yet though. I'll start working on a chai matcher and report back how that worked. |
Hi, On a professional project i needed a matcher to check if the form fields have an 'aria' description. I created this: const matches = (textToMatch: string, matcher: string | RegExp) => {
if (matcher instanceof RegExp) {
return matcher.test(textToMatch);
}
return textToMatch.includes(matcher);
};
const getFieldName = (formField: HTMLElement) => {
return formField.id || formField.getAttribute('name') || 'element';
};
export function toHaveDescriptionText(this: jest.MatcherContext, formField: HTMLElement, text: string | RegExp): jest.CustomMatcherResult {
const ariaDescribedBy: string = formField.getAttribute('aria-describedby') || '';
const elementIds: string[] = ariaDescribedBy.split(' ').filter(Boolean);
const hasDescription = elementIds
.map((id: string) => document.getElementById(id))
.some((element) => element != null && element.textContent && matches(element.textContent, text));
return {
pass: hasDescription,
message: () => {
return matcherHint(`${this.isNot ? '.not' : ''}.toHaveDescriptionText`, getFieldName(formField), String(text));
},
};
} Here is an example:
Would that be useful to add it into testing-library/jest-dom? i could provide a PR. Regards |
@ghostd Thanks for offering help. Eventually |
Thanks for the pointers. I didn't know this specification. |
**What**: Add queries for role dom attribute <!-- Why are these changes necessary? --> **Why**: As evidenced by [testing-library/jest-dom#55](testing-library/jest-dom#55) having a role attribute query would be helpful when attempting to get elements that don't fit the other queries. My example was a dialog who did not have any other matching queries and due to the associated library. I was able to add data-testid but that added the attribute too low in the generated dom not to the container root as expected, this is a problem with the library not dom-testing-library. <!-- How were these changes implemented? --> **How**: I added new query selectors for the node attribute. <!-- Have you done all of these things? --> **Checklist**: <!-- add "N/A" to the end of each line that's irrelevant to your changes --> <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" --> - [x] Documentation - [x] Tests - [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? --> - [x] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions --> <!-- feel free to add additional comments -->
Describe the feature you'd like:
In the light of projects like Reach UI and react-beautiful-dnd and others like them, that have a focus on accessibility, I was thinking that it could be useful to test that stuff in the Dom have some features that help with accessibility.
I'm not sure though, if it'd be enough to test for
aria-
attributes withtoHaveAttribute
, or if there's something else we could do with custom matchers that would help even more. It does not help that I my self am fairly new to being aware and worried about a11y in my apps (shame on me!) but I'm catching up, and wanted to raise the issue here in hope for others to chime in and determine if there could be something jest-dom could do about it.Suggested implementation:
Not sure yet. Not even sure if it's needed and kind of matchers we would need.
Describe alternatives you've considered:
Not sure of any. If you know of any, let me know in the comments.
Teachability, Documentation, Adoption, Migration Strategy:
TODO
The text was updated successfully, but these errors were encountered: