interact.js拖动中的键盘支持

Question

我把interact.js设置为-

interact('.draggable')
            .draggable({
                onstart: (event: Interact.InteractEvent) => onstartRef.current(event),
                onmove: (event: Interact.InteractEvent) => onmoveRef.current(event),
                onend: (event: Interact.InteractEvent) => onendRef.current(event)
            })

我试图添加对a11y的支持，用interact.js拖动键盘，但在文档中找不到它的任何内容。如何将"dragStart“、"dragMove”和"dragEnd“事件与键盘事件绑定。

我可以找到一个github问题，但是否有更多的信息- https://github.com/taye/interact.js/issues/275。

我开始听键盘箭头-左，右，上，下，并愿意开始"onStart"，"onEnd“和"onMove”。

switch (event.key) {
        case 'ArrowLeft':

Answer 1

很可能拖拽对应用程序来说并不重要，而且其他交互，比如上下文菜单，也可以达到同样的目的。

不要试图强迫它并复制完全相同的交互，只使用键盘。使用箭头键在屏幕上引导元素一开始可能很好玩，但在完成任务时却很麻烦。

此外，视力有障碍的用户仍然无法使用它。

WCAG2.2明确要求一个指针交互

成功标准2.5.7拖动运动(级别AA)：所有使用拖动运动操作的功能都可以通过一个指针实现，而不需要拖动，除非拖动是必不可少的，或者功能由用户代理决定，而不是由作者修改。

当前唯一的满足这个标准的足够技巧是列举了一些例子。

示例1

• 可以通过捡起一个项目并将其向上或向下拖动来重新排序项目列表。其他元素动态地移动以打开一个空隙，从而可以丢弃拾取的目标。单指针激活后，列表项显示向上和向下箭头，允许通过单个指针输入(按一下或单击向上或向下箭头)逐步重新排序列表。
• 垂直优先级列表表示列出的项目的优先级。每个项目都可以用指针“拾取”，并向上或向下拖到另一个位置。其他列表项动态重新排列。在每个列表项的左侧，文本字段中的数字显示当前优先级位置。对于任何一个项目，用户可以输入另一个数字。这将导致对优先级列表进行动态重新排序和重命名。
• 在用于过程管理的看板实现中，可以将任务水平地从一个‘泳道’拖到另一个‘泳道’，以便更改任务的状态(例如，将任务的状态从“过程中”更改为“已完成”)。一条车道上的一个或多个项目可以通过一个点击或点击来选择。一个单一的指针激活一个下拉菜单标签为“移动选定的项目”提供一个选择的下降目标(其他车道)。在所需菜单项上进一步激活单个指针可将目标移动到指定的车道上。
• 在径向控制小部件中，可以将控件当前值的可视指示器拖到不同的位置。用户还可以单击或点击径向控件的另一个位置来更改值。

在windows中，您可以将项目拖到垃圾图标上，也可以右击它并选择“Delete”。上下文菜单是键盘可访问的。

​

​