html - 如何通过键盘访问 ``(无 javascript)

Question

上下文:我在 vue.js 应用程序中使用 bootstrap 4.1。

我有一个表格显示用户执行搜索的结果。

用户可以通过单击此结果表的任何行来“查看模式详细信息”。到目前为止鼠标很好。

如何使用键盘访问同一个表格？

预期结果:

1. 用户执行搜索
2. 数据如表所示
3. 通过按 TAB 他们聚焦 <table>
4. (“当前行”突出显示)
5. 通过点击 ENTER，他们能够“查看更多详细信息”给定突出显示的行

问题:

• 是否有浏览器原生的方式来实现这一点？
• 有没有不用 javascript 的方法？

---

---

到目前为止:

这是通过使用 <table> 完成的带有 tabindex="0" 的元素在每个 <tr>元素。我现在正在添加一些 javascript 魔法来使点击/输入用户交互触发以在另一个 div 中显示更多详细信息。感谢大家的帮助。

Answer 1

这与我认为不用 javascript 就可以达到的一样接近。

您需要使用 css 表格而不是 HTML 表格，并将 a 标记设置为 table-row。然后将 a 标签的“href”设置为包含更多信息的隐藏 div。使用 :target 伪类使隐藏信息可见。

您现在可以tab 浏览行。但是，您需要按 Return 激活链接(至少在 Chrome 中)

.table {
  display: table;
}

.table>.head,
.table>a {
  display: table-row;
}

.table>.head>span,
.table>a>span {
  display: table-cell;
  padding: 5px;
}

.table>a:focus {
  background-color: #CCC;
}

.moreInfo>div {
  display: none;
}

.moreInfo>div:target {
  display: block;
}

<div class="table">
  <div class="head">
    <span>Id</span>
    <span>Name</span>
    <span>Date</span>
  </div>
  <a href="#data1">
    <span>1</span>
    <span>Some Name</span>
    <span>9 Jan 2019</span>
  </a>
  <a href="#data2">
    <span>2</span>
    <span>Another Name</span>
    <span>10 Jan 2019</span>
  </a>

</div>
<div class="moreInfo">
  <div id="data1">Some more info on the first item</div>
  <div id="data2">Some more info on the second item</div>
</div>