patternfly / patternfly/patternfly-react

Tooltips for disabled radio and checkbox

Aperta
#3,791 10 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

A11y Stale
Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

Descrizione

For a tooltip to be accessible for keyboard-only users, the element with the tooltip needs to be able to receive keyboard focus. Elements like <button> that support the disabled attribute cannot receive keyboard focus.

To continue to render these elements as disabled but enable keyboard focus, the following changes are needed:

  • Remove disabled

  • Add aria-disabled="true"

  • Make sure the pf-m-disabled class or similar is included on the element to apply the disabled styling.

  • If the element is a link, remove tabindex="-1"

We should update all interactive elements to include a prop that allows the consumer to make the element disabled but focusable so the element can be used with the Tooltip component. This prop should apply the appropriate attributes and classes for the given element.

Unless someone has a better suggestion, the prop could be named isDisabledFocusable (totally open to suggestions on this one)


Jira Issue: PF-208

Guida per i contributori

Apri la guida per i contributori

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.

Direzione di ricerca

Inizia esaminando gli elementi interattivi che eseguono il rendering dei controlli disabilitati e il componente Tooltip. Fai un inventario dei pulsanti, dei link, dei pulsanti radio e delle caselle di controllo interessati, quindi verifica che ciascuno possa rimanere visivamente disabilitato pur ricevendo il focus da tastiera. Il lavoro è completato quando gli elementi interessati espongono in modo coerente il comportamento focusable-disabled richiesto senza perdere lo stile disabilitato.

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

Valutazione

Stack tecnologico
react, typescript
Ambito
accessibility, frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.