Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[NEXT-871] Accessibility issues with the next error dialog #47351

Open
1 task done
nicholasgriffintn opened this issue Mar 21, 2023 · 2 comments
Open
1 task done

[NEXT-871] Accessibility issues with the next error dialog #47351

nicholasgriffintn opened this issue Mar 21, 2023 · 2 comments
Labels
Developer Experience Issues related to Next.js logs, Error overlay, etc.

Comments

@nicholasgriffintn
Copy link

nicholasgriffintn commented Mar 21, 2023 •
edited by balazsorban44

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

NA

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

NA

To Reproduce

  • Force an error with a component that shows the dialog
  • Test the page with Axe while the dialog is being shown.

Describe the Bug

In our accessibility testing with Axe, we have found the following accessibility issues with the Next error dialog:

#1: Buttons must have discernible text - https://dequeuniversity.com/rules/axe/4.6/button-name?application=axe-puppeteer

- <button type="button" disabled="" aria-disabled="true">
- <button type="button"><svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>

#2: Elements must have sufficient color contrast - https://dequeuniversity.com/rules/axe/4.6/color-contrast?application=axe-puppeteer

- <small><span>1</span> of <span>3</span> unhandled errors</small>
- <p id="nextjs__container_errors_desc">
- <a href="https://nextjs.org/docs/messages/react-hydration-error" target="_blank" rel="noreferrer noopener">https://nextjs.org/docs/messages/react-hydration-error</a>

#3: Heading levels should only increase by one - https://dequeuniversity.com/rules/axe/4.6/heading-order?application=axe-puppeteer

- <h5>Component Stack</h5>

Expected Behavior

There should be no accessibility issues with this component.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-871
@nicholasgriffintn nicholasgriffintn added the bug Issue was opened via the bug report template. label Mar 21, 2023
@7777chaitanya
Copy link

@nicholasgriffintn, Could you please attach a minimial public reproduction of the issue that you are facing?

Please make sure to remove any unnecessary code that does not contribute to the observed issue so we can track the potential problem down more easily.

@balazsorban44 balazsorban44 added kind: bug Developer Experience Issues related to Next.js logs, Error overlay, etc. and removed bug Issue was opened via the bug report template. labels Mar 21, 2023
@balazsorban44 balazsorban44 changed the title Accessibility issues with the next error dialog [NEXT-871] Accessibility issues with the next error dialog Mar 21, 2023
@koba04 koba04 mentioned this issue May 8, 2023
Merged
@koba04
Copy link
Contributor

koba04 commented May 8, 2023

I've created a PR to fix two issues. #49460

sokra pushed a commit that referenced this issue May 10, 2023
@koba04
fix: a11y issues in react-dev-overlay (#49460)
ac6addb 
This is a part of fix of #47351

This fixes two issues #47351 mentioned.

1. Buttons must have discernible text
-
https://dequeuniversity.com/rules/axe/4.6/button-name?application=axe-puppeteer

Before:
<img width="549" alt="Screenshot 2023-05-08 at 22 37 00"
src="https://user-images.githubusercontent.com/250407/236839743-3383aea0-f59a-4f2a-9dff-f24de692a97c.png">

This PR:
<img width="447" alt="Screenshot 2023-05-08 at 22 38 50"
src="https://user-images.githubusercontent.com/250407/236839785-3b29b74e-e4db-4ff3-a87c-b69712196264.png">

You can see the accessibility name.

3. Heading levels should only increase by one
-
https://dequeuniversity.com/rules/axe/4.6/heading-order?application=axe-puppeteer

I didn't fix the following issue in this PR because it caused the change
in appearance for the overlay.
I'll fix it as another PR.

2. Elements must have sufficient color contrast
-
https://dequeuniversity.com/rules/axe/4.6/color-contrast?application=axe-puppeteer

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation or adding/fixing Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md



## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
@samcx samcx removed the kind: bug label Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Developer Experience Issues related to Next.js logs, Error overlay, etc.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@koba04 @nicholasgriffintn @balazsorban44 @samcx @7777chaitanya