UI: Add component accessibility auditing and fixes #8679
Conversation
I decided to add these to existing tests vs create new ones because audits will need to happen for the various states that components can be in and it seems wasteful to need to reproduce all the iterations separately vs use what already exists. I also decided to fold the assertion into the audit wrapper so it doesn’t need to be duplicated everywhere.
Ember Asset Size actionAs of 227abdd Files that got Bigger 🚨:
Files that stayed the same size 🤷:
|
There are some failures to address!
Ember Test Audit comparison
|
This satisfies a button-name axe violation.
This doesn’t catch most of the component tests because of the directory structure… sadly it seems like many files should be moved. I could perhaps instead use an elaborate filter to ensure integration/util is excluded but everythig else is included but considering that `ember g component-test …` generates the file in integration/components, it seems best to move everything there.
This lets the linting rule find them properly.
This addresses several violations: * aria-required-children/listitem * the children LIs have role `option` * the empty case isn’t a listbox and has an LI child * aria-input-field-name: the listbox has a connected label
There was a problem hiding this comment.
Looks good! Just the one note about tucking away the compulsory assertion.
I am also a +1 to the bulk move of test files, as that is the convention. I noticed the other day that we had test files in both locations and I just pretended I didn't see anything hahaaaaa.
|
I had also previously noticed and ignored the chaos of the integration directory hierarchy haha I’m glad this prompted actually dealing with it 🙃 |
|
I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions. |
This continues #8455 by adding accessibility audits to component integration tests and fixing associated errors. I chose to add audits to existing tests rather than make separate ones to facilitate auditing the various permutations a component’s rendering can go through.
The
a11yAuditinterface for auditing a component is slightly different as it requires the component’s element to be passed in, so I made a different helper that uses a shared rule ignore list for acceptance tests. The linting rule for component tests expects the helper to be called at least once per file. I committed a bulk move of component test files intotests/integration/componentsso the linting rule would be properly scoped, which seemed justified sinceember g component-test …generates files in that directory.The only significant change required was to
MultiSelectDropdown, which is configured with alistboxrole that neededoptionrole children and a non-listboxfor the empty case. I’m not surprised at how few changes were needed because acceptance test audits already uncovered a lot of automated accessibility audit failures.