From b50331b00f63f59b1ce05f8d364d1e8f1c1a5030 Mon Sep 17 00:00:00 2001
From: Aaron Dodson <aaron.dodson@raspberrypi.org>
Date: Tue, 12 May 2026 09:54:28 -0700
Subject: [PATCH 1/2] fix: Improve display of focus rings on workspace controls

---
 packages/blockly/core/css.ts           |  5 ++-
 packages/blockly/core/trashcan.ts      | 15 +++++++++
 packages/blockly/core/zoom_controls.ts | 42 ++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/blockly/core/css.ts b/packages/blockly/core/css.ts
index 0c186545130..7dc8fa8fde4 100644
--- a/packages/blockly/core/css.ts
+++ b/packages/blockly/core/css.ts
@@ -559,7 +559,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);
 }
diff --git a/packages/blockly/core/trashcan.ts b/packages/blockly/core/trashcan.ts
index 220a05d13bf..cde76d4a827 100644
--- a/packages/blockly/core/trashcan.ts
+++ b/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']);
 
diff --git a/packages/blockly/core/zoom_controls.ts b/packages/blockly/core/zoom_controls.ts
index 6d113f08ec0..8cac10d144e 100644
--- a/packages/blockly/core/zoom_controls.ts
+++ b/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},

From 4fac354099ebeb5466a6b41b2fb7cd7896134cac Mon Sep 17 00:00:00 2001
From: Aaron Dodson <aaron.dodson@raspberrypi.org>
Date: Tue, 12 May 2026 10:12:56 -0700
Subject: [PATCH 2/2] fix: Supress default outlines

---
 packages/blockly/core/css.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/blockly/core/css.ts b/packages/blockly/core/css.ts
index 7dc8fa8fde4..46abe465c02 100644
--- a/packages/blockly/core/css.ts
+++ b/packages/blockly/core/css.ts
@@ -530,7 +530,9 @@ input[type=number] {
   .blocklyComment,
   .blocklyBubble,
   .blocklyIconGroup,
-  .blocklyTextarea
+  .blocklyTextarea,
+  .blocklyZoom,
+  .blocklyTrash,
 ) {
   outline: none;
 }