patternfly / patternfly/patternfly-react

Modal - create variation using `dialog` element

未关闭
#11,422 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

PF Team Stale Waiting for core
主要语言
TypeScript
星标
862
派生
392
平均合并
4 天 8 小时
30 天内合并 PR
9

描述

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先检查现有 React Modal 和 ModalBox 的行为,然后阅读链接的 core issue 7296 以及 MDN 的 dialog 文档。检查当前如何使用 Backdrop 组件和焦点处理。完成的标准是:一个基于 dialog、通过 opt-in 启用的变体能够正常工作并具备适当的无障碍行为,同时其与 Backdrop 的交互以及在 DOM 中的位置问题已得到解决。

由索引模型根据 Issue 内容生成。

评估

技术栈
html, react, typescript
领域
accessibility, frontend
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。