html - 嵌套级别选项卡不工作 HTML CSS？

Question

我在这里添加了我的代码和演示链接 Click Here

这里有一些列表项，每个列表都包含一些操作按钮来“编辑、删除”将鼠标悬停在仅可见的操作按钮上，并且根据 WCAG，我希望通过按选项卡到下一个下一个按钮和列表来显示操作按钮。

使用 Tab 键时无法选择操作按钮。

我想先选择列表再选择操作按钮

每个列表都一样

.action {
  display: none;
}

button {
  margin: 5px;
}

ul li:focus .action {
  display: block;
}

ul li:hover .action {
  display: block;
}

<p>This is admin menu list</p>

<ul>
  <li tabindex="0">Collection 1
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 2
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 3
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 4
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 5
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
</ul>

Answer 1

当您Tab 时，焦点移动到按钮，离开li。您的 CSS 规则使得 li 失去焦点将隐藏按钮的容器。

你可以使用 :focus-within而不是 :focus 来解决这个问题。它适用于具有焦点的元素，或者包含具有焦点的元素。

不幸的是，IE 或 Edge 不支持它，但我相信它是唯一不涉及 JavaScript 的解决方案。

.action {
  display: none;
}

button {
  margin: 5px;
}

ul li:focus-within .action {
  display: block;
}

ul li:hover .action {
  display: block;
}

<p>This is admin menu list</p>

<ul>
  <li tabindex="0">Collection 1
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 2
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 3
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 4
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 5
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
</ul>