添加什么指令可让div在tab键键盘导航时能够被正常聚焦？

解决方案 #

若需要让外层 div.vertical-menu 支持tab聚焦 #

默认情况下div不属于原生可聚焦元素，只需给它添加tabindex属性即可：

<div class="vertical-menu" tabindex="0">       
  <a ng-class="{active: Page == 'homeview'}" ng-click="Page = 'homeview'">
    Home
  </a>    
</div>

• tabindex="0"：将元素加入默认tab导航序列，按照DOM结构顺序参与tab切换，是最常用的实现方案
• tabindex="正整数"：可自定义元素的tab导航优先级，数值越小越先被选中，不推荐使用，会打乱页面原生导航逻辑
• tabindex="-1"：元素仅支持通过JS主动调用focus()方法聚焦，不会出现在tab导航序列中

若实际是内部<a>标签无法被聚焦 #

你代码里的a标签没有设置href属性，默认也不可聚焦，有两种修复方案：

1. 给a标签添加合法href属性，兼容原生聚焦逻辑：

<div class="vertical-menu">       
  <a href="javascript:void(0)" ng-class="{active: Page == 'homeview'}" ng-click="Page = 'homeview'">
    Home
  </a>    
</div>

2. 给a标签加tabindex="0"，同时补充无障碍相关配置，符合可访问性规范：

<div class="vertical-menu">       
  <a 
    tabindex="0"
    role="button"
    ng-class="{active: Page == 'homeview'}" 
    ng-click="Page = 'homeview'"
    ng-keydown="$event.key === 'Enter' || $event.key === ' ' ? Page = 'homeview' : void 0"
  >
    Home
  </a>    
</div>

注意：标记为role="button"的交互元素必须支持回车、空格键触发交互操作，否则会存在无障碍使用缺陷。

内容的提问来源于stack exchange，提问作者CleanCoder540