html - 引导选项卡无法访问 Vuejs

Question

我有一个引导选项卡工作正常，问题是它无法以某种方式访问​​，即当焦点位于使用箭头键盘按钮的选项卡上时不会改变焦点。这是我的标签的代码：

HTML

<ul class="nav nav-tabs" role="tablist">
      <li
        role="presentation"
        :class="[
            activeSection == 'step-1' ? 'active': '',
            maxStep > 1 ? 'completed': ''
        ]">
        <a
            href="#step-1"
            id="accountInfoTab"
            role="tab"
            tabindex="0"
            aria-controls="accountInfo"
            :aria-expanded="activeSection == 'step-1' ? 'true': 'false'">
        </a>
      </li>
      <li
        role="presentation"
        :class="[
            activeSection == 'step-2' ? 'active': '',
            maxStep > 2 ? 'completed': ''
        ]">
        <a
            href="#step-2"
            id="personalInfoTab"
            role="tab"
            aria-controls="personalInfo"
            :aria-expanded="activeSection == 'step-2' ? 'true': 'false'"
            aria-expanded="false"
            :disabled="isDisabled(2)"
            :tabindex="isDisabled(2) ? '-1': '0'">
        </a>
      </li>
      <li
        role="presentation"
        :class="[
            activeSection == 'step-3' ? 'active': '',
            maxStep > 3 ? 'completed': ''
        ]">
        <a
            href="#step-3"
            role="tab"
            id="preferencesTab"
            aria-controls="preferences"
            :aria-expanded="activeSection == 'step-3' ? 'true': 'false'"
            :disabled="isDisabled(3)"
            :tabindex="isDisabled(3) ? '-1': ''">
        </a>
      </li>
      <li
        role="presentation"
        :class="[
            activeSection == 'step-4' || activeSection == 'terms' ? 'active': '',
            maxStep > 4 ? 'completed': ''
        ]">
        <a
          href="#step-4"
          role="tab"
          id="summaryTab"
          aria-controls="summary"
          :aria-expanded="activeSection == 'step-4' ? 'true': 'false'"
          :disabled="isDisabled(4)"
          :tabindex="isDisabled(4) ? '-1': ''">
        </a>
      </li>
</ul>


  <div
    id="registrationFlowTabContent"
    class="tab-content"
    :class="[
        activeSection == 'terms' ? 'wide-content' : '',
        displayAlert ? 'alert-displayed': ''
    ]">
    <!-- accountInfo Tab -->
    <div
        role="tabpanel"
        v-show="activeSection == 'step-1'"
        class="tab-pane fade"
        :class="activeSection == 'step-1'? 'active in': ''"
        id="accountInfo"
        aria-labelledby="accountInfoTab"
        aria-hidden="false"
        aria-expanded="true">
            <!-- some content -->
        </div>

    <!-- personalInfo Tab -->
    <div
        role="tabpanel"
        v-show="activeSection == 'step-2'"
        class="tab-pane fade"
        :class="activeSection == 'step-2'? 'active in': ''"
        id="personalInfo"
        aria-labelledby="personalInfoTab"
        aria-hidden="true"
        aria-expanded="false">
            <!-- some content -->
    </div>

    <!-- preferences Tab -->
    <div
        role="tabpanel"
        v-show="activeSection == 'step-3'"
        :class="activeSection == 'step-3'? 'active in': ''"
        class="tab-pane fade"
        id="preferences"
        aria-labelledby="preferencesTab"
        aria-hidden="true"
        aria-expanded="false">
            <!-- some content -->
    </div>

    <!-- summary Tab -->
    <div
      role="tabpanel"
      v-show="activeSection == 'step-4'"
      class="tab-pane fade"
      :class="activeSection == 'step-4'? 'active in': ''"
      id="summary"
      aria-labelledby="summaryTab"
      aria-hidden="true"
      aria-expanded="false">
        <!-- some content -->
    </div>
</div>

javascript 函数仅禁用/启用选项卡，不执行任何可访问性工作。所以我想知道什么是使它们易于访问的好方法？我相信我应该实现一些事件监听器，对吧？如果是，我将如何在 Vuejs 中做到这一点？

更新

好的，所以我添加了这段 javascript，它使我能够在选项卡之间导航，但事情就是这样。假设我在第一个标签上。通过按右箭头键，它转到下一个正确的选项卡，但是：

1-如果选项卡被禁用，则不应将焦点移至它（确实如此）。2-如果启用了下一个选项卡并且在按右键箭头后焦点转到它我希望内容立即显示。现在我必须按 Enter 才能显示内容。3-我希望输入键将焦点移动到选项卡面板内容内的下一个可聚焦元素上，而不是选择该选项卡。

tabAccessibility(){
  var tabs = $("#exTab2");
  var tabsList = tabs.find("ul:first").attr({    
    "role": "tablist"
  });
  $(tabsList).find("li > a").each(
    function() {
      var tab = $(this);
      tab.click(
        function(e) {
          e.preventDefault();
          tab.focus();
        }
      );
    }
  );
  $(tabsList).delegate("a", "keydown",
    function(e) {

      var tab = $(this);
      switch (e.which) {
        case 37:
        case 38:
          //case 38:
          e.preventDefault();
          if (tab.parent().prev().length !== 0 ) {
            console.log(tab.parent().prev())
            tab.parent().prev().find("> a").click();
          } else {
            console.log(tab.parent().prev())
            $(tabsList).find("li:last > a").click();
          }
          break;
        case 39:
        case 40:
          e.preventDefault();
          if (tab.parent().next().length !== 0) {
            tab.parent().next().find("> a").click();
          } else {
            $(tabsList).find("li:first > a").click();
          }
          break;
      }
    }
  );
}

标签： htmlvue.jstabsaccessibilitybootstrap-tabs