Deque's Axe Plugin catches WCAG violations in base storybook boilerplate

[angel1199410]

Describe the bug
When running Deque's Axe plugin on a webpage, I found multiple accessibility errors with the Storybook boilerplate.

To Reproduce
Steps to reproduce the behavior:

1. Load and run the Storybook boilerplate with generic components - Button with Text and Button with Emoji.
2. Download Deque's Axe Google Chrome plugin
3. Run the plugin on the running boilerplate.
4. See accessibility errors with exact selectors where issues were found.

Expected behavior
Axe should return no errors.

System:
Binaries:
Node: 10.15.3
npm: 6.4.1
npmPackages:
@storybook/cli: 5.3.17
@storybook/html: 5.3.17

Additional context
Some issues have already been opened with solutions to the problems within Storybook's boilerplate. I've linked to those, where applicable. I have also linked directly to Deque's documentation on the required fixes for each accessibility defect.

1. Page must have means to bypass repeated blocks.
   

   • Previously-opened issue with this same problem: 'Skip to main content' link for screen reader users #4667

2. Page must have one main landmark.
   

3. Page must contain a level-one heading.
   

4. All page content must be contained by landmarks.
   

5. Text Elements must have sufficient color contrast against the background

   • Previously-opened issue with this same problem: UI: some elements have too low color contrast #8935

Running the plugin before every release will help validate that no accessibility bugs exist and that consumers are compliant when building out storybook applications. Thank you for your time!

[shilman]

@yannbf @tooppaaa i know you've got a lot on your plate with the CLI overhaul but FYI....

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[github-actions]

Automention: Hey @Keraito, you've been tagged! Can you give a hand here?

[adagar]

@shilman I work full-time in A11Y, and have been looking for some open-source to contribute to. Could I take this ticket on?

[yannbf]

Hey @adagar that sounds incredible! Feel free to go ahead and if you ever need any direction in the repo, let me know!

[adagar]

Thanks, @yannbf I'm cracking it open now. I'll let you know if I run into trouble!

[adagar]

@yannbf was digging in some more on this; and I think I could use a bit more of an orientation on the repo as a whole. In particular, I'm curious if you're thinking of splitting this issue up into sub-issues (like items 1 & 5 have) and/or if we wanted to fix some of these as part of this Issue ticket. I think some guidance on what the landmarks we'd expect to be in use would also be handy.

Do you have some time to hop on a Zoom call and discuss this week?

[adagar]

So results of initial investigations are basically that this repo needs to be updated to move towards semantic elements and rely less on <div>s. I'm experimenting a bit with some updates, but I'll def want to get some time with someone with more experience in this project.

[yannbf]

Awesome @adagar!! I really appreciate the time you're putting in this.

For more structural info @shilman is definitely the guy. I personally think that splitting the work in sub-issues will help things get moving, and also give opportunity for more contributors to join if they'd like as well as allow us to reach better a11y in steps (maybe by critical prio).

This week I'm quite busy unfortunately, maybe you can check with @shilman, but overall you're free to reach us out in the discord community. Feel free to ping or DM!

[shilman]

Hey @adagar ! DM me on discord--I'd love to talk it through

[adagar]

Ticket has been created for issue #2 #13794

[adagar]

Regarding issue #3 : I don't see this issue flagged by Axe, but this may be because I have an h1 element that seems to be an error

This header isn't visible on-screen, and it's also probably not what you'd consider the most crucial piece of information on the page.

I created a followup ticket to address that issue: #13796

[adagar]

An additional Axe violation that wasn't caught in the initial ticket has a new request: #13797

[adagar]

Created a PR for issue #2 #13827

[artmsilva]

Hey! We're experiencing this issue from aXe with the storybook preview URLs.

• Page must have one main landmark.
• Page must contain a level-one heading.
• All page content must be contained by landmarks.