fix: Improve VoiceOver experience when using Safari (#10073)

* fix: avoid appending element to focus on re-order

* fix: remove VoiceOver flicker when moving between stacks

* fix: compute aria context for rendered conns at draw time

Otherwise this only happens on focus and the first focus in Safari
with VoiceOver fails to output anything.

* fix: reduce performance load by only setting role and roledesc

The full aria context for rendered conns is only calculated on focus

* fix: ensure move mode icon is still at the front

* fix: rendered conns are always visible

Connection previews are maintained by toggling a class.
Connectino reordering does not append element to be focused which
fixes VoiceOver in Safari behaviour.

Author: microbit-robert

packages/blockly/core/block_svg.ts

@@ -1393,23 +1393,29 @@ export class BlockSvg
    * @internal
    */
   moveSvgRootToFront(blockOnly = false) {
-    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
-    let block: this | null = this;
-    if (block.isDeadOrDying()) {
+    if (this.isDeadOrDying()) {
       return;
     }
-    do {
-      const root = block.getSvgRoot();
-      const parent = root.parentNode;
-      if (!parent) return;
-      const childNodes = parent.childNodes;
-      // Avoid moving the block if it's already at the bottom.
-      if (childNodes[childNodes.length - 1] !== root) {
-        parent.appendChild(root);
-      }
-      if (blockOnly) break;
-      block = block.getParent();
-    } while (block);
+    requestAnimationFrame(() => {
+      if (this.dragging) return;
+      /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+      let block: this | null = this;
+      do {
+        if (block.isDeadOrDying()) return;
+        const root = block.getSvgRoot();
+        const parent = root.parentNode;
+        if (!parent) return;
+        const childNodes = parent.childNodes;
+        // Avoid moving the block if it's already at the bottom.
+        if (childNodes[childNodes.length - 1] !== root) {
+          while (root.nextSibling) {
+            parent.insertBefore(root.nextSibling, root);
+          }
+        }
+        if (blockOnly) break;
+        block = block.getParent();
+      } while (block);
+    });
   }
 
   /**

packages/blockly/core/css.ts

@@ -162,6 +162,9 @@ const content = `
 
 .blocklyHighlightedConnectionPath {
   fill: none;
+}
+
+.blocklyHighlightedConnectionPathVisible {
   stroke: #fc3;
   stroke-width: 4px;
 }
@@ -604,12 +607,6 @@ input[type=number] {
   stroke-width: var(--blockly-selection-width);
 }
 
-/* Workaround for unexpectedly hidden connection path due to core style. */
-.blocklyKeyboardNavigation
-  .blocklyPassiveFocus.blocklyHighlightedConnectionPath {
-  display: unset !important;
-}
-
 /* Different ways for toolbox/flyout to be the active tree: */
 /* Active focus in the flyout. */
 .blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus),

packages/blockly/core/rendered_connection.ts

@@ -28,6 +28,7 @@ import * as internalConstants from './internal_constants.js';
 import {Msg} from './msg.js';
 import * as aria from './utils/aria.js';
 import {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
 import * as svgMath from './utils/svg_math.js';
 import {WorkspaceSvg} from './workspace_svg.js';
 
@@ -322,11 +323,11 @@ export class RenderedConnection
   }
 
   /**
-   * Sets the aria role, label, and other state for this connection.
+   * Sets the aria role and role description for this connection.
    *
    * @param highlightSvg The focusable element for this connection.
    */
-  private recomputeAriaContext(highlightSvg: SVGElement) {
+  setAriaRole(highlightSvg: SVGElement) {
     // Note that output connections don't have highlights so this doesn't need to take them into account.
     const roleDescription =
       this.type === ConnectionType.INPUT_VALUE
@@ -335,6 +336,15 @@ export class RenderedConnection
 
     aria.setRole(highlightSvg, aria.Role.FIGURE);
     aria.setState(highlightSvg, aria.State.ROLEDESCRIPTION, roleDescription);
+  }
+
+  /**
+   * Sets the aria role, label, and other state for this connection.
+   *
+   * @param highlightSvg The focusable element for this connection.
+   */
+  private recomputeAriaContext(highlightSvg: SVGElement) {
+    this.setAriaRole(highlightSvg);
 
     // 'Next' connections are only focusable if they're the last connection
     // inside a statement input. The label for these connections comes from
@@ -385,8 +395,14 @@ export class RenderedConnection
     // draw pass).
     const highlightSvg = this.findHighlightSvg();
     if (highlightSvg) {
-      highlightSvg.style.display = '';
-      highlightSvg.parentElement?.appendChild(highlightSvg);
+      dom.addClass(highlightSvg, 'blocklyHighlightedConnectionPathVisible');
+      requestAnimationFrame(() => {
+        const parent = highlightSvg.parentElement;
+        if (!parent) return;
+        while (highlightSvg.nextSibling) {
+          parent.insertBefore(highlightSvg.nextSibling, highlightSvg);
+        }
+      });
       this.recomputeAriaContext(highlightSvg);
     }
   }
@@ -398,7 +414,7 @@ export class RenderedConnection
     // Note that this is done synchronously for parity with highlight().
     const highlightSvg = this.findHighlightSvg();
     if (highlightSvg) {
-      highlightSvg.style.display = 'none';
+      dom.removeClass(highlightSvg, 'blocklyHighlightedConnectionPathVisible');
     }
   }
 

packages/blockly/core/renderers/common/constants.ts

@@ -1208,7 +1208,7 @@ export class ConstantProvider {
       `}`,
 
       // Connection highlight.
-      `${selector} .blocklyHighlightedConnectionPath {`,
+      `${selector} .blocklyHighlightedConnectionPathVisible {`,
         `stroke: #fc3;`,
       `}`,
 

packages/blockly/core/renderers/common/drawer.ts

@@ -440,7 +440,11 @@ export class Drawer {
 
         const highlightSvg = this.drawConnectionHighlightPath(elem);
         if (highlightSvg) {
-          highlightSvg.style.display = elem.highlighted ? '' : 'none';
+          elem.connectionModel.setAriaRole(highlightSvg);
+          highlightSvg.classList.toggle(
+            'blocklyHighlightedConnectionPathVisible',
+            elem.highlighted,
+          );
         }
       }
     }

packages/blockly/core/renderers/common/path_object.ts

@@ -226,7 +226,6 @@ export class PathObject implements IPathObject {
       {
         'id': connection.id,
         'class': 'blocklyHighlightedConnectionPath',
-        'style': 'display: none;',
         'd': connectionPath,
         'transform': transformation,
       },

packages/blockly/core/renderers/zelos/constants.ts

@@ -789,7 +789,7 @@ export class ConstantProvider extends BaseConstantProvider {
       `}`,
 
       // Connection highlight.
-      `${selector} .blocklyHighlightedConnectionPath {`,
+      `${selector} .blocklyHighlightedConnectionPathVisible {`,
       `stroke: ${this.SELECTED_GLOW_COLOUR};`,
       `}`,