[Bug] Header fullscreen/close controls lack accessible names and use hardcoded icon fills
维护者通常 1 天内回复
评估
这个 Issue 还没有评估数据。
描述
Current Behavior
In src/custom/Modal/index.tsx, the modal header actions are not properly accessible:
- The enter/exit fullscreen controls are the styled
FullScreenIcon/FullScreenExitIconSVG components with anonClick. They appear to be plain SVGs rather than buttons, so they have no role and no accessible name, and they are probably not keyboard-focusable. Please verify with a keyboard and a screen reader. The surroundingCustomTooltiponly helps on hover. - The close control is an
IconButton(CloseBtn) with noaria-label, so a screen reader announces only "button". CloseBtnhardcodesfill: #fff(andCloseIconpassesfill="#fff") instead of using the theme/token or inheritingcurrentColor. The fullscreen icons already usetheme.palette.common.white, so the header is inconsistent.
This conflicts with the existing guidance in DESIGN.md ("Semantic ARIA: icon-only buttons must supply descriptive aria-label and Tooltip").
Expected Behavior
- Fullscreen toggle: a native, keyboard-operable button (for example MUI
IconButton) witharia-label"Enter fullscreen" / "Exit fullscreen", keeping the existing tooltip anddata-testids (modal-enter-fullscreen-btn,modal-exit-fullscreen-btn). - Close control:
aria-label="Close dialog"(keepdata-testid="modal-close-btn"). - Icon colors come from the existing theme token or inherit via
currentColor(the header'scolor) rather than a hardcoded literal. - Keep this focused on the header controls: no layout or styling redesign.
Acceptance Criteria
-
getByRole('button', { name: 'Enter fullscreen' }),{ name: 'Exit fullscreen' }and{ name: 'Close dialog' }resolve in tests. - Both controls can be focused and activated with Tab, Enter and Space.
- No hardcoded color literals remain in the header controls.
- Existing Modal tests and
data-testids keep passing. - Does not change
Modal/useModalpublic props.
Context
- Raised in review by @leecalcote on #1868, and deliberately left out of that PR to keep it scoped to #1864.
Screenshots/Logs
Environment
Contributor Guides and Resources
- 🛠 Meshery Build & Release Strategy
- 📚 Instructions for contributing to documentation
- 🎨 Wireframes and designs for Sistent site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack
- 主要语言
- TypeScript
- 星标
- 140
- 派生
- 244
- 平均合并
- 2 天 18 小时
- 30 天内合并 PR
- 18
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
layer5io/sistent 的其他 Issue
-
area/docs language/markdown
难度 1/5 1 小时以内 新手友好度 92/100
维护者通常 1 天内回复
-
PermissionShield: make the permissions docs link configurable instead of hard-coding docs.meshery.io可能已有人在做 @SajanBisht 于 5 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
layer5io/sistent#1883 · 2 条评论 ·
维护者通常 1 天内回复
-
InfoTooltip is not keyboard reachable and has no accessible name可能重新可做 关联的 PR 已关闭且未合并。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
-
[UI] Permission Shield tooltip uses fixed `placement="top"` instead of adaptive placement可能已有人在做 @dhruveshmishra 于 84 天前认领。 未关闭component/ui help wanted kind/enhancement
难度 2/5 1-3 小时 新手友好度 68/100
layer5io/sistent#1772 · 5 条评论 ·
维护者通常 1 天内回复
-
Barrel re-exports DateTimePickerProps from the optional peer @mui/x-date-pickers, so the type is `any` for consumers who skip it可能已有人在做 @Valyrian-Code 于 93 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 82/100
layer5io/sistent#1749 · 1 条评论 ·
维护者通常 1 天内回复
相似的 Issue
-
[Bug]: Pen taps on sidebar rows start a drag and lose their click可能已有人在做 @makhnatkin 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复
-
enhancement
难度 2/5 1-3 小时 新手友好度 70/100
b310-digital/teammapper#1515 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 79/100
puckeditor/puck#1884 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 65/100
outline/outline#14378 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
nicobailon/pi-web-access#642 ·
维护者通常 1 天内回复