Integrate axe-playwright into storybook/test-runner#828
Integrate axe-playwright into storybook/test-runner#828angelikatyborska wants to merge 11 commits intomainfrom
Conversation
angelikatyborska
force-pushed
the
feature/414-can-we-lint-a11y-issues-on-ci
branch
2 times, most recently
from
417e5d8 to
646829d
Compare
angelikatyborska
force-pushed
the
feature/414-can-we-lint-a11y-issues-on-ci
branch
from
646829d to
6ce0603
Compare
angelikatyborska
changed the title
|
|
||
| const baseTabArgs = { | ||
| colorVariant: ['tab'], | ||
| role: 'tab', |
There was a problem hiding this comment.
aria-selected is not allowed on normal buttons, so a tab role must be added. And then the button needs to we wrapped in a tablist because tabs must be children of tablists only, they cannot stand alone.
| </li>`; | ||
|
|
||
| export const header = document.createElement('header'); | ||
| export const header = document.createElement('div'); |
There was a problem hiding this comment.
This component is already wrapped in a header landmark, so it cannot have another header landmark inside of it.
| }).outerHTML | ||
| } | ||
| </li> | ||
| <li role="separator"></li> |
| ]; | ||
|
|
||
| labels.forEach((label) => | ||
| buttonList.appendChild(listItem.appendChild(buttomComponent(label))) |
There was a problem hiding this comment.
This cause appendChild returns the child, not the parent, so this code was resulting in buttons being appended directly to the list, and the list item was unused.
| // TODO: enable this rule again once all color contrast issues are fixed | ||
| 'color-contrast': { | ||
| enabled: false, | ||
| }, |
| {` | ||
| <div class="a-content"> | ||
| <dl class="u-grid u-grid-cols-3@m u-gap-m"> | ||
| <div class="u-grid u-grid-cols-3@m u-gap-m"> |
There was a problem hiding this comment.
It is not possible to write a valid definition list that has this layout. There can't be a double-nested div in dl, so it's not possible to put a badge in there. It is very limited which children are valid in a dl.
This is valid:
<dl>
<dt></dt>
<dd></dd>
</dl><dl>
<div>
<dt></dt>
<dd></dd>
</div>
</dl>This is not valid
<dl>
<div>
<div>
<dt></dt>
<dd></dd>
</div>
</div>
</dl><dl>
<div>
<div>
</div>
</div>
<dt></dt>
<dd></dd>
</dl>| </li> | ||
| </ul> | ||
| <div class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data"> | ||
| <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0"> |
There was a problem hiding this comment.
Buttons with role tab should be direct children of a tablist
| {` | ||
| <div class="u-overflow-hidden u-bg-brand-2" style="height: 5rem"> | ||
| u-overflow-x-auto Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee. | ||
| <a href="https://duckduckgo.com">DDG</a> |
There was a problem hiding this comment.
There must be a focusable element in an overflowing container
1 participant
Resolves #414
This PR adds a
test-storybookcommand that runs axe-core on all of our stories, includingmdxstories. It runs this command on CI.I fixed every single accessibility violation except for color contrasts because that requires design skills. I have disabled color contrasts checks for now so we can merge this PR.
All code changes in this PR apply to storybook only. No changes are made to the CSS produced by the library.