mirror of
https://github.com/google/blockly.git
synced 2026-01-08 17:40:09 +01:00
5bc83808bf
## The basics - [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change) ## The details ### Resolves Fixes #8918 Fixes #8919 Fixes part of #8771 ### Proposed Changes This updates several classes in order to make toolboxes and flyouts focusable: - `IFlyout` is now an `IFocusableTree` with corresponding implementations in `FlyoutBase`. - `IToolbox` is now an `IFocusableTree` with corresponding implementations in `Toolbox`. - `IToolboxItem` is now an `IFocusableNode` with corresponding implementations in `ToolboxItem`. - As the primary toolbox items, `ToolboxCategory` and `ToolboxSeparator` were updated to have -1 tab indexes and defined IDs to help `ToolboxItem` fulfill its contracted for `IFocusableNode.getFocusableElement`. Each of these two new focusable trees have specific noteworthy behaviors behaviors: - `Toolbox` will automatically indicate that its first item should be focused (if one is present), even overriding the ability to focus the toolbox's root (however there are some cases where that can still happen). - `Toolbox` will automatically synchronize its selection state with its item nodes being focused. - `FlyoutBase`, now being a focusable tree, has had a tab index of 0 added. Normally a tab index of -1 is all that's needed, but the keyboard navigation plugin specifically uses 0 for flyout so that the flyout is tabbable. This is a **new** tab stop being introduced. - `FlyoutBase` holds a workspace (for rendering blocks) and, since `WorkspaceSvg` is already set up to be a focusable tree, it's represented as a subtree to `FlyoutBase`. This does introduce some wonky behaviors: the flyout's root will have passive focus while its contents have active focus. This could be manually disabled with some CSS if it ends up being a confusing user experience. - Both `FlyoutBase` and `WorkspaceSvg` have built-in behaviors for detecting when a user tries navigating away from an open flyout to ensure that the flyout is closed when it's supposed to be. That is, the flyout is auto-hideable and a non-flyout, non-toolbox node has then been focused. This matches parity with the `T`/`Esc` flows supported in the keyboard navigation plugin playground. One other thing to note: `Toolbox` had a few tests to update that were trying to reinit a toolbox without first disposing of it (which was caught by one of `FocusManager`'s state guardrails). ### Reason for Changes This is part of an ongoing effort to ensure key components of Blockly are focusable so that they can be keyboard-navigable (with other needed changes yet both in Core Blockly and the keyboard navigation plugin). ### Test Coverage No new tests have been added. It's certainly possible to add unit tests for the focusable configurations being introduced in this PR, but it may not be highly beneficial. It's largely assumed that the individual implementations should work due to a highly tested FocusManager, and it may be the case that the interactions of the components working together is far more important to verify (that is, the end user flows). The latter is planned to be tackled as part of #8915. ### Documentation No documentation changes should be needed here. ### Additional Information This includes changes that have been pulled from #8875.
107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2020 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* A separator used for separating toolbox categories.
|
|
*
|
|
* @class
|
|
*/
|
|
// Former goog.module ID: Blockly.ToolboxSeparator
|
|
|
|
import * as Css from '../css.js';
|
|
import type {IToolbox} from '../interfaces/i_toolbox.js';
|
|
import * as registry from '../registry.js';
|
|
import * as dom from '../utils/dom.js';
|
|
import type * as toolbox from '../utils/toolbox.js';
|
|
import {ToolboxItem} from './toolbox_item.js';
|
|
|
|
/**
|
|
* Class for a toolbox separator. This is the thin visual line that appears on
|
|
* the toolbox. This item is not interactable.
|
|
*/
|
|
export class ToolboxSeparator extends ToolboxItem {
|
|
/** Name used for registering a toolbox separator. */
|
|
static registrationName = 'sep';
|
|
|
|
/** All the CSS class names that are used to create a separator. */
|
|
protected cssConfig_: CssConfig = {'container': 'blocklyTreeSeparator'};
|
|
|
|
private htmlDiv: HTMLDivElement | null = null;
|
|
|
|
/**
|
|
* @param separatorDef The information needed to create a separator.
|
|
* @param toolbox The parent toolbox for the separator.
|
|
*/
|
|
constructor(separatorDef: toolbox.SeparatorInfo, toolbox: IToolbox) {
|
|
super(separatorDef, toolbox);
|
|
|
|
const cssConfig =
|
|
separatorDef['cssconfig'] || (separatorDef as any)['cssConfig'];
|
|
Object.assign(this.cssConfig_, cssConfig);
|
|
}
|
|
|
|
override init() {
|
|
this.createDom_();
|
|
}
|
|
|
|
/**
|
|
* Creates the DOM for a separator.
|
|
*
|
|
* @returns The parent element for the separator.
|
|
*/
|
|
protected createDom_(): HTMLDivElement {
|
|
const container = document.createElement('div');
|
|
container.tabIndex = -1;
|
|
container.id = this.getId();
|
|
const className = this.cssConfig_['container'];
|
|
if (className) {
|
|
dom.addClass(container, className);
|
|
}
|
|
this.htmlDiv = container;
|
|
return container;
|
|
}
|
|
|
|
override getDiv() {
|
|
return this.htmlDiv as HTMLDivElement;
|
|
}
|
|
|
|
override dispose() {
|
|
dom.removeNode(this.htmlDiv as HTMLDivElement);
|
|
}
|
|
}
|
|
|
|
export namespace ToolboxSeparator {
|
|
export interface CssConfig {
|
|
container: string | undefined;
|
|
}
|
|
}
|
|
|
|
export type CssConfig = ToolboxSeparator.CssConfig;
|
|
|
|
/** CSS for Toolbox. See css.js for use. */
|
|
Css.register(`
|
|
.blocklyTreeSeparator {
|
|
border-bottom: solid #e5e5e5 1px;
|
|
height: 0;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.blocklyToolbox[layout="h"] .blocklyTreeSeparator {
|
|
border-right: solid #e5e5e5 1px;
|
|
border-bottom: none;
|
|
height: auto;
|
|
margin: 0 5px 0 5px;
|
|
padding: 5px 0;
|
|
width: 0;
|
|
}
|
|
`);
|
|
|
|
registry.register(
|
|
registry.Type.TOOLBOX_ITEM,
|
|
ToolboxSeparator.registrationName,
|
|
ToolboxSeparator,
|
|
);
|