feat(switch): Add high contrast mode focus ring to switch

Note that additional `<div>`s need to be added into the DOM in order for this focus ring to appear. See the updated docs on where these elements should be placed.

PiperOrigin-RevId: 436613790

Author: material-web-copybara

packages/mdc-switch/README.md

@@ -82,10 +82,16 @@ information on how to import JavaScript.**
       </div>
     </div>
   </div>
+  <span class="mdc-switch__focus-ring-wrapper">
+    <div class="mdc-switch__focus-ring"></div>
+  </span>
 </button>
 <label for="basic-switch">off/on</label>
 ```
 
+The `mdc-switch__focus-ring` element ensures that a focus indicator is displayed
+in high contrast mode around the active/focused switch.
+
 ### Switch states
 
 Switches can be on or off. Switches have enabled, hover, focused, and pressed
@@ -121,6 +127,9 @@ avoid a FOUC by initially adding this attribute.
       </div>
     </div>
   </div>
+  <span class="mdc-switch__focus-ring-wrapper">
+    <div class="mdc-switch__focus-ring"></div>
+  </span>
 </button>
 <label for="disabled-switch">off/on</label>
 ```
@@ -151,6 +160,9 @@ this class and attribute.
       </div>
     </div>
   </div>
+  <span class="mdc-switch__focus-ring-wrapper">
+    <div class="mdc-switch__focus-ring"></div>
+  </span>
 </button>
 <label for="selected-switch">off/on</label>
 ```

packages/mdc-switch/_switch-theme.scss

@@ -416,6 +416,7 @@ $forced-colors-theme: (
 }
 
 @mixin _handle-height($height) {
+  .mdc-switch__focus-ring-wrapper,
   .mdc-switch__handle {
     @include theme.property(height, $height);
   }

packages/mdc-switch/_switch.scss

@@ -26,7 +26,9 @@
 @use '@material/animation/animation';
 @use '@material/dom/dom';
 @use '@material/elevation/elevation';
+@use '@material/ripple/ripple-theme';
 @use '@material/ripple/ripple';
+@use '@material/focus-ring/focus-ring';
 @use '@material/rtl/rtl';
 @use '@material/theme/gss';
 
@@ -42,6 +44,24 @@ $ripple-target: '.mdc-switch__ripple';
     @include ripple.common; // COPYBARA_COMMENT_THIS_LINE
     @include ripple.surface($ripple-target: $ripple-target);
     @include ripple.radius-unbounded($ripple-target: $ripple-target);
+
+    .mdc-switch__focus-ring-wrapper {
+      width: 100%;
+      position: absolute;
+      // IE11 hacks
+      top: 50%;
+      @include rtl.ignore-next-line();
+      left: 50%;
+      @include rtl.ignore-next-line();
+      transform: translate(-50%, -50%);
+      // end IE11 hacks
+    }
+
+    @include ripple-theme.focus {
+      .mdc-switch__focus-ring {
+        @include focus-ring.focus-ring();
+      }
+    }
   }
 }
 

packages/mdc-switch/package.json

@@ -23,6 +23,7 @@
     "@material/dom": "^13.0.0",
     "@material/elevation": "^13.0.0",
     "@material/feature-targeting": "^13.0.0",
+    "@material/focus-ring": "^13.0.0",
     "@material/ripple": "^13.0.0",
     "@material/rtl": "^13.0.0",
     "@material/shape": "^13.0.0",