mirror of
https://github.com/google/blockly.git
synced 2026-01-31 04:30:11 +01:00
056aaf32d0
## The basics - [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change) ## The details ### Resolves Fixes #9078 Fixes part of #8915 (new tests) ### Proposed Changes Exposes the ability to disable ephemeral focus management for drop-down divs that are shown using `showPositionedByBlock` or `showPositionedByField`. Previously, this was only supported via `show`, but the former methods are also used externally. This allows the underlying issue reported by #9078 to be fixed downstream for cases when both the widget and drop-down divs are opened simultaneously. This PR also introduces tab indexes for both widget and drop-down divs (which were noticed missing when adding tests). This is because, currently, taking ephemeral focus on for a node that doesn't have a tab index will do nothing. This fix is useful for future screen reader work, and doesn't have obvious impacts on existing core or keyboard navigation behaviors (per testing and reasoning). ### Reason for Changes Exposing the ability to disable ephemeral focus management for all public API entrypoints for showing the divs is crucial for providing the maximum flexibility when downstream apps use both the widget and drop-down divs together. This should ensure that all of these cases can be correctly managed in the same way as https://github.com/google/blockly-samples/pull/2521. ### Test Coverage This introduces a bunch of new tests that were missing originally for both widget and drop-down div (including specifically verifying ephemeral focus). As part of the drop-down div tests, it also introduces actual positioning logic. This isn't great, but it's somewhat reasonable and robust against page changes (since the actual mocha results can move where the elements will end up on the page). These changes have also been manually tested with both the core simple playground and the keyboard experiment plugin's test environment with no noticed regressions in either. The plugin's tests have also been run against these changes to ensure no new breakages have been introduced. ### Documentation No documentation changes beyond the code ones introduced in this PR should be needed. ### Additional Information The new tests may actually act as a basis for avoiding the test backdoor that's used today for the positioning tests for drop-down div tests. This doesn't replace those existing tests nor does it cover other behaviors and entrypoints that would be worth testing, but testing ephemeral focus is a nice improvement (especially in the context of what this PR is fixing).
426 lines
16 KiB
JavaScript
426 lines
16 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2019 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {Rect} from '../../build/src/core/utils/rect.js';
|
|
import * as style from '../../build/src/core/utils/style.js';
|
|
import {assert} from '../../node_modules/chai/chai.js';
|
|
import {
|
|
sharedTestSetup,
|
|
sharedTestTeardown,
|
|
} from './test_helpers/setup_teardown.js';
|
|
|
|
suite('DropDownDiv', function () {
|
|
setup(function () {
|
|
sharedTestSetup.call(this);
|
|
this.workspace = Blockly.inject('blocklyDiv');
|
|
this.setUpBlockWithField = function () {
|
|
const blockJson = {
|
|
'type': 'text',
|
|
'id': 'block_id',
|
|
'x': 10,
|
|
'y': 20,
|
|
'fields': {
|
|
'TEXT': '',
|
|
},
|
|
};
|
|
Blockly.serialization.blocks.append(blockJson, this.workspace);
|
|
return this.workspace.getBlockById('block_id');
|
|
};
|
|
// The workspace needs to be visible for focus-specific tests.
|
|
document.getElementById('blocklyDiv').style.visibility = 'visible';
|
|
});
|
|
teardown(function () {
|
|
sharedTestTeardown.call(this);
|
|
document.getElementById('blocklyDiv').style.visibility = 'hidden';
|
|
});
|
|
|
|
suite('Positioning', function () {
|
|
setup(function () {
|
|
this.boundsStub = sinon
|
|
.stub(Blockly.DropDownDiv.TEST_ONLY, 'getBoundsInfo')
|
|
.returns({
|
|
left: 0,
|
|
right: 100,
|
|
top: 0,
|
|
bottom: 100,
|
|
width: 100,
|
|
height: 100,
|
|
});
|
|
this.sizeStub = sinon
|
|
.stub(Blockly.utils.style.TEST_ONLY, 'getSizeInternal')
|
|
.returns({
|
|
width: 60,
|
|
height: 60,
|
|
});
|
|
this.clientHeightStub = sinon
|
|
.stub(document.documentElement, 'clientHeight')
|
|
.get(function () {
|
|
return 1000;
|
|
});
|
|
this.clientTopStub = sinon
|
|
.stub(document.documentElement, 'clientTop')
|
|
.get(function () {
|
|
return 0;
|
|
});
|
|
});
|
|
test('Below, in Bounds', function () {
|
|
const metrics = Blockly.DropDownDiv.TEST_ONLY.getPositionMetrics(
|
|
50,
|
|
0,
|
|
50,
|
|
-10,
|
|
);
|
|
// "Above" in value actually means below in render.
|
|
assert.isAtLeast(metrics.initialY, 0);
|
|
assert.isAbove(metrics.finalY, 0);
|
|
assert.isTrue(metrics.arrowVisible);
|
|
assert.isTrue(metrics.arrowAtTop);
|
|
});
|
|
test('Above, in Bounds', function () {
|
|
const metrics = Blockly.DropDownDiv.TEST_ONLY.getPositionMetrics(
|
|
50,
|
|
100,
|
|
50,
|
|
90,
|
|
);
|
|
// "Below" in value actually means above in render.
|
|
assert.isAtMost(metrics.initialY, 100);
|
|
assert.isBelow(metrics.finalY, 100);
|
|
assert.isTrue(metrics.arrowVisible);
|
|
assert.isFalse(metrics.arrowAtTop);
|
|
});
|
|
test('Below, out of Bounds', function () {
|
|
const metrics = Blockly.DropDownDiv.TEST_ONLY.getPositionMetrics(
|
|
50,
|
|
60,
|
|
50,
|
|
50,
|
|
);
|
|
// "Above" in value actually means below in render.
|
|
assert.isAtLeast(metrics.initialY, 60);
|
|
assert.isAbove(metrics.finalY, 60);
|
|
assert.isTrue(metrics.arrowVisible);
|
|
assert.isTrue(metrics.arrowAtTop);
|
|
});
|
|
test('Above, in Bounds', function () {
|
|
const metrics = Blockly.DropDownDiv.TEST_ONLY.getPositionMetrics(
|
|
50,
|
|
100,
|
|
50,
|
|
90,
|
|
);
|
|
// "Below" in value actually means above in render.
|
|
assert.isAtMost(metrics.initialY, 100);
|
|
assert.isBelow(metrics.finalY, 100);
|
|
assert.isTrue(metrics.arrowVisible);
|
|
assert.isFalse(metrics.arrowAtTop);
|
|
});
|
|
test('No Solution, Render At Top', function () {
|
|
this.clientHeightStub.get(function () {
|
|
return 100;
|
|
});
|
|
const metrics = Blockly.DropDownDiv.TEST_ONLY.getPositionMetrics(
|
|
50,
|
|
60,
|
|
50,
|
|
50,
|
|
);
|
|
// "Above" in value actually means below in render.
|
|
assert.equal(metrics.initialY, 0);
|
|
assert.equal(metrics.finalY, 0);
|
|
assert.isFalse(metrics.arrowVisible);
|
|
assert.isNotOk(metrics.arrowAtTop);
|
|
});
|
|
});
|
|
|
|
suite('show()', function () {
|
|
test('without bounds set throws error', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
|
|
const errorMsgRegex = /Cannot read properties of null.+?/;
|
|
assert.throws(
|
|
() => Blockly.DropDownDiv.show(field, false, 50, 60, 70, 80, false),
|
|
errorMsgRegex,
|
|
);
|
|
});
|
|
|
|
test('with bounds set positions and shows div near specified location', function () {
|
|
Blockly.DropDownDiv.setBoundsElement(document.body);
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
|
|
Blockly.DropDownDiv.show(field, false, 50, 60, 70, 80, false);
|
|
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
assert.strictEqual(dropDownDivElem.style.opacity, '1');
|
|
assert.strictEqual(dropDownDivElem.style.left, '45px');
|
|
assert.strictEqual(dropDownDivElem.style.top, '60px');
|
|
});
|
|
});
|
|
|
|
suite('showPositionedByField()', function () {
|
|
test('shows div near field', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
const fieldBounds = field.getScaledBBox();
|
|
|
|
Blockly.DropDownDiv.showPositionedByField(field);
|
|
|
|
// The div should show below the field and centered horizontally.
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
const divWidth = style.getSize(dropDownDivElem).width;
|
|
const expectedLeft = Math.floor(
|
|
fieldBounds.left + fieldBounds.getWidth() / 2 - divWidth / 2,
|
|
);
|
|
const expectedTop = Math.floor(fieldBounds.bottom); // Should show beneath.
|
|
assert.strictEqual(dropDownDivElem.style.opacity, '1');
|
|
assert.strictEqual(dropDownDivElem.style.left, `${expectedLeft}px`);
|
|
assert.strictEqual(dropDownDivElem.style.top, `${expectedTop}px`);
|
|
});
|
|
|
|
test('with hide callback does not call callback', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
const onHideCallback = sinon.stub();
|
|
|
|
Blockly.DropDownDiv.showPositionedByField(field, onHideCallback);
|
|
|
|
// Simply showing the div should never call the hide callback.
|
|
assert.strictEqual(onHideCallback.callCount, 0);
|
|
});
|
|
|
|
test('without managed ephemeral focus does not change focused node', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
|
|
Blockly.DropDownDiv.showPositionedByField(field, null, null, false);
|
|
|
|
// Since managing ephemeral focus is disabled the current focused node shouldn't be changed.
|
|
const blockFocusableElem = block.getFocusableElement();
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, blockFocusableElem);
|
|
});
|
|
|
|
test('with managed ephemeral focus focuses drop-down div', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
|
|
Blockly.DropDownDiv.showPositionedByField(field, null, null, true);
|
|
|
|
// Managing ephemeral focus won't change getFocusedNode() but will change the actual element
|
|
// with DOM focus.
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, dropDownDivElem);
|
|
});
|
|
});
|
|
|
|
suite('showPositionedByBlock()', function () {
|
|
test('shows div near block', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
// Note that the offset must be computed before showing the div since otherwise it can move
|
|
// slightly after the div is shown.
|
|
const blockOffset = style.getPageOffset(block.getSvgRoot());
|
|
|
|
Blockly.DropDownDiv.showPositionedByBlock(field, block);
|
|
|
|
// The div should show below the block and centered horizontally.
|
|
const blockLocalBounds = block.getBoundingRectangle();
|
|
const blockBounds = Rect.createFromPoint(
|
|
blockOffset,
|
|
blockLocalBounds.getWidth(),
|
|
blockLocalBounds.getHeight(),
|
|
);
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
const divWidth = style.getSize(dropDownDivElem).width;
|
|
const expectedLeft = Math.floor(
|
|
blockBounds.left + blockBounds.getWidth() / 2 - divWidth / 2,
|
|
);
|
|
const expectedTop = Math.floor(blockBounds.bottom); // Should show beneath.
|
|
assert.strictEqual(dropDownDivElem.style.opacity, '1');
|
|
assert.strictEqual(dropDownDivElem.style.left, `${expectedLeft}px`);
|
|
assert.strictEqual(dropDownDivElem.style.top, `${expectedTop}px`);
|
|
});
|
|
|
|
test('with hide callback does not call callback', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
const onHideCallback = sinon.stub();
|
|
|
|
Blockly.DropDownDiv.showPositionedByBlock(field, block, onHideCallback);
|
|
|
|
// Simply showing the div should never call the hide callback.
|
|
assert.strictEqual(onHideCallback.callCount, 0);
|
|
});
|
|
|
|
test('without managed ephemeral focus does not change focused node', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
|
|
Blockly.DropDownDiv.showPositionedByBlock(
|
|
field,
|
|
block,
|
|
null,
|
|
null,
|
|
false,
|
|
);
|
|
|
|
// Since managing ephemeral focus is disabled the current focused node shouldn't be changed.
|
|
const blockFocusableElem = block.getFocusableElement();
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, blockFocusableElem);
|
|
});
|
|
|
|
test('with managed ephemeral focus focuses drop-down div', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
|
|
Blockly.DropDownDiv.showPositionedByBlock(field, block, null, null, true);
|
|
|
|
// Managing ephemeral focus won't change getFocusedNode() but will change the actual element
|
|
// with DOM focus.
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, dropDownDivElem);
|
|
});
|
|
});
|
|
|
|
suite('hideWithoutAnimation()', function () {
|
|
test('when not showing drop-down div keeps opacity at 0', function () {
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
assert.strictEqual(dropDownDivElem.style.opacity, '0');
|
|
});
|
|
|
|
suite('for div positioned by field', function () {
|
|
test('hides div', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.DropDownDiv.showPositionedByField(field);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Technically this will trigger a CSS animation, but the property is still set to 0.
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
assert.strictEqual(dropDownDivElem.style.opacity, '0');
|
|
});
|
|
|
|
test('hide callback calls callback', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
const onHideCallback = sinon.stub();
|
|
Blockly.DropDownDiv.showPositionedByField(field, onHideCallback);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Hiding the div should trigger the hide callback.
|
|
assert.strictEqual(onHideCallback.callCount, 1);
|
|
});
|
|
|
|
test('without ephemeral focus does not change focus', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
Blockly.DropDownDiv.showPositionedByField(field, null, null, false);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Hiding the div shouldn't change what would have already been focused.
|
|
const blockFocusableElem = block.getFocusableElement();
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, blockFocusableElem);
|
|
});
|
|
|
|
test('with ephemeral focus restores DOM focus', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
Blockly.DropDownDiv.showPositionedByField(field, null, null, true);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Hiding the div should restore focus back to the block.
|
|
const blockFocusableElem = block.getFocusableElement();
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, blockFocusableElem);
|
|
});
|
|
});
|
|
|
|
suite('for div positioned by block', function () {
|
|
test('hides div', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.DropDownDiv.showPositionedByBlock(field, block);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Technically this will trigger a CSS animation, but the property is still set to 0.
|
|
const dropDownDivElem = document.querySelector('.blocklyDropDownDiv');
|
|
assert.strictEqual(dropDownDivElem.style.opacity, '0');
|
|
});
|
|
|
|
test('hide callback calls callback', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
const onHideCallback = sinon.stub();
|
|
Blockly.DropDownDiv.showPositionedByBlock(field, block, onHideCallback);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Hiding the div should trigger the hide callback.
|
|
assert.strictEqual(onHideCallback.callCount, 1);
|
|
});
|
|
|
|
test('without ephemeral focus does not change focus', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
Blockly.DropDownDiv.showPositionedByBlock(
|
|
field,
|
|
block,
|
|
null,
|
|
null,
|
|
false,
|
|
);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Hiding the div shouldn't change what would have already been focused.
|
|
const blockFocusableElem = block.getFocusableElement();
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, blockFocusableElem);
|
|
});
|
|
|
|
test('with ephemeral focus restores DOM focus', function () {
|
|
const block = this.setUpBlockWithField();
|
|
const field = Array.from(block.getFields())[0];
|
|
Blockly.getFocusManager().focusNode(block);
|
|
Blockly.DropDownDiv.showPositionedByBlock(
|
|
field,
|
|
block,
|
|
null,
|
|
null,
|
|
true,
|
|
);
|
|
|
|
Blockly.DropDownDiv.hideWithoutAnimation();
|
|
|
|
// Hiding the div should restore focus back to the block.
|
|
const blockFocusableElem = block.getFocusableElement();
|
|
assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
|
|
assert.strictEqual(document.activeElement, blockFocusableElem);
|
|
});
|
|
});
|
|
});
|
|
});
|