chaitin / chaitin/MonkeyCode

fix(frontend): 补充任务预览弹窗的无障碍描述

Open Beginner friendly
#915 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
4.7k
Forks
719
Avg merge
4h 30m
Merged PRs (30d)
83

Description

问题描述

打开任务详情页的端口预览弹窗时,浏览器控制台出现 Radix UI 警告:

Warning: Missing `Description` or `aria-describedby={undefined}` for {DialogContent}.

根因

任务预览弹窗包含 DialogTitle,缺少与 DialogContent 关联的 DialogDescription,屏幕阅读器无法获知弹窗用途。

修复范围

  • 为任务预览弹窗增加仅供屏幕阅读器读取的描述
  • 补充中英文描述文案
  • 增加回归测试,防止描述被移除

验收标准

  • 打开任务预览弹窗后,控制台不再出现缺少 Description 的警告
  • 屏幕阅读器可以读取任务预览弹窗用途
  • 弹窗现有布局和交互保持一致
  • 前端专项测试、ESLint 和构建通过

补充说明

登录前 /api/v1/users/status 返回 401、Edge LanguageDetector 提示、浏览器扩展 content.js 日志和任务控制 WebSocket 连接失败属于独立现象,不纳入本 Issue。

Contributor guide

No contributing guide indexed for this repository

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 at the task details page's port preview dialog and find the DialogContent that has a DialogTitle but no associated description. Add screen-reader-only bilingual description text, then add the regression test described in the issue and run the frontend tests, ESLint, and build; done means no Radix warning, accessible dialog purpose, and unchanged layout and interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend, testing
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.