patternfly / patternfly/patternfly-react

Modal - create variation using `dialog` element

Offen
#11,422 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

PF Team Stale Waiting for core
Vorherrschende Sprache
TypeScript
Sterne
862
Forks
392
Ø Merge
4 T. 8 Std.
Gemergte PRs (30 T.)
9

Beschreibung

Is this a new component or an extension of an existing one?
The Modal creates a ModalBox, which will have a variation in Core built using the <dialog> element.

Describe the feature
<dialog> provides functionality built into browsers that handles placing the modal on the top layer, handling keyboard focus, and providing a ::backdrop pseudoelement. Users should be able to opt in to this variant, which then probably does not need the separate Backdrop component, may not need to be placed in the DOM where it is now, and focus will be handled by the browser. A11y should be reviewed given that the dialog implicitly provides appropriate aria labeling.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

This issue is dependent on completion in core in https://github.com/patternfly/patternfly/issues/7296

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das bestehende Verhalten von React Modal und ModalBox zu überprüfen, und lies anschließend das verknüpfte Core-Issue 7296 sowie die MDN-Dokumentation zu dialog. Prüfe, wie die Backdrop-Komponente und das Fokus-Handling derzeit verwendet werden. Als abgeschlossen gilt die Arbeit, wenn eine opt-in dialog-basierte Variante mit angemessenem Accessibility-Verhalten funktioniert und ihre Interaktion mit Backdrop und der DOM-Platzierung geklärt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
html, react, typescript
Bereich
accessibility, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.