|
4 | 4 | * SPDX-License-Identifier: Apache-2.0 |
5 | 5 | */ |
6 | 6 |
|
| 7 | +import {getInputLabelsSubset} from '../../build/src/core/block_aria_composer.js'; |
7 | 8 | import {assert} from '../../node_modules/chai/index.js'; |
8 | 9 | import { |
9 | 10 | sharedTestSetup, |
@@ -521,4 +522,114 @@ suite('ARIA', function () { |
521 | 522 | assert.isTrue(label.endsWith('has inputs')); |
522 | 523 | }); |
523 | 524 | }); |
| 525 | + |
| 526 | + suite('Rendered connection highlight ARIA', function () { |
| 527 | + function assertHighlightAria( |
| 528 | + connection, |
| 529 | + expectedRoleDescription, |
| 530 | + labelSubstring, |
| 531 | + ...moreLabelSubstrings |
| 532 | + ) { |
| 533 | + const labelSubstrings = [labelSubstring, ...moreLabelSubstrings].flat(); |
| 534 | + connection.highlight(); |
| 535 | + try { |
| 536 | + const el = connection.getFocusableElement(); |
| 537 | + assert.equal( |
| 538 | + Blockly.utils.aria.getRole(el), |
| 539 | + Blockly.utils.aria.Role.FIGURE, |
| 540 | + ); |
| 541 | + assert.equal( |
| 542 | + Blockly.utils.aria.getState( |
| 543 | + el, |
| 544 | + Blockly.utils.aria.State.ROLEDESCRIPTION, |
| 545 | + ), |
| 546 | + expectedRoleDescription, |
| 547 | + ); |
| 548 | + const label = Blockly.utils.aria.getState( |
| 549 | + el, |
| 550 | + Blockly.utils.aria.State.LABEL, |
| 551 | + ); |
| 552 | + for (const fragment of labelSubstrings) { |
| 553 | + assert.include(label, fragment); |
| 554 | + } |
| 555 | + } finally { |
| 556 | + connection.unhighlight(); |
| 557 | + } |
| 558 | + } |
| 559 | + |
| 560 | + setup(function () { |
| 561 | + this.renderBlock = (blockType) => { |
| 562 | + const block = this.workspace.newBlock(blockType); |
| 563 | + block.initSvg(); |
| 564 | + block.render(); |
| 565 | + return block; |
| 566 | + }; |
| 567 | + }); |
| 568 | + |
| 569 | + test('value input connection uses value role description and computed label', function () { |
| 570 | + const negate = this.renderBlock('logic_negate'); |
| 571 | + const boolInput = negate.getInput('BOOL'); |
| 572 | + assertHighlightAria( |
| 573 | + boolInput.connection, |
| 574 | + Blockly.Msg.INPUT_LABEL_VALUE, |
| 575 | + 'not', |
| 576 | + ); |
| 577 | + }); |
| 578 | + |
| 579 | + test('empty statement input connection uses statement role description and end label', function () { |
| 580 | + const repeat = this.renderBlock('controls_repeat_ext'); |
| 581 | + const doInput = repeat.getInput('DO'); |
| 582 | + assertHighlightAria( |
| 583 | + doInput.connection, |
| 584 | + Blockly.Msg.INPUT_LABEL_STATEMENT, |
| 585 | + ['End', ...getInputLabelsSubset(repeat, doInput)], |
| 586 | + ); |
| 587 | + }); |
| 588 | + |
| 589 | + test('last next connection in a populated statement stack uses statement role description and end label', function () { |
| 590 | + const repeat = this.renderBlock('controls_repeat_ext'); |
| 591 | + const printBlock = this.renderBlock('text_print'); |
| 592 | + const doInput = repeat.getInput('DO'); |
| 593 | + doInput.connection.connect(printBlock.previousConnection); |
| 594 | + |
| 595 | + assertHighlightAria( |
| 596 | + printBlock.nextConnection, |
| 597 | + Blockly.Msg.INPUT_LABEL_STATEMENT, |
| 598 | + ['End', ...getInputLabelsSubset(repeat, doInput)], |
| 599 | + ); |
| 600 | + }); |
| 601 | + |
| 602 | + test('value input connection with custom input label uses custom label', function () { |
| 603 | + const negate = this.renderBlock('logic_negate'); |
| 604 | + negate.getInput('BOOL').setAriaLabelProvider('custom value input'); |
| 605 | + assertHighlightAria( |
| 606 | + negate.getInput('BOOL').connection, |
| 607 | + Blockly.Msg.INPUT_LABEL_VALUE, |
| 608 | + 'custom value input', |
| 609 | + ); |
| 610 | + }); |
| 611 | + |
| 612 | + test('empty statement input connection with custom input label uses end-of-statement label', function () { |
| 613 | + const repeat = this.renderBlock('controls_repeat_ext'); |
| 614 | + repeat.getInput('DO').setAriaLabelProvider('custom repeat body'); |
| 615 | + assertHighlightAria( |
| 616 | + repeat.getInput('DO').connection, |
| 617 | + Blockly.Msg.INPUT_LABEL_STATEMENT, |
| 618 | + ['End', 'custom repeat body'], |
| 619 | + ); |
| 620 | + }); |
| 621 | + |
| 622 | + test('last next connection in a populated statement stack respects custom statement input label', function () { |
| 623 | + const repeat = this.renderBlock('controls_repeat_ext'); |
| 624 | + repeat.getInput('DO').setAriaLabelProvider('custom repeat body'); |
| 625 | + const printBlock = this.renderBlock('text_print'); |
| 626 | + repeat.getInput('DO').connection.connect(printBlock.previousConnection); |
| 627 | + |
| 628 | + assertHighlightAria( |
| 629 | + printBlock.nextConnection, |
| 630 | + Blockly.Msg.INPUT_LABEL_STATEMENT, |
| 631 | + ['End', 'custom repeat body'], |
| 632 | + ); |
| 633 | + }); |
| 634 | + }); |
524 | 635 | }); |
0 commit comments