键盘导航

本指南重点介绍如何使用目前在 Blockly 中实现的默认键盘导航。

使用键盘导航

为了成功实现键盘导航，用户必须能够完成以下任务：

  • 在工作区中移动
  • 在工作区中连接块
  • 向工作区添加代码块
  • 分离分块
  • 浏览工具箱
  • 浏览浮出式窗格
  • 从弹出式菜单中插入功能块

下面介绍了 Blockly 的默认键盘导航如何完成这些任务。

启用键盘导航

用户可以通过按 Shift + Ctrl + k 来启用和停用键盘导航。 首次启用键盘导航时，工作区中会显示闪烁的红线。这是光标。它会显示用户的当前位置，并会在用户浏览工作区时更新。
当用户按下 Shift+Ctrl+K 时，屏幕上会显示一条闪烁的红线。这是光标。

按 Enter 键会在当前位置创建一条蓝线，表示用户的标记。标记会显示要插入内容块的目标位置。它不会随着您在工作区中移动光标而更新。
当用户按下 Enter 键时，屏幕上会显示一条蓝线。这是标记。

使用默认光标

工作区由输入、字段、连接、块和工作区坐标组成。默认光标会将所有组件划分为不同的层级，以便在工作区中移动。

如需在层级之间导航，请使用 A 和 D 键。如需在某个层级内导航，请使用 W 和 S 键。

工作区级

按 Shift + Ctrl + k 进入键盘导航模式。这会将光标放置在工作区或工作区的第一个代码块上。如果光标位于某个代码块上，请按 A 两次将其移至工作区级别。如需在工作区中移动光标，请使用 Shift + WASD。如需移动到堆栈级别，请使用 D 键。
当用户按下 Shift 键和 W、A、S、D 键时，Blockly 工作区的光标会移动。当用户按下 d 键时，光标会以矩形的形式显示在第一堆积块周围

堆栈级别

在堆栈级别，您可以使用 W 和 S 键在工作区的堆栈之间切换。在此级别，光标由堆栈中所有块周围的红色实心矩形表示。如需前往所选堆栈中的第一个代码块，请使用 D 键。
当用户按下 s 键时，光标会移至下一个堆叠的块。当用户按下 d 键时，光标会显示为选定堆栈中第一个代码块上方的闪烁红线。

屏蔽和连接级别

此级别包含一个分块以及分块上的所有外部连接。如果存在前置或输出连接，默认光标会设置为跳过该块。如果都不存在，光标将移至相应代码块，如下所示。

当用户按下 d 键时，光标会从围绕一堆积木块的红色矩形变为围绕堆叠中第一个积木块的一半矩形。

三种可能的外部连接如下所示。
红线突出显示了三种可能的外部连接。这些是代码块上的上一个连接、下一个连接和输出连接。

在块和连接级别，您可以使用 W 和 S 键浏览外部连接。在此级别，光标由当前连接的闪烁红色轮廓表示。如需前往某个分块中的第一个字段或输入框，请按 D。
当用户按下 S 键时，光标会显示为相应分块的下一个连接处的红色闪烁线条。当用户按下 d 键时，光标会以红色矩形的形式显示在该分块上的第一个字段周围。

字段和输入级别

此级别包含该块上的所有字段和输入。字段和输入的示例如下所示。
红色矩形突出显示了某个版块上的输入和字段示例。
在此级别，您可以使用 W 和 S 浏览当前分块的可编辑字段和输入。对于字段，光标是实心红色矩形。对于输入，光标是一个闪烁的红色拼图块。当光标位于输入上时，按 D 键可移至相连的块。

当用户按下 S 键时，光标会在该块的输入和字段中移动。当用户在包含连接的块的输入中按下 d 键时，光标会显示为连接的块上方的闪烁红线。

将光标置于某个字段上，然后按 Enter 键即可对其进行修改。

光标显示为字段周围的红色矩形。当用户按下 Enter 键时，系统会打开一个下拉菜单。用户按 S 键选择下拉菜单中的值，然后按 Enter 键关闭下拉菜单。

在 Workspace 中连接块

  1. 使用 WASD 键导航到目标连接
  2. 使用 Enter 键标记连接
  3. 使用 WASD 键导航到有效的连接点
  4. 使用 I 键（用于插入）连接两个代码块

输入连接带有蓝点，表示已被标记。当用户在有效连接上点按 i 时，该块会移动到标记的连接点。

在 Workspace 中移动某个屏幕块

通常，在 Blockly 中，您可以通过以下步骤将某个代码块移至工作区：将其拾起，将其拖动到所需位置，然后释放它。使用键盘快捷键，您可以标记目标位置，前往要移动的代码块，然后指示其移动。

  1. 使用 Shift + WASD 键导航到工作区的某个位置
  2. 使用 Enter 键在工作区中标记该位置
  3. 使用 WASD 键找到要移动的块
  4. 使用 I 键将块移动到标记的位置

Blockly 工作区中显示了光标。当用户按下 Enter 键时，系统会标记其位置，并在此位置显示一条蓝线。他们使用 WASD 键将光标移至某个块的外部连接处。当用户点按 i 时，该屏幕块会移动到标记的位置。

分离分块

通常，在 Blockly 中，您可以通过提起下级块并将其从父级块中拖出，来断开两个块的连接。使用键盘快捷键，您可以将光标放在要断开的连接上，然后按 X 来断开块的连接。

  1. 使用 WASD 键导航到要断开的连接
  2. 使用 X 断开连接

屏幕上显示了两个连接在一起的方块，游标位于它们中间。当用户按下 x 键时，这些块会断开连接。

从 Toolbox 中插入代码块

  1. 按 T 键打开工具箱
  2. 使用 W 和 S 键浏览类别
  3. 按 D 键可移至弹出式菜单中的块
  4. 使用 W 和 S 键浏览各个代码块
  5. 按 Enter 键，从弹出式菜单中插入代码块

当用户按下 t 键时，系统会打开一个工具箱，其中显示了不同类别的块。按 s 键可浏览不同的类别。当用户按下 d 键时，该类别中的第一个分块会突出显示。按 Enter 键可将块放置在工作区中并关闭工具箱。

实验

我们认为，用户可能有兴趣在以下四个主要方面进行实验：

  1. 按键映射：哪些按键应映射到哪些操作。
  2. 适用于屏幕阅读器的文本/日志记录/警告：屏幕阅读器应如何读出光标位置以及任何错误或警告。
  3. 工作区导航：用户如何在工作区中导航不同的块、字段、输入和连接。
  4. 光标外观：光标和标记的外观。

如需详细了解如何使用这些 API，请参阅 Blockly 键盘导航代码实验室。

如果您有任何其他想要进行实验的方面，并且我们或许能够提供帮助，请填写此表单。

常见问题解答

问题：为什么您没有使用箭头键进行键盘导航？
答：屏幕阅读器通常使用箭头键。我们不想干扰这一点，因此选择使用 WASD 键。
不过，我们知道每个人的需求都不同，因此强烈建议您创建一种更改按键映射的简便方法。

问题：这看起来很复杂，为什么我们需要不同的层？
答：在考虑键盘导航时，我们需要一种有条理的移动方式，以便在不同的块、连接、字段、输入和工作区坐标之间移动。
在内部，我们使用抽象语法树 (AST) 来表示此内容。默认光标实现与此模型相差无几。这是有意为之，目的是让开发者更好地了解底层架构。还有一些光标可能更容易被最终用户理解。

限制

我们尚不支持导航到非块组件（例如回收站、缩放按钮和弹出式按钮）。如需详细了解限制，请参阅尚未解决的键盘导航bug 列表。