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 RaspberryPiFoundation/blockly-samples#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).

Author: BenHenning

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,17 +193,24 @@ 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>(
   field: Field<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!);