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

Aberta
  • Algo errado?
#31,622 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
65/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
accessibility, frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
52.7k
Forks
13.3k
Merge médio
3d 4h
PRs com merge (30d)
72

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de ionic-team/ionic-framework

Todas as issues de ionic-team/ionic-framework

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.