[AX] Color scheme toggle keyboard navigation should follow radio buttons standards (#401)

* [r94221573] fix: color scheme toggle should focus as a radiobutton group

* [r94221573] fix: small typo

Author: marinaaisa

src/components/ColorSchemeToggle.vue

@@ -13,7 +13,6 @@
     aria-label="Select a color scheme preference"
     class="color-scheme-toggle"
     role="radiogroup"
-    tabindex="0"
   >
     <label
       v-for="option in options"
@@ -85,6 +84,12 @@ input {
   appearance: none;
 }
 
+label {
+  @include on-keyboard-focus-within() {
+    @include focus-outline();
+  }
+}
+
 .text {
   border: 1px solid transparent;
   border-radius: var(--toggle-border-radius-inner, 2px);

src/components/Filter/FilterInput.vue

@@ -487,11 +487,9 @@ $input-height: rem(28px);
       border-bottom-left-radius: $small-border-radius - 1;
       border-bottom-right-radius: $small-border-radius - 1;
 
-      .fromkeyboard & {
-        &:focus {
-          outline: none;
-          box-shadow: 0 0 0 5px var(--color-focus-color);
-        }
+      @include on-keyboard-focus() {
+        outline: none;
+        box-shadow: 0 0 0 5px var(--color-focus-color);
       }
     }
 

src/components/Navigator/NavigatorCardItem.vue

@@ -250,15 +250,13 @@ $nesting-spacing: $card-horizontal-spacing + $card-horizontal-spacing-small;
   display: flex;
   align-items: center;
 
-  .fromkeyboard & {
-    &:focus-within {
-      margin: $card-horizontal-spacing-small;
-      height: $item-height - 10px;
-      @include focus-outline();
-
-      .depth-spacer {
-        margin-left: -$card-horizontal-spacing-small;
-      }
+  @include on-keyboard-focus-within() {
+    margin: $card-horizontal-spacing-small;
+    height: $item-height - 10px;
+    @include focus-outline();
+
+    .depth-spacer {
+      margin-left: -$card-horizontal-spacing-small;
     }
   }
 }

src/styles/core/_helpers.scss

@@ -67,7 +67,7 @@
     line-height: $line-height;
     clip-path: unset;
   }
-}
+};
 
 ////
 /// Apply styling only when focused via the keyboard.
@@ -78,7 +78,18 @@
       @content
     }
   }
-}
+};
+
+////
+/// Apply styling only when focused via the keyboard in an element inside.
+////
+@mixin on-keyboard-focus-within() {
+  .fromkeyboard & {
+    &:focus-within {
+      @content
+    }
+  }
+};
 
 ////
 /// Replaces the outline effect when an element is in focus, with a box shadow effect.