Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/actions/arrow_navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
* SPDX-License-Identifier: Apache-2.0
*/

import {ShortcutRegistry, utils as BlocklyUtils, Field} from 'blockly/core';
import {
ShortcutRegistry,
utils as BlocklyUtils,
Field,
keyboardNavigationController,
} from 'blockly/core';

import type {Toolbox, WorkspaceSvg} from 'blockly/core';

Expand Down Expand Up @@ -122,6 +127,7 @@ export class ArrowNavigation {
preconditionFn: (workspace) =>
this.navigation.canCurrentlyNavigate(workspace),
callback: (workspace, e, shortcut) => {
keyboardNavigationController.setIsActive(true);
return workspace.RTL
? navigateOut(workspace, e, shortcut)
: navigateIn(workspace, e, shortcut);
Expand All @@ -135,6 +141,7 @@ export class ArrowNavigation {
preconditionFn: (workspace) =>
this.navigation.canCurrentlyNavigate(workspace),
callback: (workspace, e, shortcut) => {
keyboardNavigationController.setIsActive(true);
return workspace.RTL
? navigateIn(workspace, e, shortcut)
: navigateOut(workspace, e, shortcut);
Expand All @@ -148,6 +155,7 @@ export class ArrowNavigation {
preconditionFn: (workspace) =>
this.navigation.canCurrentlyNavigate(workspace),
callback: (workspace, e, shortcut) => {
keyboardNavigationController.setIsActive(true);
const toolbox = workspace.getToolbox() as Toolbox;
const flyout = workspace.getFlyout();
let isHandled = false;
Expand Down Expand Up @@ -205,6 +213,7 @@ export class ArrowNavigation {
preconditionFn: (workspace) =>
this.navigation.canCurrentlyNavigate(workspace),
callback: (workspace, e, shortcut) => {
keyboardNavigationController.setIsActive(true);
const flyout = workspace.getFlyout();
const toolbox = workspace.getToolbox() as Toolbox;
let isHandled = false;
Expand Down
2 changes: 2 additions & 0 deletions src/actions/disconnect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
Events,
ShortcutRegistry,
utils as BlocklyUtils,
Connection,

Check warning on line 12 in src/actions/disconnect.ts

View workflow job for this annotation

GitHub Actions / Eslint check

'Connection' is defined but never used
ConnectionType,

Check warning on line 13 in src/actions/disconnect.ts

View workflow job for this annotation

GitHub Actions / Eslint check

'ConnectionType' is defined but never used
keyboardNavigationController,
} from 'blockly';
import * as Constants from '../constants';
import type {WorkspaceSvg} from 'blockly';
Expand Down Expand Up @@ -56,6 +57,7 @@
preconditionFn: (workspace) =>
this.navigation.canCurrentlyEdit(workspace),
callback: (workspace) => {
keyboardNavigationController.setIsActive(true);
switch (this.navigation.getState(workspace)) {
case Constants.STATE.WORKSPACE:
this.disconnectBlocks(workspace);
Expand Down
8 changes: 7 additions & 1 deletion src/actions/edit.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
* SPDX-License-Identifier: Apache-2.0
*/

import {ContextMenuRegistry, LineCursor, Msg} from 'blockly';
import {
ContextMenuRegistry,
LineCursor,
Msg,
keyboardNavigationController,
} from 'blockly';
import {Navigation} from 'src/navigation';
import {getShortActionShortcut} from '../shortcut_formatting';
import * as Constants from '../constants';
Expand Down Expand Up @@ -67,6 +72,7 @@ export class EditAction {
return cursor.atEndOfLine() ? 'hidden' : 'enabled';
},
callback: (scope: ContextMenuRegistry.Scope) => {
keyboardNavigationController.setIsActive(true);
const workspace = scope.block?.workspace;
if (!workspace) return false;
workspace.getCursor()?.in();
Expand Down
2 changes: 2 additions & 0 deletions src/actions/move.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
ShortcutRegistry,
utils,
WorkspaceSvg,
keyboardNavigationController,
} from 'blockly';
import {Direction} from '../drag_direction';
import {Mover} from './mover';
Expand Down Expand Up @@ -40,6 +41,7 @@ export class MoveActions {
return !!startBlock && this.mover.canMove(workspace, startBlock);
},
callback: (workspace) => {
keyboardNavigationController.setIsActive(true);
const startBlock = this.getCurrentBlock(workspace);
return (
!!startBlock && this.mover.startMove(workspace, startBlock, null)
Expand Down
11 changes: 9 additions & 2 deletions src/actions/ws_movement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
* SPDX-License-Identifier: Apache-2.0
*/

import {ShortcutRegistry, utils as BlocklyUtils} from 'blockly';
import {
ShortcutRegistry,
utils as BlocklyUtils,
keyboardNavigationController,
} from 'blockly';
import * as Constants from '../constants';
import type {WorkspaceSvg} from 'blockly';
import {Navigation} from 'src/navigation';
Expand All @@ -17,7 +21,7 @@
/**
* The distance to move the cursor when the cursor is on the workspace.
*/
const WS_MOVE_DISTANCE = 40;

Check warning on line 24 in src/actions/ws_movement.ts

View workflow job for this annotation

GitHub Actions / Eslint check

'WS_MOVE_DISTANCE' is assigned a value but never used

/**
* Logic for free movement of the cursor on the workspace with keyboard
Expand Down Expand Up @@ -66,7 +70,10 @@
name: Constants.SHORTCUT_NAMES.CREATE_WS_CURSOR,
preconditionFn: (workspace) =>
this.navigation.canCurrentlyEdit(workspace),
callback: (workspace) => this.createWSCursor(workspace),
callback: (workspace) => {
keyboardNavigationController.setIsActive(true);
return this.createWSCursor(workspace);
},
keyCodes: [KeyCodes.W],
},
];
Expand Down
8 changes: 0 additions & 8 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import * as Blockly from 'blockly/core';
import {NavigationController} from './navigation_controller';
import {enableBlocksOnDrag} from './disabled_blocks';
import {InputModeTracker} from './input_mode_tracker';

/** Plugin for keyboard navigation. */
export class KeyboardNavigation {
Expand All @@ -20,11 +19,6 @@ export class KeyboardNavigation {
/** Cursor for the main workspace. */
private cursor: Blockly.LineCursor;

/**
* Input mode tracking.
*/
private inputModeTracker: InputModeTracker;

/**
* Focus ring in the workspace.
*/
Expand Down Expand Up @@ -54,7 +48,6 @@ export class KeyboardNavigation {
this.navigationController.init();
this.navigationController.addWorkspace(workspace);
this.navigationController.enable(workspace);
this.inputModeTracker = new InputModeTracker(workspace);

this.cursor = new Blockly.LineCursor(workspace);

Expand Down Expand Up @@ -124,7 +117,6 @@ export class KeyboardNavigation {
// Remove the event listener that enables blocks on drag
this.workspace.removeChangeListener(enableBlocksOnDrag);
this.navigationController.dispose();
this.inputModeTracker.dispose();
}

/**
Expand Down
48 changes: 0 additions & 48 deletions src/input_mode_tracker.ts

This file was deleted.

2 changes: 2 additions & 0 deletions src/navigation_controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
Toolbox,
utils as BlocklyUtils,
WorkspaceSvg,
keyboardNavigationController,
} from 'blockly/core';

import * as Constants from './constants';
Expand Down Expand Up @@ -198,6 +199,7 @@ export class NavigationController {
preconditionFn: (workspace) =>
!workspace.isDragging() && this.navigation.canCurrentlyEdit(workspace),
callback: (workspace) => {
keyboardNavigationController.setIsActive(true);
switch (this.navigation.getState(workspace)) {
case Constants.STATE.WORKSPACE:
Blockly.getFocusManager().focusTree(
Expand Down
1 change: 1 addition & 0 deletions test/webdriverio/test/basic_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ suite('Keyboard navigation on Blocks', function () {

test('Selected block', async function () {
await tabNavigateToWorkspace(this.browser);
await this.browser.pause(PAUSE_TIME);

await keyDown(this.browser, 14);

Expand Down
153 changes: 153 additions & 0 deletions test/webdriverio/test/keyboard_mode_test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/

import * as chai from 'chai';
import * as Blockly from 'blockly';
import {
focusOnBlock,
testSetup,
testFileLocations,
PAUSE_TIME,
getBlockElementById,
tabNavigateToWorkspace,
} from './test_setup.js';
import {Key} from 'webdriverio';

const isKeyboardNavigating = function (browser: WebdriverIO.Browser) {
return browser.execute(() => {
return document.body.classList.contains('blocklyKeyboardNavigation');
});
};

suite(
'Keyboard navigation mode set on mouse or keyboard interaction',
function () {
// Setting timeout to unlimited as these tests take a longer time to run than most mocha tests
this.timeout(0);

setup(async function () {
// Reload the page between tests
this.browser = await testSetup(testFileLocations.NAVIGATION_TEST_BLOCKS);

await this.browser.pause(PAUSE_TIME);

// Reset the keyboard navigation state between tests.
await this.browser.execute(() => {
Blockly.keyboardNavigationController.setIsActive(false);
});

// Start with the workspace focused.
await tabNavigateToWorkspace(this.browser);
});

test('T to open toolbox enables keyboard mode', async function () {
await this.browser.pause(PAUSE_TIME);
await this.browser.keys('t');
await this.browser.pause(PAUSE_TIME);

chai.assert.isTrue(await isKeyboardNavigating(this.browser));
});

test('M for move mode enables keyboard mode', async function () {
await focusOnBlock(this.browser, 'controls_if_2');
await this.browser.pause(PAUSE_TIME);
await this.browser.keys('m');

chai.assert.isTrue(await isKeyboardNavigating(this.browser));
});

test('W for workspace cursor enables keyboard mode', async function () {
await this.browser.pause(PAUSE_TIME);
await this.browser.keys('w');
await this.browser.pause(PAUSE_TIME);

chai.assert.isTrue(await isKeyboardNavigating(this.browser));
});

test('X to disconnect enables keyboard mode', async function () {
await focusOnBlock(this.browser, 'controls_if_2');
await this.browser.pause(PAUSE_TIME);
await this.browser.keys('x');
await this.browser.pause(PAUSE_TIME);

chai.assert.isTrue(await isKeyboardNavigating(this.browser));
});

test('Copy does not change keyboard mode state', async function () {
// Make sure we're on a copyable block so that copy occurs
await focusOnBlock(this.browser, 'controls_if_2');
await this.browser.pause(PAUSE_TIME);
await this.browser.keys(Key.Ctrl);
await this.browser.keys('c');
await this.browser.keys(Key.Ctrl); // release ctrl key
await this.browser.pause(PAUSE_TIME);

chai.assert.isFalse(await isKeyboardNavigating(this.browser));

this.browser.execute(() => {
Blockly.keyboardNavigationController.setIsActive(true);
});

await this.browser.pause(PAUSE_TIME);
await this.browser.keys(Key.Ctrl);
await this.browser.keys('c');
await this.browser.keys(Key.Ctrl); // release ctrl key
await this.browser.pause(PAUSE_TIME);

chai.assert.isTrue(await isKeyboardNavigating(this.browser));
});

test('Delete does not change keyboard mode state', async function () {
// Make sure we're on a deletable block so that delete occurs
await focusOnBlock(this.browser, 'controls_if_2');
await this.browser.pause(PAUSE_TIME);
await this.browser.keys(Key.Backspace);
await this.browser.pause(PAUSE_TIME);

chai.assert.isFalse(await isKeyboardNavigating(this.browser));

this.browser.execute(() => {
Blockly.keyboardNavigationController.setIsActive(true);
});

// Focus a different deletable block
await focusOnBlock(this.browser, 'controls_if_1');
await this.browser.pause(PAUSE_TIME);
await this.browser.keys(Key.Backspace);
await this.browser.pause(PAUSE_TIME);

chai.assert.isTrue(await isKeyboardNavigating(this.browser));
});

test('Right clicking a block disables keyboard mode', async function () {
await this.browser.execute(() => {
Blockly.keyboardNavigationController.setIsActive(true);
});

await this.browser.pause(PAUSE_TIME);
// Right click a block
const element = await getBlockElementById(this.browser, 'controls_if_1');
await element.click({button: 'right'});
await this.browser.pause(PAUSE_TIME);

chai.assert.isFalse(await isKeyboardNavigating(this.browser));
});

test('Dragging a block with mouse disables keyboard mode', async function () {
await this.browser.execute(() => {
Blockly.keyboardNavigationController.setIsActive(true);
});

await this.browser.pause(PAUSE_TIME);
// Drag a block
const element = await getBlockElementById(this.browser, 'controls_if_1');
await element.dragAndDrop({x: 10, y: 10});
await this.browser.pause(PAUSE_TIME);

chai.assert.isFalse(await isKeyboardNavigating(this.browser));
});
},
);
Loading