56 lines
3.7 KiB
Markdown
56 lines
3.7 KiB
Markdown
|
# BUG-027：管理端跨域联合招聘会联盟城市管理弹窗存在字段无障碍问题
|
|||
|
|
|
|||
|
|
- 严重级别：P3（管理弹窗可访问性问题）
|
|||
|
|
- 状态：代码已修复，待测试环境浏览器复验
|
|||
|
|
- 环境：test
|
|||
|
|
- 角色：PC 监管管理员（超级管理员）
|
|||
|
|
- 入口：`/shihezi/jobfair/jobfair/crosscityfair` → “区域管理” → “管理”
|
|||
|
|
- 发现时间：2026-07-25
|
|||
|
|
|
|||
|
|
## 前置条件
|
|||
|
|
|
|||
|
|
使用测试环境监管管理员进入招聘会管理页面；当前数据中联盟城市接口可返回 9 条城市记录。本问题只涉及查看和查询，没有新增、编辑或删除城市。
|
|||
|
|
|
|||
|
|
## 复现步骤
|
|||
|
|
|
|||
|
|
1. 打开监管管理端“跨域联合招聘会管理”。
|
|||
|
|
2. 保持“区域管理”页签，点击“管理”。
|
|||
|
|
3. 观察“联盟城市管理”弹窗中的“城市名称”查询输入框。
|
|||
|
|
4. 在 Chrome DevTools 查看 Console/Issues 以及输入框 DOM 属性。
|
|||
|
|
5. 可选：输入“石”并点击“查询”，验证问题不影响接口返回；再点击“重置”恢复 9 条列表。
|
|||
|
|
|
|||
|
|
## 预期结果
|
|||
|
|
|
|||
|
|
“城市名称”查询字段应有稳定的 `id` 或 `name`，可见标签应通过 `for`/`aria-labelledby` 与输入框关联，并设置合理的 `autocomplete`；读屏、键盘和浏览器辅助检查应能识别该字段。查询和重置仍应正常工作。
|
|||
|
|
|
|||
|
|
## 实际结果
|
|||
|
|
|
|||
|
|
弹窗能正常显示 9 个联盟城市，输入“石”后返回 1 条“石河子市”，重置后恢复 9 条；但 DevTools 记录了字段质量问题：
|
|||
|
|
|
|||
|
|
- `A form field element should have an id or name attribute (count: 3)`；
|
|||
|
|
- `No label associated with a form field (count: 1)`；
|
|||
|
|
- `An element doesn't have an autocomplete attribute`。
|
|||
|
|
|
|||
|
|
只读 DOM 检查显示弹窗输入为 `type=text`，有 `id="name"`，但没有 `name`、`aria-label`、`aria-labelledby` 或 `autocomplete`。可见“城市名称”在视觉上存在，但没有形成稳定的原生标签关联；同页日期输入也没有完整的 `id/name` 语义，因此 DevTools 汇总出的无 id/name 数量为 3。
|
|||
|
|
|
|||
|
|
## 浏览器证据
|
|||
|
|
|
|||
|
|
- 弹窗全页截图：[JF-AD-024-admin-crosscity-region-dialog.png](../screenshots/JF-AD-024-admin-crosscity-region-dialog.png)。
|
|||
|
|
- 查询结果截图：[JF-AD-025-admin-crosscity-city-search.png](../screenshots/JF-AD-025-admin-crosscity-city-search.png)。
|
|||
|
|
- 初始联盟城市请求：`GET /api/shihezi/cms/cross-city-alliance/list?current=1&pageSize=10`，HTTP 200。
|
|||
|
|
- 条件查询请求：`GET /api/shihezi/cms/cross-city-alliance/list?name=%E7%9F%B3¤t=1&pageSize=10`，HTTP 200，响应列表为 1 条。
|
|||
|
|
- 重置请求：`GET /api/shihezi/cms/cross-city-alliance/list?current=1&pageSize=10`，HTTP 200，响应列表为 9 条。
|
|||
|
|
- Console/Issues：`msgid=181` 的无 id/name 问题、`msgid=183` 的标签关联问题、`msgid=184` 的 autocomplete 问题。
|
|||
|
|
|
|||
|
|
## 影响范围
|
|||
|
|
|
|||
|
|
管理员可以用鼠标查询城市，但读屏用户、键盘用户和依赖表单语义的自动化/质量工具无法可靠识别该字段。该问题与企业端同一功能的 [BUG-011](./BUG-011-enterprise-crosscity-region-dialog-accessibility.md) 对应，说明同一实现至少在两个角色入口复现。
|
|||
|
|
|
|||
|
|
## 初步定位
|
|||
|
|
|
|||
|
|
前端 `shz-admin/src/pages/Jobfair/Crosscityfair/index.tsx` 的 `AllianceManageModal` 在约第 170–200 行使用 `ProTable` 查询，在第 232–237 行使用 `ProFormText name="name" label="城市名称"`。当前构建生成的原生输入未补齐 DevTools 所需的表单语义属性；城市列表接口本身返回正常，不是数据接口故障。
|
|||
|
|
|
|||
|
|
## 建议
|
|||
|
|
|
|||
|
|
为查询输入补充稳定的 `id/name`、显式 `label`/`aria-labelledby` 和符合语义的 `autocomplete`，并统一检查新增/编辑城市表单。修复后应在管理员和企业角色分别重新检查 Console/Issues、无障碍树和键盘焦点。
|