Files
shz-backend/docs/test-reports/job-fair/2026-07-25/bugs/BUG-011-enterprise-crosscity-region-dialog-accessibility.md

50 lines
2.5 KiB
Markdown
Raw Normal View History

# 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` 或符合产品语义的值),并确保编辑/新增弹窗沿用同一字段规范。