fix: Improve display of focus rings on workspace controls (#9860)

* fix: Improve display of focus rings on workspace controls

* fix: Supress default outlines

packages/blockly/core/css.ts

@@ -530,7 +530,9 @@ input[type=number] {
   .blocklyComment,
   .blocklyBubble,
   .blocklyIconGroup,
-  .blocklyTextarea
+  .blocklyTextarea,
+  .blocklyZoom,
+  .blocklyTrash,
 ) {
   outline: none;
 }
@@ -559,7 +561,10 @@ input[type=number] {
 /* Icons with active focus. */
 .blocklyKeyboardNavigation
   .blocklyActiveFocus.blocklyIconGroup
-  > .blocklyIconShape:first-child {
+  > .blocklyIconShape:first-child,
+.blocklyKeyboardNavigation
+  .blocklyActiveFocus
+  > .blocklyFocusRing {
   stroke: var(--blockly-active-node-color);
   stroke-width: var(--blockly-selection-width);
 }

packages/blockly/core/trashcan.ts

@@ -155,6 +155,21 @@ export class Trashcan
       'id': this.uniqueId,
     });
 
+    dom.createSvgElement(
+      Svg.RECT,
+      {
+        'width': WIDTH + 8,
+        'height': BODY_HEIGHT + LID_HEIGHT + 8,
+        'x': -4,
+        'y': -4,
+        'rx': 2,
+        'ry': 2,
+        'fill': 'none',
+        'class': 'blocklyFocusRing',
+      },
+      this.svgGroup,
+    );
+
     aria.setRole(this.svgGroup, aria.Role.BUTTON);
     aria.setState(this.svgGroup, aria.State.LABEL, Msg['OPEN_TRASH']);
 

packages/blockly/core/zoom_controls.ts

@@ -123,6 +123,20 @@ class ZoomInControl extends ZoomControl {
       zoomControlContainer,
     );
     aria.setState(group, aria.State.LABEL, Msg['ZOOM_IN']);
+    dom.createSvgElement(
+      Svg.RECT,
+      {
+        'width': 40,
+        'height': 40,
+        'x': -4,
+        'y': -4,
+        'rx': 2,
+        'ry': 2,
+        'fill': 'none',
+        'class': 'blocklyFocusRing',
+      },
+      group,
+    );
     const clip = dom.createSvgElement(
       Svg.CLIPPATH,
       {'id': 'blocklyZoominClipPath' + rnd},
@@ -170,6 +184,20 @@ class ZoomOutControl extends ZoomControl {
       zoomControlContainer,
     );
     aria.setState(group, aria.State.LABEL, Msg['ZOOM_OUT']);
+    dom.createSvgElement(
+      Svg.RECT,
+      {
+        'width': 40,
+        'height': 40,
+        'x': -4,
+        'y': -4,
+        'rx': 2,
+        'ry': 2,
+        'fill': 'none',
+        'class': 'blocklyFocusRing',
+      },
+      group,
+    );
     const clip = dom.createSvgElement(
       Svg.CLIPPATH,
       {'id': 'blocklyZoomoutClipPath' + rnd},
@@ -217,6 +245,20 @@ class ZoomResetControl extends ZoomControl {
       zoomControlContainer,
     );
     aria.setState(group, aria.State.LABEL, Msg['RESET_ZOOM']);
+    dom.createSvgElement(
+      Svg.RECT,
+      {
+        'width': 40,
+        'height': 40,
+        'x': -4,
+        'y': -4,
+        'rx': 2,
+        'ry': 2,
+        'fill': 'none',
+        'class': 'blocklyFocusRing',
+      },
+      group,
+    );
     const clip = dom.createSvgElement(
       Svg.CLIPPATH,
       {'id': 'blocklyZoomresetClipPath' + rnd},