[akasakariko]

Issue number: resolves #31622

---

What is the current behavior?

aria-labelledby set on ion-modal stays on the host, so the [role="dialog"] element in the shadow root has no accessible name. An ID reference only resolves against the tree of the element that carries it, so copying the attribute onto the wrapper does not name the dialog either

What is the new behavior?

• ion-modal resolves the elements referenced by aria-labelledby and applies them to the dialog through element reflection (ariaLabelledByElements), which is not scoped to a tree
• The documented pattern of labelling a modal with an ion-title in its content now names the dialog
• The reflection is only applied when the reference resolves to at least one element, so an aria-label on the modal still names the dialog when aria-labelledby does not
• The referenced elements are applied again when the modal is presented and when its slotted content changes

Does this introduce a breaking change?

• Yes
• No

Other information

Element reflection is Baseline 2025, so in older browsers the dialog is unnamed as it was before this change

Verification:

• The new e2e test fails before the change with an axe aria-dialog-name violation and passes after it
• npx playwright test src/components/modal/test/a11y passes on Mobile Chrome, Mobile Firefox and Mobile Safari
• npx stencil test --spec passes (93 suites, 830 tests)
• npx eslint and npx prettier --check pass on the changed files
• The Chrome accessibility tree reports role=dialog with the name My modal title for a modal labelled with aria-labelledby

[vercel]

@akasakariko is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.