A11Y: Improvements to <DToggleSwitch/> component (#23514)

app/assets/javascripts/discourse/app/components/d-toggle-switch.gjs

@@ -0,0 +1,42 @@
+import Component from "@glimmer/component";
+import I18n from "I18n";
+import icon from "discourse-common/helpers/d-icon";
+
+export default class DToggleSwitch extends Component {
+  <template>
+    <div class="d-toggle-switch">
+      <label class="d-toggle-switch--label">
+        {{! template-lint-disable no-redundant-role }}
+        <button
+          class="d-toggle-switch__checkbox"
+          type="button"
+          role="switch"
+          aria-checked={{this.checked}}
+          ...attributes
+        ></button>
+        {{! template-lint-enable no-redundant-role }}
+
+        <span class="d-toggle-switch__checkbox-slider">
+          {{#if @state}}
+            {{icon "check"}}
+          {{/if}}
+        </span>
+      </label>
+
+      <span class="d-toggle-switch__checkbox-label">
+        {{this.computedLabel}}
+      </span>
+    </div>
+  </template>
+
+  get computedLabel() {
+    if (this.args.label) {
+      return I18n.t(this.args.label);
+    }
+    return this.args.translatedLabel;
+  }
+
+  get checked() {
+    return this.args.state ? "true" : "false";
+  }
+}

app/assets/stylesheets/common/components/d-toggle-switch.scss

@@ -5,6 +5,7 @@
   &:focus {
     .d-toggle-switch__checkbox-slider {
       outline: 2px solid var(--tertiary);
+      outline-offset: 2px;
     }
   }
 
@@ -21,6 +22,7 @@
 
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 
   &__label {
     position: relative;
@@ -30,7 +32,23 @@
 
   &__checkbox {
     position: absolute;
-    visibility: hidden;
+    border: 0;
+    padding: 0;
+    background: transparent;
+
+    &:focus {
+      + .d-toggle-switch__checkbox-slider {
+        outline: 2px solid var(--tertiary);
+        outline-offset: 2px;
+      }
+
+      // Outline should show only when tabbing, not clicking
+      &:not(:focus-visible) {
+        + .d-toggle-switch__checkbox-slider {
+          outline: none;
+        }
+      }
+    }
   }
 
   &__checkbox[aria-checked="true"] + .d-toggle-switch__checkbox-slider {
@@ -57,7 +75,6 @@
     border-radius: var(--toggle-switch-height);
     width: var(--toggle-switch-width);
     height: var(--toggle-switch-height);
-    margin-right: 0.5em;
     position: relative;
     vertical-align: middle;
     transition: background 0.25s;
@@ -87,5 +104,9 @@
     top: calc(var(--toggle-switch-height) * 0.125);
     left: calc(var(--toggle-switch-height) * 0.125);
     transition: left 0.25s;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 }