键盘导航

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

使用键盘导航

为确保键盘导航操作顺利进行，用户必须能够完成以下任务：

  • 在工作区中移动
  • 在工作区中连接方块
  • 向工作区添加块
  • 分离块
  • 浏览工具箱
  • 浏览浮出控件
  • 从浮出控件中插入方块

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

启用键盘导航

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

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

使用默认光标

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

若要在不同层级之间导航，请使用 A 和 D 键。如需在某个层级中导航，请使用 W 和 S 键。

工作区级别

按 Shift + Ctrl + k 进入键盘导航模式。这会将光标放在工作区或工作区的第一个块上。如果光标位于块上，请按 A 两次，将其移至工作区级别。如需在工作区中移动光标，请使用 Shift + WASD 键。如需移至堆栈级别，请使用 D 键。
当用户同时按 Shift 和 W A S D 键时，块状工作区上的光标会移动。当用户点击 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 键连接两个块（用于插入）

输入连接有一个蓝色的点，表示该连接已标记。当用户点击有效连接时，该块会移至标记的连接点。

在工作区中移动块

通常，在 Blockly 中，您可以通过以下方式将块移动到工作区：选择一个块，将其拖动到所需位置，然后释放它。您可以使用键盘快捷键标记目标位置，找到要移动的代码块，然后指示其移动。

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

块式工作区上会显示一个光标。用户点击 Enter 键后，系统会标记自己的位置，并且此位置会显示一条蓝线。他们使用 WASD 键将光标移至某个方块的外部连接处。当用户点击 i 时，该代码块就会移到标记的位置。

分离块

通常，在 Blockly 中，您可以拿起下级代码块并将其拖离父代码块，从而断开两个代码块之间的连接。使用键盘快捷键，您可以将光标移到要断开的连接上，按 X 来断开连接。

  1. 使用 WASD 键前往您要断开的连接
  2. 断开与 X 的连接

屏幕上连接着两个块，中间显示光标。当用户点击 x 键时，代码块会断开连接。

从工具箱插入代码块

  1. 按 T 键打开工具箱
  2. 使用 W 和 S 键可浏览各个类别
  3. 按 D 键，即可移至浮出控件中的区块。
  4. 使用 W 和 S 键可浏览各个块
  5. 按 Enter 键可从弹出的窗口中插入块

当用户按 T 时，系统会打开一个工具箱，显示不同类别的组成要素。按 s 可切换不同类别。如果用户点击 d，相应类别中的第一个街区会突出显示。按 Enter 键可将砌块置于工作区中，并关闭工具箱。

实验

我们认为，人们可能有兴趣尝试以下四个主要领域：

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

如需详细了解如何使用这些 API，请参阅块式键盘导航 Codelab。

如果您想要在任何其他方面进行实验，并且我们可以提供帮助，请填写表单。

常见问题解答

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

问：这似乎很复杂，为什么我们需要不同的层？
答：在考虑使用键盘导航时，我们需要一种结构化方式，以便在不同的块、连接、字段、输入源和工作区坐标之间移动。
在内部，我们使用抽象语法树 (AST) 来表示这种内容。默认光标实现并不会偏离此模型。这是为了让开发者更好地了解底层架构。还有其他cursors，最终用户可能更容易理解。

限制

我们尚不支持导航到非阻塞组件（例如垃圾桶、缩放按钮和浮出按钮）。如需详细了解相关限制，请参阅未解决的键盘导航 bugs 列表。