50 lines
2.5 KiB
Markdown
50 lines
2.5 KiB
Markdown
# BUG-011：企业端跨域联合招聘会联盟城市管理弹窗存在字段无障碍问题
|
||
|
||
- 严重级别：P3（管理弹窗可访问性问题）
|
||
- 状态：代码已修复，待测试环境浏览器复验
|
||
- 环境：test
|
||
- 角色：PC 企业端（已登录测试企业角色）
|
||
- 入口：`/shihezi/jobfair/jobfair/crosscityfair` → “区域管理” → “管理”
|
||
- 发现时间：2026-07-25
|
||
|
||
## 复现步骤
|
||
|
||
1. 打开企业端“跨域联合招聘会管理”。
|
||
2. 切换到“区域管理”页签。
|
||
3. 点击“管理”，打开“联盟城市管理”弹窗。
|
||
4. 观察“城市名称”查询字段，并查看 Chrome DevTools Issues/Console。
|
||
|
||
## 预期结果
|
||
|
||
弹窗中的“城市名称”字段应有唯一 `id/name`，与可见标签关联，并设置适当的 `autocomplete` 值；已有城市列表、编辑和删除按钮应保持键盘/读屏可识别。
|
||
|
||
## 实际结果
|
||
|
||
打开弹窗后 Chrome DevTools 记录：
|
||
|
||
- `A form field element should have an id or name attribute (count: 3)`，相较统计页基线的 2 个增加 1 个；
|
||
- `No label associated with a form field (count: 1)`；
|
||
- `An element doesn't have an autocomplete attribute (count: 1)`。
|
||
|
||
只读 DOM 检查显示弹窗“城市名称”原生输入存在 `id=name`，但没有 `name`、`aria-label`、`aria-labelledby` 或 `autocomplete` 属性，且没有形成稳定的 label 关联。
|
||
|
||
## 浏览器证据
|
||
|
||
- 页面截图：[JF-EN-013-crosscity-region-management.png](../screenshots/JF-EN-013-crosscity-region-management.png)
|
||
- `GET /api/shihezi/cms/cross-city-alliance/list?current=1&pageSize=10`：HTTP 200，弹窗显示 9 个联盟城市，列表和分页正常。
|
||
- 控制台 Issue：`msgid=57 [issue] A form field element should have an id or name attribute (count: 3)`。
|
||
- 控制台 Issue：`msgid=59 [issue] No label associated with a form field (count: 1)`。
|
||
- 控制台 Issue：`msgid=60 [issue] An element doesn't have an autocomplete attribute (count: 1)`。
|
||
|
||
## 影响范围
|
||
|
||
企业用户在跨域城市维护中使用读屏或自动化工具时，无法可靠识别城市查询输入框；缺失 autocomplete 也会影响浏览器表单行为和质量检查。
|
||
|
||
## 初步定位
|
||
|
||
问题位于 `shz-admin/src/pages/Jobfair/Crosscityfair` 的联盟城市管理弹窗查询表单字段，与数据接口无关；城市列表接口 HTTP 200 且返回 9 条记录。
|
||
|
||
## 建议
|
||
|
||
补充“城市名称”字段的 `name`、显式 label/`aria-labelledby` 和合适的 `autocomplete`（例如 `off` 或符合产品语义的值），并确保编辑/新增弹窗沿用同一字段规范。
|