patternfly / patternfly/patternfly-react

Drawer - automatically manage focus when drawer is opened/closed

Aperta
#8,534 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

A11y Breaking change :boom: PF Team
Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

Descrizione

Follow up for core issue https://github.com/patternfly/patternfly/issues/5319
A more consistent solution than was used to fix https://github.com/patternfly/patternfly-react/issues/8394

move the close button to the top of the drawer body rather than the end.

The modal component automatically places focus on the first interactable element in the modal when it is opened.
In the case of the Drawer, that should be the close button by default.
If the close button is not provided, then it should be the first interactable element in the drawer.
If there are no interactable elements, focus should be placed on the drawer body.

Like the modal, this should happen automatically for the drawer, unless overridden by the consumer.

When the drawer is closed, focus should be returned to the drawer toggle - or at least, the props needed for the consumer to implement this focus management should be exposed. All related examples/demos should be updated to use this behavior (including the wizard with drawer)


Jira Issue: PF-145

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 confrontando il comportamento del focus di Drawer con il comportamento esistente di Modal e esamina gli esempi di Drawer, incluso il wizard con drawer. Implementa il comportamento del focus indicato in apertura e chiusura, con override da parte del consumer, quindi aggiorna tutti gli esempi e le demo correlati. Il lavoro è completato quando il focus raggiunge il pulsante di chiusura, il primo elemento interattivo o il corpo del drawer secondo necessità, e torna al toggle del drawer alla chiusura.

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à
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.