加了tabindex="0"但未配role和keydown会导致图表可聚焦却无交互响应、屏幕阅读器无法识别功能，必须同步设置role、监听Enter/空格键并阻止默认滚动，且焦点应落在具体可操作项而非整图容器。
tabindex="0"加在图表容器上，但没配role和keydown会怎样
加了tabindex="0的<div class="chart">能被Tab键选中，但用户按Enter或空格后毫无反应——这不是bug，是你漏掉了交互闭环。屏幕阅读器读它还是“普通容器”，用户根本不知道这是可钻取的图表。
<ul>
<li>必须同步加<code>role="region"或role="application"（后者更适用于高度交互的看板），若支持单点下钻，优先用role="button"并注明aria-label="查看XX维度详情"
keydown，且只响应event.key === 'Enter'和event.key === ' '（注意是空格字符），空格触发时务必调e.preventDefault()，否则页面滚动会打断操作流tabindex="0"就完事——如果内部有多个可钻取图例、坐标轴标签、数据点，应把焦点落到具体可操作项（如<span class="legend-item"></span>）上，而非笼统聚焦整图模态钻取弹窗打开后焦点不进内容区
点击柱状图某根柱子后弹出详情弹窗，但Tab键仍停在原图表上，或直接跳到页面底部——大概率是弹窗内首个可操作元素（如“导出CSV”按钮或“返回上一级”链接）没设tabindex="-1"，或弹窗DOM插入后未主动聚焦。
- 弹窗HTML结构里，第一个交互元素（比如确认按钮）必须带
tabindex="-1"，不能靠JS动态添加——SSR或hydration阶段就该存在 - 弹窗显示逻辑执行完毕后，立刻调用
document.querySelector('.drill-modal .btn-export').focus()；若用React/Vue，确保在mounted或useEffect的flush阶段执行，避开渲染队列 - 聚焦后补一句
element.scrollIntoView({ block: 'nearest', inline: 'nearest' })，避免因overflow: hidden或transform导致焦点元素被裁剪、不可见 - 关闭弹窗前，用
document.activeElement记录触发源（如data-chart-id="sales-2024-q2"的柱子），关完立即让该元素重新获得焦点
Grid布局下多图表并列时Tab顺序错乱
大屏看板用CSS Grid排布6个图表卡片，视觉上从左到右、从上到下阅读，但键盘Tab顺序却是先全扫完第一列、再第二列——这是因为你用了tabindex="1"~tabindex="6"硬编码排序，而Grid不改变DOM顺序，浏览器只认源码位置+正数tabindex优先级。
- 彻底禁用所有正整数
tabindex；Grid子项的Tab顺序应完全由HTML源码顺序决定——把高优先级图表（如主KPI卡）写在HTML前面，低优先级（如辅助趋势图）往后放 - 每个可钻取图表卡片的触发区域（如标题栏、图例项）用
tabindex="0"，但仅限真正需要交互的节点，非装饰性图标、背景色块一律不加 - 若需支持方向键导航（←→↑↓切换相邻图表），不要依赖tabindex，而是用
keydown监听+document.querySelectorAll('.chart-card')手动管理焦点索引，tabindex="-1"配合.focus()切换 - 用
:focus-visible定义焦点样式，别清掉默认outline后只留:focus——鼠标用户不该看到轮廓，键盘用户必须看见
动态加载图表后焦点失效或跳转异常
看板初始只加载头部KPI，其余图表按区域懒加载；新图表插入DOM后，Tab键要么跳过它，要么焦点停在空白处——因为tabindex属性没随节点一起注入，或JS聚焦时机早于DOM就绪。
立即学习“前端免费学习笔记（深入）”；
- 动态插入的图表节点，必须在插入HTML字符串或
createElement时就带上tabindex="0"（或tabindex="-1"），不能靠后续setAttribute补——SSR/hydration不一致会导致焦点错位 - 监听图表加载完成事件（如ECharts的
chartInstance.on('finished')或自定义customEvent），在回调里执行聚焦，而不是在setTimeout里盲目等待 - 若图表使用WebGL或Canvas渲染，其内部无DOM节点可聚焦，此时应在外层容器设
tabindex="0"+role="application"，并用aria-describedby关联描述性文本（如“双击空格键展开销售趋势详情”） - 所有动态组件的焦点管理逻辑，必须包裹在
if ('focusVisible' in CSS.supports('selector', ':focus-visible'))检测中，避免旧版Safari报错
tabindex="-1"不是写完就生效的开关，而是JS聚焦动作的前提条件；而:focus-visible不是锦上添花的样式，是键盘用户定位操作目标的唯一视觉线索。**
