Fix tab stops in hidden components

src/components/alert/alert.scss

@@ -1,5 +1,5 @@
 @import 'component';
-@import 'mixins/visually-hidden';
+@import 'mixins/hidden';
 
 /**
  * @prop --box-shadow: The alert's box shadow.
@@ -31,7 +31,7 @@
   margin: inherit;
 
   &:not(.alert--visible) {
-    @include visually-hidden;
+    @include hidden;
   }
 }
 

src/components/dialog/dialog.scss

@@ -1,5 +1,5 @@
 @import 'component';
-@import 'mixins/visually-hidden';
+@import 'mixins/hidden';
 
 /**
  * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
@@ -22,7 +22,7 @@
   z-index: var(--sl-z-index-dialog);
 
   &:not(.dialog--visible) {
-    @include visually-hidden;
+    @include hidden;
   }
 }
 

src/components/drawer/drawer.scss

@@ -1,5 +1,5 @@
 @import 'component';
-@import 'mixins/visually-hidden';
+@import 'mixins/hidden';
 
 /**
  * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
@@ -20,7 +20,7 @@
   overflow: hidden;
 
   &:not(.drawer--visible) {
-    @include visually-hidden;
+    @include hidden;
   }
 }
 

src/styles/mixins/hidden.scss

@@ -0,0 +1,22 @@
+// A transition-friendly alternative to `display: none` for hiding content
+@mixin hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden; // prevent tab stops and screen reader discovery
+}
+
+// Hides content visually while still making it available to screen readers
+@mixin visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

src/styles/mixins/visually-hidden.scss

@@ -1,9 +0,0 @@
-@mixin visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}