50 lines
2.7 KiB
Markdown
50 lines
2.7 KiB
Markdown
|
# BUG-028：跨域联合招聘会区域城市选择标签不是可访问交互控件
|
|||
|
|
|
|||
|
|
- 严重级别：P3（区域筛选控件可访问性问题）
|
|||
|
|
- 状态：代码已修复，待测试环境浏览器复验
|
|||
|
|
- 环境：test
|
|||
|
|
- 角色：PC 监管管理员、PC 企业端
|
|||
|
|
- 入口：`/shihezi/jobfair/jobfair/crosscityfair` → “区域管理”
|
|||
|
|
- 发现时间：2026-07-25
|
|||
|
|
|
|||
|
|
## 复现步骤
|
|||
|
|
|
|||
|
|
1. 分别以监管管理员和企业角色打开“跨域联合招聘会管理”。
|
|||
|
|
2. 进入“区域管理”页签，观察 9 个城市标签。
|
|||
|
|
3. 用鼠标点击“石河子市”。
|
|||
|
|
4. 观察页面显示“已选择 1 个区域”，再用键盘 Tab 键遍历页面或查看 Chrome DevTools 无障碍树和 DOM。
|
|||
|
|
|
|||
|
|
## 预期结果
|
|||
|
|
|
|||
|
|
城市筛选项应表现为可聚焦、可键盘操作、可被读屏识别的多选控件，并暴露当前选中状态（例如按钮/复选框语义和 `aria-pressed`/`aria-checked`）。
|
|||
|
|
|
|||
|
|
## 实际结果
|
|||
|
|
|
|||
|
|
鼠标点击可以改变页面状态为“已选择 1 个区域”，但城市标签在 DOM 中是：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<span class="ant-tag ant-tag-checkable ..."><span>石河子市</span></span>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
该元素没有 `role`、没有 `tabindex`（DOM `tabIndex=-1`）、没有 `aria-checked`/`aria-pressed`，在 DevTools 无障碍树中只显示为 `StaticText`，不能作为键盘焦点或标准选择控件使用。管理员和企业端均可复现同样结构。
|
|||
|
|
|
|||
|
|
## 浏览器证据
|
|||
|
|
|
|||
|
|
- 管理端选择后截图：[JF-AD-027-admin-crosscity-region-selected.png](../screenshots/JF-AD-027-admin-crosscity-region-selected.png)。
|
|||
|
|
- 企业端选择后截图：[JF-EN-014-crosscity-region-selected-no-job-tab.png](../screenshots/JF-EN-014-crosscity-region-selected-no-job-tab.png)。
|
|||
|
|
- 管理端无障碍快照在城市标签处显示 `StaticText "石河子市"`，而不是 button/checkbox。
|
|||
|
|
- 只读 DOM 检查结果：`SPAN.ant-tag-checkable` 的 `role=null`、`tabIndex=-1`、`aria-checked=null`。
|
|||
|
|
- 点击城市没有发起筛选请求；页面只更新本地“已选择 1 个区域”文本。
|
|||
|
|
|
|||
|
|
## 影响范围
|
|||
|
|
|
|||
|
|
鼠标用户可以完成选择，但键盘用户和读屏用户无法可靠发现、聚焦或切换城市，区域筛选不满足可访问交互控件的基本语义要求。问题同时影响监管管理员和企业端。
|
|||
|
|
|
|||
|
|
## 初步定位
|
|||
|
|
|
|||
|
|
`shz-admin/src/pages/Jobfair/Crosscityfair/index.tsx` 约第 279–291 行使用 `Tag.CheckableTag` 渲染城市标签，只提供 `onChange` 和视觉样式，没有补充可访问的交互语义。该组件实现应在两个角色入口统一修复和验证。
|
|||
|
|
|
|||
|
|
## 建议
|
|||
|
|
|
|||
|
|
将城市选择项改为原生按钮/复选框，或为标签补充可聚焦、键盘事件和选中状态语义；同时确保焦点样式、批量选择和“清除筛选”操作对键盘/读屏可用。
|