[英]Navigate Description List using up / down arrow keys in React
In the following example, you can use tab
and shift tab
in order to navigate through the list Description Details ( <dd>
tag), this works by default.在以下示例中,您可以使用
tab
和shift tab
来浏览列表 Description Details( <dd>
标签),默认情况下这是有效的。
<dl>
<dt style={{ textAlign: "center" }}>Beast of Bodmin</dt>
<dd>
<Button>A large feline inhabiting Bodmin Moor.</Button>
</dd>
<dt style={{ textAlign: "center" }}>Morgawr</dt>
<dd>
<Button>A sea serpent.</Button>
</dd>
<dt style={{ textAlign: "center" }}>Owlman</dt>
<dd>
<Button>A giant owl-like creature.</Button>
</dd>
</dl>
I want to achieve the same using also (or instead), up and down arrow keys.我也想使用(或代替)向上和向下箭头键来实现相同的目的。
You can find a running example in the following codesandbox:您可以在以下代码框中找到一个运行示例:
https://codesandbox.io/s/friendly-tdd-t6z5lz?file=/src/App.tsx:329-772 https://codesandbox.io/s/friendly-tdd-t6z5lz?file=/src/App.tsx:329-772
Any suggestions?有什么建议么?
To put it more correctly, you can use Tab to navigate the buttons.更准确地说,您可以使用Tab导航按钮。 It doesn't matter what structure they are in.
它们的结构无关紧要。
Now, if you want to establish a composite component by implementing Keyboard Navigation Inside the Component , the component needs to fit an expected pattern , which then should be conveyed by visual means as well as the correct ARIA Role (affordance).现在,如果您想通过在 Component 内部实现 Keyboard Navigation来建立复合组件,则该组件需要符合预期的模式,然后应该通过视觉手段以及正确的 ARIA 角色(可供性)来传达。
While your examples don't hint towards the actual nature of your buttons, the Toolbar pattern seems appropriate, in its vertical configuration.虽然您的示例并未暗示按钮的实际性质,但工具栏模式在其垂直配置中似乎是合适的。
<dl role="toolbar" aria-orientation="vertical" aria-label="Name this toolbar!">
To actually implement keyboard navigation inside a component, the Roving tabindex usually is the easiest solution.要在组件内实际实现键盘导航, Roving tabindex通常是最简单的解决方案。
tabindex="-1"
.tabindex="-1"
。 This way, the user can enter and leave the component by means of TabnextButton.focus();
nextButton.setAttribute('tabindex', 0);
currentButton.setAttribute('tabindex', -1);
There also are mixins available on npm that establish a roving tab index. npm 上也有可用的 mixin,用于建立粗纱标签索引。
You are using a <dl>
structure, which assigns the terms <dt>
to the button's text.您正在使用
<dl>
结构,它将术语<dt>
分配给按钮的文本。 Since users are navigating this component with focus, you will need to associate these terms also for assistive technology with the button, not only visually.由于用户正在重点导航此组件,因此您需要将这些术语也用于辅助技术与按钮相关联,而不仅仅是视觉上。
This can be achieved via the aria-describedby
property .这可以通过
aria-describedby
属性来实现。 That way, when focussing the button, a screen reader will also announce the term.这样,当聚焦按钮时,屏幕阅读器也会宣布该术语。
<dt style={{ textAlign: "center" }} id="dt-beast-bodmin">Beast of Bodmin</dt>
<dd>
<Button aria-describedby="dt-beast-bodmin">A large feline inhabiting Bodmin Moor.</Button>
</dd>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.