Question

我正在实施Dragon Drop来创建可访问的可拖动列表。我需要为每个列表项添加一个按钮以允许它被删除，但无论我如何委托点击我的按钮，我似乎无法阻止Dragon Drops默认行为被触发。

因此我决定将删除按钮放在另一个div中，并将它们相对于相应的列表项放置。但是，由于它们不在文档流中，因此利用键盘导航的用户在完成整个列表之后才会进入任何删除按钮。

让我们说我有以下结构：

<ul>
  <li id="item-1">Item 1</li>
  <li id="item-2>Item 2</li>
</ul>

<div>
  <button id="delete-item-1"></button>
  <button id="delete-item-2"></button>
</div>

有没有办法影响键盘导航，以便用户按以下顺序选中元素？

#item-1
#delete-item-1
#item-2
#delete-item-2

我已尝试设置顺序tabindex属性，但这不起作用。我假设这是因为他们不是生活在同一个元素内。

Answer 1

通常手动更改标签顺序并正确操作非常困难。出于这个原因，它非常气馁，即使对于像这样的案件，乍一看似乎合法，我也不建议你去做。

如果你真的想这样做，你可以使用值大于0的绝对tabindex，或者在keydown事件中捕捉tab和shift + tab press并自己移动焦点，但这两个解决方案都不是理想的。当列表内容发生变化时，两者都难以设置，并且难以始终保持正确，在动态更改tabindex正值或将键盘和鼠标混合使用时，不会偶尔提到浏览器错误。

最好的方法是找到一个解决方案，以便您可以拥有如下所示的结构，其中隐含地具有正确的Tab键顺序：

<ul>
<li><button>Item 1</button><button>Delete item 1</button></li>
<li><button>Item 2</button><button>Delete item 2</button></li>
<li><button>Item 3</button><button>Delete item 3</button></li>
</ul>

我非常确定有一个解决方案。播放事件冒泡，传播和默认阻止。

作为替代方案，根据您的具体情况，您可以从键盘导航中完全删除所有删除按钮，并提供另一种删除项目的方法，例如按删除键。如果您的组件是ARIA列表框，并且您已经在项目之间提供了正确的向上/向下或向左/向右箭头键导航，那么这将特别有趣。否则，如果你还没有这样做，那几乎是无用的。

使用Jquery

1 个答案: