feat(a11y): update font colors for contrast and adjust active state i…

…n header (#76)
jwplayer · Feb 8, 2024 · 0e18789 · 0e18789
1 parent 769cac4
commit 0e18789
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 17 deletions.
diff --git a/packages/ui-react/src/components/Button/Button.tsx b/packages/ui-react/src/components/Button/Button.tsx
@@ -29,6 +29,7 @@ type Props = {
   busy?: boolean;
   id?: string;
   as?: 'button' | 'a';
+  activeClassname?: string;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -47,11 +48,13 @@ const Button: React.FC<Props> = ({
   as = 'button',
   onClick,
   className,
+  activeClassname = '',
   ...rest
 }: Props) => {
   const buttonClassName = (isActive: boolean) =>
     classNames(styles.button, className, styles[color], styles[variant], {
       [styles.active]: isActive,
+      [activeClassname]: isActive,
       [styles.fullWidth]: fullWidth,
       [styles.large]: size === 'large',
       [styles.small]: size === 'small',

diff --git a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
-    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
     type="button"
   >
     <span>

diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
@@ -81,7 +81,7 @@
     height: 36px;
     min-height: 36px;
     margin: 0 6px;
-    padding: 0 calc(#{variables.$base-spacing} / 2);
+    padding: calc(#{variables.$header-height} / 2.5) calc(#{variables.$base-spacing} / 2);
     font-weight: var(--body-font-weight-bold);
     font-size: 18px;
   }

diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
         href="/"
       >
         <span>
@@ -91,7 +91,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
         href="/"
       >
         <span>

diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
@@ -32,10 +32,11 @@
 .sectionHeader {
   width: 100%;
   padding: 0 0 12px 24px;
-  color: variables.$slate-gray;
+  color: variables.$white;
   font-weight: 700;
   font-size: 12px;
   text-transform: uppercase;
+  opacity: 0.7;
 }
 
 .profileButton {

diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -50,3 +50,10 @@ div.testFixMargin {
 .main {
   height: 100%;
 }
+
+.headerButton {
+  &:not(:focus) {
+    border-bottom: 2px variables.$white solid;
+    border-radius: 0;
+  }
+}
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -190,9 +190,9 @@ const Layout = () => {
             isSelectingProfile: selectProfile.isLoading,
           }}
         >
-          <Button label={t('home')} to="/" variant="text" />
+          <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
           {menu.map((item) => (
-            <Button key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
+            <Button activeClassname={styles.headerButton} key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
           ))}
         </Header>
         <main id="content" className={styles.main} tabIndex={-1}>

diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`<Layout /> > renders layout 1`] = `
           >
             <a
               aria-current="page"
-              class="_button_f8f296 _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _default_f8f296 _text_f8f296 _active_f8f296 _headerButton_c71437"
               href="/"
             >
               <span>

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
@@ -15,7 +15,7 @@ exports[`User Component tests > Account Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
               href="/u/my-account"
             >
               <div
@@ -317,7 +317,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
               href="/u/favorites"
             >
               <div
@@ -596,7 +596,7 @@ exports[`User Component tests > Payments Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
               href="/u/payments"
             >
               <div

diff --git a/packages/ui-react/src/styles/_theme.scss b/packages/ui-react/src/styles/_theme.scss
@@ -59,8 +59,8 @@ $card-loading-bg-color: $secondary-color !default;
 
 // FormFeedback
 
-$form-feedback-error-bg-color: #ff0c3e !default;
-$form-feedback-error-color: variables.$white !default;
+$form-feedback-error-bg-color: #FF3535 !default;
+$form-feedback-error-color: variables.$black !default;
 $form-feedback-warning-bg-color: variables.$orange !default;
 $form-feedback-warning-color: variables.$white !default;
 $form-feedback-success-bg-color: variables.$green !default;
@@ -86,13 +86,13 @@ $text-field-hover-bg-color: rgba(variables.$white, 0.08) !default;
 $text-field-active-color: variables.$white !default;
 $text-field-active-border-color: variables.$white !default;
 $text-field-placeholder-color: rgba(variables.$white, 0.7) !default;
-$text-field-error-color: #ff0c3e !default;
+$text-field-error-color: #FF3535 !default;
 
 // Input
 
 $input-resting-border-color: rgba(variables.$white, 0.34) !default;
 $input-hover-border-color: rgba(variables.$white, 0.7) !default;
-$input-field-error-color: #ff0c3e !default;
+$input-field-error-color: #FF3535 !default;
 
 // Toggle
 

diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
@@ -124,7 +124,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
       return;
     }
 
-    I.seeCssPropertiesOnElements('input[name="terms"]', { 'border-color': '#ff0c3e' });
+    I.seeCssPropertiesOnElements('input[name="terms"]', { 'border-color': '#FF3535' });
   });
 
   Scenario(`I get warned for duplicate users - ${providerName}`, async ({ I }) => {

diff --git a/platforms/web/test-e2e/utils/login.ts b/platforms/web/test-e2e/utils/login.ts
@@ -28,7 +28,7 @@ export function checkField(I: CodeceptJS.I, field, error: string | boolean = fal
   // If error === true, there's an error, but no associated message
   if (error && error !== true) {
     I.see(error, `[data-testid=login-${field}-input]`);
-    I.seeCssPropertiesOnElements(`[data-testid="login-${field}-input"] [class*=helperText]`, { color: '#ff0c3e' });
+    I.seeCssPropertiesOnElements(`[data-testid="login-${field}-input"] [class*=helperText]`, { color: '#FF3535' });
   } else {
     I.dontSeeElement(`[class*=helperText] [data-testid="${field}-input"]`);
   }