Storybook a11y tests with Storybook Test Runner

[ty2k]

This PR adds testing using Storybook Test Runner and axe-playwright to the React component library. See Storybook's Accessibility tests page for background information.

This new test run requires a running Storybook instance. With Storybook running locally at localhost:6006, run npm run storybook-test to see its output.

Unlike in #368, I am unable to get the Select component to throw the error "ARIA hidden element must not be focusable or contain focusable elements." I'm unsure why this is so far. I've tried adding a manual delay to the postVisit step to see if it has something to do with the test runner hitting the page before the hidden element is rendered, and this didn't have any effect. More exploration required.

Two genuine errors are being surfaced by this test suite: The stories Button/Icon and Button/PlaceholderIconButton are both failing "Ensures buttons have discernible text". These will get addressed in a future PR.

For now, I'm not adding the test run to any GitHub Actions workflow since the tests are failing.

[mkernohanbc]

Two genuine errors are being surfaced by this test suite: The stories Button/Icon and Button/PlaceholderIconButton are both failing "Ensures buttons have discernible text". These will get addressed in a future PR.

This is because there's no aria-label or aria-labelledby prop, right? In the docs, we flag that if users are using icon-only buttons, they need to pass one of those labels to make them accessible. Is the fix simply to add placeholder aria-labels to those stories, or are you contemplating a change to the component itself to bake in that label in those use-cases?

[ty2k]

Two genuine errors are being surfaced by this test suite: The stories Button/Icon and Button/PlaceholderIconButton are both failing "Ensures buttons have discernible text". These will get addressed in a future PR.

This is because there's no aria-label or aria-labelledby prop, right? In the docs, we flag that if users are using icon-only buttons, they need to pass one of those labels to make them accessible. Is the fix simply to add placeholder aria-labels to those stories, or are you contemplating a change to the component itself to bake in that label in those use-cases?

Right, there is no discernible text from the button contents, aria-label, aria-labelledby, or any field within the SVG that would suffice.

I think adding an aria-label prop to those stories is the simplest, with explanatory text in the docs.

I don't think we can do anything further to bake more logic into the component due to the nature of the problem. Check out the article Accessible Icon Buttons for background info. IMO, there's no perfect way to satisfy this rule in all cases using logic in the component, and we can't control what folks will be using in the children slot, so the best we can do is educate them.