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.

Assessment

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

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.

Description

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

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

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.

More from ionic-team/ionic-docs

All issues in ionic-team/ionic-docs

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.