patternfly / patternfly/patternfly-react

Modal - create variation using `dialog` element

Ouverte
#11,422 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

PF Team Stale Waiting for core
Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
9

Description

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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par examiner le comportement existant de React Modal et de ModalBox, puis consultez le core issue 7296 associé et la documentation MDN sur dialog. Vérifiez comment le composant Backdrop et la gestion du focus sont actuellement utilisés. Le travail est considéré comme terminé lorsqu’une variante basée sur dialog et activée opt-in fonctionne avec un comportement d’accessibilité approprié, et que son interaction avec Backdrop et son placement dans le DOM sont résolus.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
html, react, typescript
Domaine
accessibility, frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.