ionic-team / ionic-team/ionic-docs

content: using "aria-labelledby", as suggested by the Accessibility Guidelines, never worked with modals

Open
#3,809 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

content
Dominant language
MDX
Stars
621
Forks
3.2k
Avg merge
1d 2h
Merged PRs (30d)
86

Description

URL

https://ionic.io/docs/accessibility/ion-modal

Issue Description

In the Accessibility Guidelines for modals, it says:

In the above example the logical choice for an accessible name would be the ion-title of "Welcome". We can associate the modal with this by setting the aria-labelled attribute and giving the ion-title an id:

Leaving aside that it should be aria-labelledby, this has never worked as the only two attributes that are pushed down to the actual div that also gets assigned the role attribute of "dialog" are role and aria-label, as seen here in the code for modal.

So either the code needs a fix to support aria-labelledby, or the docs need to be adjusted.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the accessibility guidance at https://ionic.io/docs/accessibility/ion-modal and the linked modal implementation at core/src/components/modal/modal.tsx around line 367. Verify the documented aria-labelledby behavior against the implementation; done means either supporting it in the modal or correcting the guide to describe the supported attribute.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.