patternfly / patternfly/patternfly-react
Tooltips for disabled radio and checkbox
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beschreibung
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-disabledclass 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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der Überprüfung der interaktiven Elemente, die deaktivierte Steuerelemente rendern, sowie der Tooltip-Komponente. Erfasse die betroffenen Schaltflächen, Links, Optionsfelder und Kontrollkästchen und überprüfe anschließend, dass jedes davon visuell deaktiviert bleiben kann und dennoch den Tastaturfokus erhält. Erledigt ist dies, wenn die betroffenen Elemente das angeforderte focusable-disabled-Verhalten konsistent bereitstellen, ohne die Darstellung als deaktiviert zu verlieren.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100