fix(a11y): prevent duplicate global a11y selectors

jwplayer · Feb 22, 2024 · b3ccaff · b3ccaff
1 parent 6444282
commit b3ccaff
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 52 deletions.
diff --git a/packages/ui-react/src/components/Account/Account.module.scss b/packages/ui-react/src/components/Account/Account.module.scss
@@ -1,5 +1,3 @@
-@use '@jwp/ott-ui-react/src/styles/accessibility';
-
 .textWithButtonContainer {
   display: flex;
   flex-direction: column;

diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
@@ -207,7 +207,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
 
   return (
     <>
-      <h1 className={styles.hideUntilFocus}>{t('nav.account')}</h1>
+      <h1 className="hideUntilFocus">{t('nav.account')}</h1>
 
       <Form initialValues={initialValues}>
         {[

diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>
   <h1
-    class="_hideUntilFocus_c968f7"
+    class="hideUntilFocus"
   >
     nav.account
   </h1>

diff --git a/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss b/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
@@ -31,14 +31,3 @@
   color: theme.$form-feedback-success-color;
   background-color: theme.$form-feedback-success-bg-color;
 }
-
-.hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-}
diff --git a/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx b/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
@@ -22,7 +22,7 @@ const FormFeedback: React.FC<Props> = ({ children, variant = 'error', visible =
     [styles.warning]: variant === 'warning',
     [styles.success]: variant === 'success',
     [styles.info]: variant === 'info',
-    [styles.hidden]: !visible,
+    hidden: !visible,
   });
 
   const ariaLive = variantAriaMap[variant];

diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`User Component tests > Account Page 1`] = `
       class="_mainColumn_e9c5ca"
     >
       <h1
-        class="_hideUntilFocus_c968f7"
+        class="hideUntilFocus"
       >
         nav.account
       </h1>

diff --git a/packages/ui-react/src/styles/accessibility.scss b/packages/ui-react/src/styles/accessibility.scss
@@ -22,49 +22,52 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
   }
 }
 
-.hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-}
-
-.hideUntilFocus {
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-
-  &:focus {
-    position: static;
-    height: auto;
-    overflow: visible;
-    clip: auto;
-  }
-}
-
 @mixin accessibleOutline {
   outline: 2px solid var(--highlight-color, #fff);
   box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
 }
+
 @mixin accessibleOutlineContrast {
   outline: 2px solid var(--highlight-contrast-color, #fff);
   box-shadow: 0 0 2px 3px var(--highlight-color, #000);
 }
 
-/* Clearly visible focus rectangle (WCAG guidelines). */
-@media (hover: hover) and (pointer: fine) {
-  a,
-  [role='button'],
-  button,
-  input {
+@mixin globalClassNames {
+  /* Clearly visible focus rectangle (WCAG guidelines). */
+  @media (hover: hover) and (pointer: fine) {
+    a,
+    [role='button'],
+    button,
+    input {
+      &:focus {
+        @include accessibleOutline;
+      }
+    }
+  }
+
+  .hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .hideUntilFocus {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+
     &:focus {
-      @include accessibleOutline;
+      position: static;
+      height: auto;
+      overflow: visible;
+      clip: auto;
     }
   }
-}
+}
diff --git a/platforms/web/src/styles/main.scss b/platforms/web/src/styles/main.scss
@@ -18,6 +18,8 @@
   --card-tag-bg: #{theme.$card-tag-bg};
 }
 
+@include accessibility.globalClassNames;
+
 body {
   margin: 0;
   padding: 0;
@@ -78,4 +80,4 @@ h6 {
 
 input {
   font-family: var(--body-font-family);
-}
+}