feat: Add more ephemeral overrides for drop-downs. (#9086)

## 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).

core/dropdowndiv.ts

@@ -122,6 +122,7 @@ export function createDom() {
   }
   div = document.createElement('div');
   div.className = 'blocklyDropDownDiv';
+  div.tabIndex = -1;
   const parentDiv = common.getParentContainer() || document.body;
   parentDiv.appendChild(div);
 
@@ -192,6 +193,11 @@ export function setColour(backgroundColour: string, borderColour: string) {
  * @param block Block to position the drop-down around.
  * @param opt_onHide Optional callback for when the drop-down is hidden.
  * @param opt_secondaryYOffset Optional Y offset for above-block positioning.
+ * @param manageEphemeralFocus Whether ephemeral focus should be managed
+ *     according to the drop-down div's lifetime. Note that if a false value is
+ *     passed in here then callers should manage ephemeral focus directly
+ *     otherwise focus may not properly restore when the widget closes. Defaults
+ *     to true.
  * @returns True if the menu rendered below block; false if above.
  */
 export function showPositionedByBlock<T>(
@@ -199,10 +205,12 @@ export function showPositionedByBlock<T>(
   block: BlockSvg,
   opt_onHide?: () => void,
   opt_secondaryYOffset?: number,
+  manageEphemeralFocus: boolean = true,
 ): boolean {
   return showPositionedByRect(
     getScaledBboxOfBlock(block),
     field as Field,
+    manageEphemeralFocus,
     opt_onHide,
     opt_secondaryYOffset,
   );
@@ -217,17 +225,24 @@ export function showPositionedByBlock<T>(
  * @param field The field to position the dropdown against.
  * @param opt_onHide Optional callback for when the drop-down is hidden.
  * @param opt_secondaryYOffset Optional Y offset for above-block positioning.
+ * @param manageEphemeralFocus Whether ephemeral focus should be managed
+ *     according to the drop-down div's lifetime. Note that if a false value is
+ *     passed in here then callers should manage ephemeral focus directly
+ *     otherwise focus may not properly restore when the widget closes. Defaults
+ *     to true.
  * @returns True if the menu rendered below block; false if above.
  */
 export function showPositionedByField<T>(
   field: Field<T>,
   opt_onHide?: () => void,
   opt_secondaryYOffset?: number,
+  manageEphemeralFocus: boolean = true,
 ): boolean {
   positionToField = true;
   return showPositionedByRect(
     getScaledBboxOfField(field as Field),
     field as Field,
+    manageEphemeralFocus,
     opt_onHide,
     opt_secondaryYOffset,
   );
@@ -271,16 +286,15 @@ function getScaledBboxOfField(field: Field): Rect {
  * @param manageEphemeralFocus Whether ephemeral focus should be managed
  *     according to the drop-down div's lifetime. Note that if a false value is
  *     passed in here then callers should manage ephemeral focus directly
- *     otherwise focus may not properly restore when the widget closes. Defaults
- *     to true.
+ *     otherwise focus may not properly restore when the widget closes.
  * @returns True if the menu rendered below block; false if above.
  */
 function showPositionedByRect(
   bBox: Rect,
   field: Field,
+  manageEphemeralFocus: boolean,
   opt_onHide?: () => void,
   opt_secondaryYOffset?: number,
-  manageEphemeralFocus: boolean = true,
 ): boolean {
   // If we can fit it, render below the block.
   const primaryX = bBox.left + (bBox.right - bBox.left) / 2;
@@ -352,10 +366,6 @@ export function show<T>(
   dom.addClass(div, renderedClassName);
   dom.addClass(div, themeClassName);
 
-  if (manageEphemeralFocus) {
-    returnEphemeralFocus = getFocusManager().takeEphemeralFocus(div);
-  }
-
   // When we change `translate` multiple times in close succession,
   // Chrome may choose to wait and apply them all at once.
   // Since we want the translation to initial X, Y to be immediate,
@@ -364,7 +374,15 @@ export function show<T>(
   // making the dropdown appear to fly in from (0, 0).
   // Using both `left`, `top` for the initial translation and then `translate`
   // for the animated transition to final X, Y is a workaround.
-  return positionInternal(primaryX, primaryY, secondaryX, secondaryY);
+  const atOrigin = positionInternal(primaryX, primaryY, secondaryX, secondaryY);
+
+  // Ephemeral focus must happen after the div is fully visible in order to
+  // ensure that it properly receives focus.
+  if (manageEphemeralFocus) {
+    returnEphemeralFocus = getFocusManager().takeEphemeralFocus(div);
+  }
+
+  return atOrigin;
 }
 
 const internal = {

core/widgetdiv.ts

@@ -71,6 +71,7 @@ export function createDom() {
   } else {
     containerDiv = document.createElement('div') as HTMLDivElement;
     containerDiv.className = containerClassName;
+    containerDiv.tabIndex = -1;
   }
 
   container.appendChild(containerDiv!);

tests/mocha/dropdowndiv_test.js

@@ -4,6 +4,8 @@
  * 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,
@@ -11,9 +13,32 @@ import {
 } 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 () {
-      sharedTestSetup.call(this);
       this.boundsStub = sinon
         .stub(Blockly.DropDownDiv.TEST_ONLY, 'getBoundsInfo')
         .returns({
@@ -41,9 +66,6 @@ suite('DropDownDiv', function () {
           return 0;
         });
     });
-    teardown(function () {
-      sharedTestTeardown.call(this);
-    });
     test('Below, in Bounds', function () {
       const metrics = Blockly.DropDownDiv.TEST_ONLY.getPositionMetrics(
         50,
@@ -113,4 +135,291 @@ suite('DropDownDiv', function () {
       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);
+      });
+    });
+  });
 });

tests/mocha/widget_div_test.js

@@ -13,9 +13,26 @@ import {
 suite('WidgetDiv', 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('positionWithAnchor', function () {
@@ -269,4 +286,119 @@ suite('WidgetDiv', function () {
       });
     });
   });
+
+  suite('show()', function () {
+    test('shows nowhere', function () {
+      const block = this.setUpBlockWithField();
+      const field = Array.from(block.getFields())[0];
+
+      Blockly.WidgetDiv.show(field, false, () => {});
+
+      // By default the div will not have a position.
+      const widgetDivElem = document.querySelector('.blocklyWidgetDiv');
+      assert.strictEqual(widgetDivElem.style.display, 'block');
+      assert.strictEqual(widgetDivElem.style.left, '');
+      assert.strictEqual(widgetDivElem.style.top, '');
+    });
+
+    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.WidgetDiv.show(field, false, () => {});
+
+      // 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.WidgetDiv.show(field, false, () => {}, 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 widget div', function () {
+      const block = this.setUpBlockWithField();
+      const field = Array.from(block.getFields())[0];
+      Blockly.getFocusManager().focusNode(block);
+
+      Blockly.WidgetDiv.show(field, false, () => {}, null, true);
+
+      // Managing ephemeral focus won't change getFocusedNode() but will change the actual element
+      // with DOM focus.
+      const widgetDivElem = document.querySelector('.blocklyWidgetDiv');
+      assert.strictEqual(Blockly.getFocusManager().getFocusedNode(), block);
+      assert.strictEqual(document.activeElement, widgetDivElem);
+    });
+  });
+
+  suite('hide()', function () {
+    test('initially keeps display empty', function () {
+      Blockly.WidgetDiv.hide();
+
+      // The display property starts as empty and stays that way until an owner is attached.
+      const widgetDivElem = document.querySelector('.blocklyWidgetDiv');
+      assert.strictEqual(widgetDivElem.style.display, '');
+    });
+
+    test('for showing div hides div', function () {
+      const block = this.setUpBlockWithField();
+      const field = Array.from(block.getFields())[0];
+      Blockly.WidgetDiv.show(field, false, () => {});
+
+      Blockly.WidgetDiv.hide();
+
+      // Technically this will trigger a CSS animation, but the property is still set to 0.
+      const widgetDivElem = document.querySelector('.blocklyWidgetDiv');
+      assert.strictEqual(widgetDivElem.style.display, 'none');
+    });
+
+    test('for showing div and hide callback calls callback', function () {
+      const block = this.setUpBlockWithField();
+      const field = Array.from(block.getFields())[0];
+      const onHideCallback = sinon.stub();
+      Blockly.WidgetDiv.show(field, false, onHideCallback);
+
+      Blockly.WidgetDiv.hide();
+
+      // Hiding the div should trigger the hide callback.
+      assert.strictEqual(onHideCallback.callCount, 1);
+    });
+
+    test('for showing div without ephemeral focus does not change focus', function () {
+      const block = this.setUpBlockWithField();
+      const field = Array.from(block.getFields())[0];
+      Blockly.getFocusManager().focusNode(block);
+      Blockly.WidgetDiv.show(field, false, () => {}, null, false);
+
+      Blockly.WidgetDiv.hide();
+
+      // 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('for showing div with ephemeral focus restores DOM focus', function () {
+      const block = this.setUpBlockWithField();
+      const field = Array.from(block.getFields())[0];
+      Blockly.getFocusManager().focusNode(block);
+      Blockly.WidgetDiv.show(field, false, () => {}, null, true);
+
+      Blockly.WidgetDiv.hide();
+
+      // 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);
+    });
+  });
 });