BUG-027：管理端跨域联合招聘会联盟城市管理弹窗存在字段无障碍问题

严重级别：P3（管理弹窗可访问性问题）
状态：代码已修复，待测试环境浏览器复验
环境：test
角色：PC 监管管理员（超级管理员）
入口：/shihezi/jobfair/jobfair/crosscityfair → “区域管理” → “管理”
发现时间：2026-07-25

前置条件

使用测试环境监管管理员进入招聘会管理页面；当前数据中联盟城市接口可返回 9 条城市记录。本问题只涉及查看和查询，没有新增、编辑或删除城市。

复现步骤

打开监管管理端“跨域联合招聘会管理”。
保持“区域管理”页签，点击“管理”。
观察“联盟城市管理”弹窗中的“城市名称”查询输入框。
在 Chrome DevTools 查看 Console/Issues 以及输入框 DOM 属性。
可选：输入“石”并点击“查询”，验证问题不影响接口返回；再点击“重置”恢复 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。
查询结果截图：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&current=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 对应，说明同一实现至少在两个角色入口复现。

初步定位

前端 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、无障碍树和键盘焦点。

3.7 KiB Raw Blame History Unescape Escape