Modal accessibility issues on close button
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 57
- Forks
- 103
- Avg merge
- 10h 25m
- Merged PRs (30d)
- 18
Description
The close "button" is a link (<a>), and it'd be better to have a <button>.
I'd like to add ARIA attributes and place inside of it some elements like a with the icon (×) hidden from screen readers and another one with some representative text (i.e: "CLOSE") shown only to screen reader (CSS class: sr-only).
This changes should be generic enough to be added to the modal default template in pattern.js.
So, I could implement this and submit a PR if agree.
Otherwise, how can I override pattern.js file in order to change the template? I can't override default template attribute in the object from the TAL template when calling the pattern, so how can I fix this?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading pattern.js and its modal default template. Confirm how the close control is rendered and whether the requested button, ARIA attributes, and screen-reader-only text belong there. Done means the generic template provides an accessible close control, with the issue's template-override question also answered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100