UX updates to toggle

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

@@ -2,16 +2,21 @@ import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse-common/helpers/d-icon";
 
 const ComposerToggleSwitch = <template>
-  <div class="composer-toggle-switch">
-    <label class="composer-toggle-switch__label">
-      {{! template-lint-disable no-redundant-role }}
-      <button
-        class="composer-toggle-switch__checkbox"
-        type="button"
-        role="switch"
-        aria-checked={{if @state "true" "false"}}
-        ...attributes
-      ></button>
+  <div
+    class="{{concatClass
+        'composer-toggle-switch'
+        (if @state '--rte' '--markdown')
+      }}"
+  >
+
+    {{! template-lint-disable no-redundant-role }}
+    <button
+      class="composer-toggle-switch__checkbox"
+      type="button"
+      role="switch"
+      aria-pressed={{if @state "true" "false"}}
+      ...attributes
+    >
       {{! template-lint-enable no-redundant-role }}
 
       <span class="composer-toggle-switch__checkbox-slider">
@@ -20,15 +25,20 @@ const ComposerToggleSwitch = <template>
             "composer-toggle-switch__left-icon"
             (unless @state "--active")
           }}
+          aria-hidden="true"
+          focusable="false"
         >{{icon "fab-markdown"}}</span>
         <span
           class={{concatClass
             "composer-toggle-switch__right-icon"
             (if @state "--active")
           }}
+          aria-hidden="true"
+          focusable="false"
         >{{icon "a"}}</span>
       </span>
-    </label>
+    </button>
+
   </div>
 </template>;
 

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

@@ -1,9 +1,10 @@
 .composer-toggle-switch {
   $root: &;
 
-  --toggle-switch-width: 48px;
+  --toggle-switch-width: 40px;
   --toggle-switch-height: 24px;
 
+  height: 100%;
   grid-column: span 2;
   justify-content: center;
 
@@ -15,11 +16,11 @@
   }
 
   &:hover {
-    &__checkbox-slider {
-      background-color: var(--primary-high);
-    }
+    // &__checkbox-slider {
+    //   background-color: var(--primary-high);
+    // }
 
-    &__checkbox[aria-checked="true"]:not([disabled])
+    &__checkbox[aria-pressed="true"]:not([disabled])
       + #{$root}__checkbox-slider {
       background-color: var(--tertiary-hover);
     }
@@ -29,15 +30,15 @@
   align-items: center;
   gap: 0.5rem;
 
-  &__label {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
+  label {
+    // position: relative;
+    // display: inline-block;
+    // cursor: pointer;
     margin: 0;
   }
 
   &__checkbox {
-    position: absolute;
+    // position: absolute;
     border: 0;
     padding: 0;
     background: transparent;
@@ -57,7 +58,7 @@
     }
   }
 
-  &__checkbox[aria-checked="true"] + &__checkbox-slider::before {
+  &__checkbox[aria-pressed="true"] + &__checkbox-slider::before {
     left: calc(var(--toggle-switch-width) - var(--toggle-switch-height));
   }
 
@@ -73,71 +74,66 @@
   &__checkbox-slider {
     display: inline-block;
     cursor: pointer;
-    background: var(--primary-low-mid);
+    background: var(--primary-low);
     width: var(--toggle-switch-width);
     height: var(--toggle-switch-height);
     position: relative;
     vertical-align: middle;
     transition: background 0.25s;
+    border-radius: 0.25em;
+  }
+
+  &__left-icon,
+  &__right-icon {
+    display: inline-block;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.15s;
+    height: 100%;
+    width: calc(var(--toggle-switch-height) - 2px);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+
+    &.--active {
+      opacity: 1;
+    }
+
+    & .d-icon {
+      font-size: var(--font-down-1);
+      color: var(--primary);
+      vertical-align: text-bottom;
+    }
   }
 
   &__left-icon {
-    opacity: 0;
-    transition: opacity 0.25s;
-
-    @media (prefers-reduced-motion: reduce) {
-      transition-duration: 0ms;
-    }
-
-    &.--active {
-      opacity: 1;
-    }
-
-    & .d-icon {
-      font-size: var(--font-down-1);
-      color: var(--primary);
-      left: 5px;
-      top: 6px;
-      position: absolute;
-    }
+    left: 2px;
   }
-
   &__right-icon {
-    opacity: 0;
-    transition: opacity 0.25s;
-
-    @media (prefers-reduced-motion: reduce) {
-      transition-duration: 0ms;
-    }
-
-    & .d-icon {
-      font-size: var(--font-down-1);
-      color: var(--primary);
-      right: 5px;
-      top: 6px;
-      position: absolute;
-    }
-
-    &.--active {
-      opacity: 1;
-    }
+    right: 2px;
   }
 
-  &__checkbox-slider::before,
-  &__checkbox-slider::after {
+  &__checkbox-slider::before {
     content: "";
     display: block;
     position: absolute;
     cursor: pointer;
-  }
-
-  &__checkbox-slider::before {
     background-color: var(--tertiary-low);
-    width: var(--toggle-switch-height);
-    height: var(--toggle-switch-height);
-    top: 0;
-    left: 0;
-    transition: left 0.25s;
+    width: calc(var(--toggle-switch-height) - 2px);
+    height: calc(var(--toggle-switch-height) - 4px);
+    top: 2px;
+    transition: left 0.25s, right 0.25s;
+    border-radius: 0.25em;
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+
+    .--markdown & {
+      left: 2px;
+    }
+
+    .--rte & {
+      right: 2px;
+    }
 
     @media (prefers-reduced-motion: reduce) {
       transition-duration: 0ms;