patternfly / patternfly/patternfly-react

Modal - create variation using `dialog` element

Open
#11,422 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

PF Team Stale Waiting for core
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing React Modal and ModalBox behavior, then read the linked core issue 7296 and the MDN dialog documentation. Check how the Backdrop component and focus handling are currently used. Done means an opt-in dialog-based variation works with appropriate accessibility behavior and its interaction with Backdrop and DOM placement is resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.