bug: ion-modal - aria-labelledby on the host does not reach the dialog element

Aperta
  • Qualcosa non va?
#31,622 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@akasakariko ci sta già lavorando.

Dal 3/11/2026.

  • #31689 di @akasakariko — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start with ion-modal and its inheritAriaAttributes / htmlAttributes handling, then inspect the dialog element in the shadow root and related accessibility tests. Reproduce with the linked modal example by setting aria-labelledby on the host and inspecting the presented dialog. Done means the dialog receives the label reference and the accessibility tree announces its title.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

type: bug
Prerequisites
Ionic Framework Version

v8.x

Current Behavior

The documentation states that aria-labelledby can be set on ion-modal to name the dialog.
The role="dialog" element lives in the shadow root and only aria-label and role are
forwarded to it (inheritAriaAttributes / htmlAttributes); aria-labelledby set on the host
or via htmlAttributes stays on the host, which has no role, so the dialog is announced
without a name. Naming works only with a literal aria-label, which duplicates the visible
title and is not kept in sync with it.

Verified with the reproduction on Ionic 8.8.5 (Chrome 154, page "4 ion-modal aria-labelledby"): host
aria-labelledby="modal-title", inner [role=dialog] has neither aria-labelledby nor aria-label.

Expected Behavior

The documentation states that aria-labelledby can be set on ion-modal to name the dialog.
The role="dialog" element lives in the shadow root and only aria-label and role are
forwarded to it (inheritAriaAttributes / htmlAttributes); aria-labelledby set on the host
or via htmlAttributes stays on the host, which has no role, so the dialog is announced
without a name. Naming works only with a literal aria-label, which duplicates the visible
title and is not kept in sync with it.

Verified with the reproduction on Ionic 8.8.5 (Chrome 154, page "4 ion-modal aria-labelledby"): host
aria-labelledby="modal-title", inner [role=dialog] has neither aria-labelledby nor aria-label.

Steps to Reproduce
  1. <ion-modal aria-labelledby="t"><ng-template><h2 id="t">Antrag stellen</h2>...</ng-template></ion-modal>
  2. Present the modal and inspect the accessibility tree: the dialog has no name.
Code Reproduction URL

https://stackblitz.com/github/mrambow/starterApp/tree/a11y-repros (page /repro/modal)
GitHub: https://github.com/mrambow/starterApp/tree/a11y-repros (src/app/repros/modal.page.ts)

Code Reproduction URL

https://github.com/mrambow/starterApp/tree/a11y-repros

Ionic Info

Ionic 8.8.5, Angular 17.3, Capacitor 6 (reproduction); found in Ionic 8.8.5, Angular 21, Capacitor 8

Additional Information

No response

Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
2g 21h
PR unite (30g)
65

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ionic-team/ionic-framework

Tutte le issue di ionic-team/ionic-framework

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.