@ blockly/ 键盘导航

Blockly 的这个插件允许键盘导航 。 它包括 可能对视力障碍和运动有帮助的不同行为 受伤的人在Blockly的工作空间航行.

键盘导航和屏幕阅读器支持紧密结合. 布莱克利 团队打算在2025年Q3中逐步增加屏幕阅读器支持, 我们验证了导航的一般方法.

有关规划和时间表的更多信息,请参见我们 无障碍网站。 。 。 .

最终用户指示

您可以探索当前插件在 测试页面。 。 。 .

要使用键盘导航, 请点击工作空间或按下标签直到您 到达工作空间.

一旦浏览器聚焦于 Blockly 工作空间, 您可以使用箭头键到 移动 a 光标 在工作空间周围 您可以使用键盘快捷键 在光标上采取行动.

例如,您可以将光标移动到 下拉字段并按下 Enter 键来编辑字段.

可用的动作取决于光标位置 。 例如,如果 光标在一块块上,您可以复制它 Ctrl + C。 。 。 .

您可以按下打开工具箱 T 或按键 Tab 直到工具箱打开 重点突出。 就像工作空间一样,你可以使用箭头键来移动 工具箱并选择一个块。 按键 Enter 将块放在 光标在工作空间的位置 .

如果你不知道有什么动作,你 可按键 / 以查看行动列表.

提供反馈

如果您使用测试页找到一个错误, 请打开一个问题让我们知道 放在这个仓库里! 包含如何复制错误的信息, 什么 坏的行为, 和你期望它做什么。 Blockly队会的 区分错误并添加到行进图中.

在您的应用程序中使用

安装

使用此插件至少需要使用 Blockly v12.2.0. 你可以找到那个 当前 Blockly 的最低版本 peerDependencies 页:1 package.json 用于插件的文件.

雅伦

yarn add @blockly/keyboard-navigation

无

npm install @blockly/keyboard-navigation --save

使用量

import * as Blockly from 'blockly';
import {KeyboardNavigation} from '@blockly/keyboard-navigation';

// Register styles. Only do this once per page-load.
// Must be done before calling Blockly.inject.
KeyboardNavigation.registerKeyboardNavigationStyles();

// Register the default toolbox. Only do this once per page-load.
// Must be done before calling Blockly.inject.
// See instructions below if you don't use the default toolbox.
KeyboardNavigation.registerNavigationDeferringToolbox();

// Inject Blockly.
const workspace = Blockly.inject('blocklyDiv', {
  toolbox: toolboxCategories,
});
// Initialize plugin.
const keyboardNav = new KeyboardNavigation(workspace);

在页面上添加快捷键

要看到键盘在用户按出 / 时帮助弹出, 您需要在主机页面中添加一个带有 Blockly diiv 元素并带有 id "shortcuts" 的空 div 元素. 插件将注意布局和格式化.

...
<div id="shortcuts"></div>
...
<div id="blockly"></div>
...

使用自定义工具箱

如果你提供自己的子类 Toolbox,您需要覆盖 onKeyDown_ 方法使它成为一个不开放。 基础类有自己的键盘导航内置,需要禁用.

class YourCustomToolbox extends Blockly.Toolbox {
  protected override onKeyDown_(e: KeyboardEvent) {
    // No-op, prevent keyboard handling by superclass in order to defer to
    // global keyboard navigation.
  }
}

使用跨标签复制插件

此插件增加了用于复制和粘贴的上下文菜单项 。 它还增加了反馈,将复制和粘贴作为土司,在成功复制或剪接时向用户显示. 它与 @blockly/plugin-cross-tab-copy-paste 通过以下步骤:

import * as Blockly from 'blockly';
import {KeyboardNavigation} from '@blockly/keyboard-navigation';
import {CrossTabCopyPaste} from '@blockly/plugin-cross-tab-copy-paste';

// Register styles. Only do this once per page-load.
// Must be done before calling Blockly.inject.
KeyboardNavigation.registerKeyboardNavigationStyles();

// Inject Blockly.
const workspace = Blockly.inject('blocklyDiv', {
  toolbox: toolboxCategories,
});

// Initialize cross-tab-copy-paste
// Must be done before keyboard-navigation
const crossTabOptions = {
  // Don't use the context menu options from the ctcp plugin,
  // because the keyboard-navigation plugin provides its own.
  contextMenu: false,
  shortcut: true,
};
const plugin = new CrossTabCopyPaste();
plugin.init(crossTabOptions, () => {
  console.log('Use this error callback to handle TypeError while pasting');
});

// Initialize keyboard-navigation.
// You must pass the `allowCrossWorkspacePaste` option in order for paste
// to appear correctly enabled/disabled in the context menu.
const keyboardNav = new KeyboardNavigation(workspace, {
  allowCrossWorkspacePaste: true,
});

捐款

为了了解更多对该项目的贡献,请参见: 贡献页。 。 。 .