2.7 KiB
2.7 KiB
BUG-028：跨域联合招聘会区域城市选择标签不是可访问交互控件
- 严重级别：P3（区域筛选控件可访问性问题）
- 状态：代码已修复，待测试环境浏览器复验
- 环境：test
- 角色：PC 监管管理员、PC 企业端
- 入口：
/shihezi/jobfair/jobfair/crosscityfair→ “区域管理” - 发现时间：2026-07-25
复现步骤
- 分别以监管管理员和企业角色打开“跨域联合招聘会管理”。
- 进入“区域管理”页签，观察 9 个城市标签。
- 用鼠标点击“石河子市”。
- 观察页面显示“已选择 1 个区域”，再用键盘 Tab 键遍历页面或查看 Chrome DevTools 无障碍树和 DOM。
预期结果
城市筛选项应表现为可聚焦、可键盘操作、可被读屏识别的多选控件，并暴露当前选中状态（例如按钮/复选框语义和 aria-pressed/aria-checked）。
实际结果
鼠标点击可以改变页面状态为“已选择 1 个区域”，但城市标签在 DOM 中是：
<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。
- 企业端选择后截图：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 和视觉样式，没有补充可访问的交互语义。该组件实现应在两个角色入口统一修复和验证。
建议
将城市选择项改为原生按钮/复选框，或为标签补充可聚焦、键盘事件和选中状态语义；同时确保焦点样式、批量选择和“清除筛选”操作对键盘/读屏可用。