fix: Restore styled focus rings to drag and resize handles

src/board-item/styles.scss

@@ -1,26 +1,5 @@
 @use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
-
-@mixin focus-highlight($gutter: 4px, $border-radius: cs.$border-radius-control-default-focus-ring) {
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-  & {
-    outline: 2px dotted transparent;
-    outline-offset: calc($gutter - 1px);
-  }
-  &::before {
-    content: " ";
-    display: block;
-    position: absolute;
-    box-sizing: border-box;
-    left: calc(-1 * #{$gutter});
-    top: calc(-1 * #{$gutter});
-    width: calc(100% + 2 * #{$gutter});
-    height: calc(100% + 2 * #{$gutter});
-    border-radius: $border-radius;
-    border: 2px solid cs.$color-border-item-focused;
-  }
-}
+@use "../internal/shared.scss" as shared;
 
 .root {
   display: contents;
@@ -31,7 +10,7 @@
   box-shadow: cs.$shadow-container-active;
 
   :global([data-awsui-focus-visible]) & {
-    @include focus-highlight(0px, cs.$border-radius-container);
+    @include shared.focus-highlight(0px, cs.$border-radius-container);
   }
 }
 

src/internal/drag-handle/styles.scss

@@ -1,3 +1,5 @@
+@use "../shared.scss" as shared;
+
 .handle {
   cursor: grab;
 }
@@ -6,6 +8,10 @@
   cursor: grabbing;
 }
 
+.handle:not(.active):focus-visible {
+  @include shared.focus-highlight();
+}
+
 .active {
   outline: none;
 }

src/internal/resize-handle/styles.scss

@@ -1,7 +1,13 @@
+@use "../shared.scss" as shared;
+
 .handle {
   cursor: nwse-resize;
 }
 
+.handle:not(.active):focus-visible {
+  @include shared.focus-highlight();
+}
+
 .active {
   outline: none;
 }

src/internal/shared.scss

@@ -0,0 +1,23 @@
+@use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
+
+@mixin focus-highlight($gutter: 4px, $border-radius: cs.$border-radius-control-default-focus-ring) {
+  position: relative;
+  box-sizing: border-box;
+  outline: none;
+  & {
+    outline: 2px dotted transparent;
+    outline-offset: calc($gutter - 1px);
+  }
+  &::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    left: calc(-1 * #{$gutter});
+    top: calc(-1 * #{$gutter});
+    width: calc(100% + 2 * #{$gutter});
+    height: calc(100% + 2 * #{$gutter});
+    border-radius: $border-radius;
+    border: 2px solid cs.$color-border-item-focused;
+  }
+}

test/visual/drag-states.test.ts

@@ -76,6 +76,22 @@ class DndPageObject extends ScreenshotPageObject {
   }
 }
 
+test(
+  "renders correctly styled focus ring around the drag handle",
+  setupTest("/index.html#/dnd/engine-a2h-test", DndPageObject, async (page) => {
+    await page.focus(boardItemHandle("A"));
+    expect(await page.fullPageScreenshot()).toMatchImageSnapshot();
+  })
+);
+
+test(
+  "renders correctly styled focus ring around the resize handle",
+  setupTest("/index.html#/dnd/engine-a2h-test", DndPageObject, async (page) => {
+    await page.focus(boardItemResizeHandle("A"));
+    expect(await page.fullPageScreenshot()).toMatchImageSnapshot();
+  })
+);
+
 test(
   "active item overlays other items",
   setupTest("/index.html#/dnd/engine-a2h-test", DndPageObject, async (page) => {