Skip to content

Commit 55f62a0

Browse files
authored
fix: add comma to block labels except on Apple devices (#10279)
* fix: add comma to block labels except on Apple devices * fix: relax tests to pass on non-Apple device
1 parent c0292b1 commit 55f62a0

2 files changed

Lines changed: 11 additions & 8 deletions

File tree

‎packages/blockly/core/block_svg.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import {Rect} from './utils/rect.js';
6767
import {Svg} from './utils/svg.js';
6868
import * as svgMath from './utils/svg_math.js';
6969
import {FlyoutItemInfo} from './utils/toolbox.js';
70+
import * as userAgent from './utils/useragent.js';
7071
import type {Workspace} from './workspace.js';
7172
import type {WorkspaceSvg} from './workspace_svg.js';
7273

@@ -2020,11 +2021,13 @@ export class BlockSvg
20202021
fullBlockField.recomputeAriaContext();
20212022
return;
20222023
}
2023-
aria.setState(
2024-
this.getFocusableElement(),
2025-
aria.State.LABEL,
2026-
this.getAriaLabel(aria.Verbosity.STANDARD),
2027-
);
2024+
let label = this.getAriaLabel(aria.Verbosity.STANDARD);
2025+
// VoiceOver inserts a comma between aria-label and aria-roledescription.
2026+
// Specific screen readers are not detectable, so OS is used as a proxy.
2027+
if (label && !userAgent.APPLE && !label.endsWith(',')) {
2028+
label += ',';
2029+
}
2030+
aria.setState(this.getFocusableElement(), aria.State.LABEL, label);
20282031
configureAriaRole(this);
20292032
}
20302033

‎packages/blockly/tests/mocha/aria_test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -555,7 +555,7 @@ suite('ARIA', function () {
555555
block.getFocusableElement(),
556556
Blockly.utils.aria.State.LABEL,
557557
);
558-
assert.isTrue(label.endsWith('has input'));
558+
assert.isTrue(label.replace(/,$/, '').endsWith('has input'));
559559
});
560560

561561
test('Blocks with multiple inputs are properly labeled', function () {
@@ -564,7 +564,7 @@ suite('ARIA', function () {
564564
block.getFocusableElement(),
565565
Blockly.utils.aria.State.LABEL,
566566
);
567-
assert.isTrue(label.endsWith('has inputs'));
567+
assert.isTrue(label.replace(/,$/, '').endsWith('has inputs'));
568568
});
569569
test('Blocks with multiple statement inputs are properly labeled', function () {
570570
const json = {
@@ -592,7 +592,7 @@ suite('ARIA', function () {
592592
);
593593
assert.isFalse(label.includes('else if, do'));
594594
assert.isFalse(label.includes('else,'));
595-
assert.isTrue(label.endsWith('has 4 branches'));
595+
assert.isTrue(label.replace(/,$/, '').endsWith('has 4 branches'));
596596
});
597597
});
598598

0 commit comments

Comments
 (0)