feat: add block role description to verbose block labels (#9960)

This commit is contained in:
Michael Harvey
2026-06-10 14:28:21 -04:00
committed by GitHub
parent bb8b7a9bbc
commit 000aafd5ec
2 changed files with 26 additions and 19 deletions
+20 -7
View File
@@ -46,6 +46,7 @@ import type {
IVariableModel,
IVariableState,
} from './interfaces/i_variable_model.js';
import {Msg} from './msg.js';
import * as registry from './registry.js';
import * as Tooltip from './tooltip.js';
import * as arrayUtils from './utils/array.js';
@@ -1567,15 +1568,27 @@ export class Block {
}
/**
* @returns The custom string to use as the role description for this block,
* or undefined if no custom description is set.
* @returns The string to use as the role description for this block. If a
* custom provider has been set, use that. Otherwise, return a default
* description based on the block's properties.
*/
getAriaRoleDescription(): string | undefined {
if (!this.ariaRoleDescriptionProvider) return undefined;
if (typeof this.ariaRoleDescriptionProvider === 'function') {
return this.ariaRoleDescriptionProvider();
getAriaRoleDescription(): string {
if (this.ariaRoleDescriptionProvider) {
if (typeof this.ariaRoleDescriptionProvider === 'function') {
return this.ariaRoleDescriptionProvider();
}
return replaceMessageReferences(this.ariaRoleDescriptionProvider);
}
return replaceMessageReferences(this.ariaRoleDescriptionProvider);
let roleDescription: string;
if (this.statementInputCount) {
roleDescription = Msg['BLOCK_LABEL_CONTAINER'];
} else if (this.outputConnection) {
roleDescription = Msg['BLOCK_LABEL_VALUE'];
} else {
roleDescription = Msg['BLOCK_LABEL_STATEMENT'];
}
return roleDescription;
}
/**
+6 -12
View File
@@ -79,6 +79,7 @@ export function computeAriaLabel(
verbosity >= Verbosity.STANDARD && getCollapsedLabel(block),
verbosity >= Verbosity.LOQUACIOUS && getShadowBlockLabel(block),
verbosity >= Verbosity.STANDARD && getInputCountLabel(block),
verbosity >= Verbosity.LOQUACIOUS && block.getAriaRoleDescription(),
]
.filter((label) => !!label)
.join(', ');
@@ -100,18 +101,11 @@ export function configureAriaRole(block: BlockSvg) {
setRole(focusableElement, Role.FIGURE);
}
let roleDescription;
const customDescription = block.getAriaRoleDescription();
if (customDescription) {
roleDescription = customDescription;
} else if (block.statementInputCount) {
roleDescription = Msg['BLOCK_LABEL_CONTAINER'];
} else if (block.outputConnection) {
roleDescription = Msg['BLOCK_LABEL_VALUE'];
} else {
roleDescription = Msg['BLOCK_LABEL_STATEMENT'];
}
setState(focusableElement, State.ROLEDESCRIPTION, roleDescription);
setState(
focusableElement,
State.ROLEDESCRIPTION,
block.getAriaRoleDescription(),
);
}
/**