fix(a11y): name the modal close button and MDN engine icons for AT - #5206
Conversation
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility and resolves a Firefox issue in the W3C profile by ensuring required UI elements and stylesheets are present and correctly labeled.
Changes:
- Update modal close button to use
aria-label="Close"instead of relying ontitle. - Add
role="img"+aria-labelto MDN engine-support emoji icons for screen reader compatibility. - Ensure the W3C
dark.csslink is always present (usingmedia="not all"for light-only specs) sofixup.jscan safely run theme setup without throwing (issue #5200).
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/spec/w3c/style-spec.js | Adds/updates assertions around presence and media of the dark.css link. |
| tests/spec/core/ui-spec.js | Adds test ensuring modal close button has an accessible label. |
| tests/spec/core/mdn-annotation-spec.js | Updates tests to assert role="img" and aria-label on engine-support icons. |
| src/w3c/style.js | Always appends dark.css link to avoid fixup.js theme initialization crash. |
| src/core/ui.js | Replaces title with aria-label on the modal close button. |
| src/core/mdn-annotation.js | Adds accessible semantics to emoji-based engine-support indicators. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot can you take a look at CI and fix the issue? |
Fixed in 28dd807. I checked the failing CI run and updated the W3C style tests to target the actual Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot Can you confirm all your feedback has been addressed? Can you fix anything that was not addressed? |
Confirmed: all prior feedback is addressed in this branch. I rechecked the a11y updates ( |
c8a8885 to
905a26e
Compare
The modal close button relied on
title="Close", which screen readers do not reliably announce, and the MDN engine support emoji had no accessible name at all. This swaps the former foraria-labeland gives the emoji iconsrole="img"plus anaria-label, so assistive technology announces both.Written with AI: this change was generated by Claude. Per AI_POLICY.md.