Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[SideNavigationItem]: accessibleName is ignored by screen readers when text is set

Aperta Adatta ai principianti
  • Qualcosa non va?
#14,180 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

Nessuno ha ancora preso questa issue.

Valutazione

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

Direzione di ricerca

Inizia dall’implementazione di SideNavigationItem e dai relativi test di accessibilità; l’issue indica il treeitem dello shadow DOM e gli attributi in conflitto aria-label e aria-labelledby. Segui il modo in cui accessibleName e text impostano questi attributi, quindi riproduci la differenza nell’annuncio di NVDA descritta nei passaggi. Il lavoro è concluso quando accessibleName viene annunciato se entrambe le props sono impostate e un test di regressione copre il caso.

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

Descrizione

ACC bug TOPIC RD
Bug Description

Setting accessibleName on a SideNavigationItem has no effect on the accessible name when text is also provided.

The root cause: when text is set, the shadow DOM div[role="treeitem"] gets both aria-label (from accessibleName) and aria-labelledby (pointing to the internal text span). Per the ARIA spec, aria-labelledby always wins, so aria-label is ignored.

When text is omitted, aria-labelledby is not set and accessibleName works as expected.

Affected Component

SideNavigationItem

Expected Behaviour

When accessibleName is set, aria-labelledby should either be removed or the element it references should contain the accessibleName value. The prop was added specifically to override the default accessible name - it should win.

Isolated Example

No response

Steps to Reproduce
  1. Render
  2. Inspect the shadow root - div[role="treeitem"] has:
    aria-label="Inbox, 3 unread notifications"
    aria-labelledby="ui5wc_xx-text" pointing to Inbox
  3. Navigate to the item with NVDA - it announces "Inbox", not "Inbox, 3 unread notifications"
  4. Remove text prop - NVDA now announces "Inbox, 3 unread notifications" correctly
Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.25.0

Browser

Chrome

Operating System

Windows, Screen reader: NVDA

Additional Context

No response

Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.
Lingua principale
TypeScript
Stelle
1.8k
Fork
289
Merge medio
3g 18h
PR unite (30g)
57

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 UI5/webcomponents

Tutte le issue di UI5/webcomponents

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.