fix(a11y): ensure wcag compliance with 1.5 line-height for texts (#109)

Videodock · Feb 29, 2024 · f621ef7 · f621ef7
1 parent 2ccc932
commit f621ef7
Show file tree

Hide file tree

Showing 20 changed files with 40 additions and 44 deletions.
diff --git a/packages/ui-react/src/components/Adyen/AdyenForm.scss b/packages/ui-react/src/components/Adyen/AdyenForm.scss
@@ -6,7 +6,7 @@
     color: variables.$white;
     font-family: var(--body-font-family);
     font-size: 16px;
-    line-height: 18px;
+    line-height: variables.$base-line-height;
   }
 
   .adyen-checkout__error-text {
@@ -20,6 +20,6 @@
     color: variables.$white;
     font-family: var(--body-font-family);
     font-size: 16px;
-    line-height: 18px;
+    line-height: variables.$base-line-height;
   }
 }
diff --git a/packages/ui-react/src/components/Card/Card.module.scss b/packages/ui-react/src/components/Card/Card.module.scss
@@ -29,18 +29,17 @@
 
   &.featured {
     .title {
-      height: 1.1em;
+      height: variables.$base-line-height;
       padding-right: 8px;
       font-family: var(--body-font-family);
       font-size: 34px;
-      line-height: 36px;
+      line-height: variables.$base-line-height;
       white-space: nowrap;
       text-overflow: ellipsis;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 
       @include responsive.mobile-only {
         font-size: 24px;
-        line-height: 26px;
       }
     }
 
@@ -126,7 +125,7 @@
   font-weight: var(--body-font-weight-bold);
 
   font-size: 18px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
 }
 
 $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
@@ -145,13 +144,13 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
 }
 
 .title {
-  height: 2.4em;
+  height: calc(variables.$base-line-height * 2);
   overflow: hidden;
   color: var(--card-color);
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 1em;
-  line-height: 1.2em;
+  line-height: variables.$base-line-height;
   text-align: left;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 
@@ -174,7 +173,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
 
 .scheduledStart {
   font-size: 0.88em;
-  line-height: 1em;
+  line-height: variables.$base-line-height;
 
   @include responsive.mobile-only {
     font-size: 12px;

diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
@@ -1,6 +1,7 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/accessibility';
+@use '@jwp/ott-ui-react/src/styles/mixins/typography';
 
 .backButton {
   position: absolute;
@@ -108,7 +109,7 @@
   .couponCell {
     padding-top: 8px;
     padding-bottom: 8px;
-    line-height: 1em;
+    line-height: variables.$base-line-height;
 
     & > small {
       font-size: 14px;

diff --git a/packages/ui-react/src/components/DateField/DateField.module.scss b/packages/ui-react/src/components/DateField/DateField.module.scss
@@ -72,7 +72,7 @@
   padding: 14px 16px;
   color: inherit;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   text-align: center;
   background: transparent;
   border: none;

diff --git a/...eact/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.module.scss b/...eact/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.module.scss
@@ -35,7 +35,7 @@
   color: variables.$gray-white;
   font-weight: 400;
   font-size: 30px;
-  line-height: 28px;
+  line-height: variables.$base-line-height;
   text-align: center;
 }
 
@@ -45,7 +45,7 @@
   padding: 0;
   color: variables.$gray-white;
   font-size: 16px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   text-align: left;
 }
 

diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss b/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
@@ -86,7 +86,7 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     font-family: inherit;
     font-weight: theme.$body-font-weight-bold;
     font-size: 1rem;
-    line-height: 1em;
+    line-height: variables.$base-line-height;
     text-overflow: ellipsis;
     background: none;
     border: none;

diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.module.scss b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.module.scss
@@ -27,7 +27,7 @@
   padding-bottom: 20px;
   color: variables.$gray-white;
   font-size: 17px;
-  line-height: 21px;
+  line-height: variables.$base-line-height;
   text-align: left;
 }
 

diff --git a/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.module.scss b/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.module.scss
@@ -97,14 +97,13 @@
   font-family: var(--body-font-family);
   font-weight: theme.$body-font-weight-bold;
   font-size: 16px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   @include responsive.mobile-only {
     margin: auto 0;
     font-size: 14px;
-    line-height: 16px;
   }
 }
 
@@ -113,14 +112,13 @@
   color: theme.$epg-text-color;
   font-family: var(--body-font-family);
   font-size: 14px;
-  line-height: 16px;
+  line-height: variables.$base-line-height;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   @include responsive.mobile-only {
     margin-top: auto;
     font-size: 12px;
-    line-height: 14px;
   }
 }
 

diff --git a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.module.scss b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.module.scss
@@ -54,7 +54,7 @@
 .price {
   margin-left: auto;
   font-size: 20px;
-  line-height: 28px;
+  line-height: variables.$base-line-height;
 }
 
 .paymentFrequency {

diff --git a/packages/ui-react/src/components/Panel/Panel.module.scss b/packages/ui-react/src/components/Panel/Panel.module.scss
@@ -8,7 +8,7 @@
   font-weight: normal;
   font-size: 16px;
   font-style: normal;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
   background: theme.$modal-bg;
   box-shadow: theme.$panel-box-shadow;

diff --git a/packages/ui-react/src/components/Payment/Payment.module.scss b/packages/ui-react/src/components/Payment/Payment.module.scss
@@ -10,13 +10,12 @@
   padding: calc(#{variables.$base-spacing} / 2) variables.$base-spacing;
 
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
   background: theme.$panel-bg;
   border-radius: 4px;
 
   > strong {
-    line-height: 16px;
     letter-spacing: 0.25px;
   }
 }
@@ -51,11 +50,11 @@
 
 .price {
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
+
   > strong {
     font-weight: var(--body-font-weight-bold);
     font-size: 24px;
-    line-height: 26px;
   }
 }
 

diff --git a/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.module.scss b/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.module.scss
@@ -19,25 +19,23 @@
   padding: calc(#{variables.$base-spacing} / 2) variables.$base-spacing;
 
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
   background: theme.$panel-bg;
   border-radius: 4px;
 
   > strong {
-    line-height: 16px;
     letter-spacing: 0.25px;
   }
 }
 
 .price {
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
 
   > strong {
     font-weight: var(--body-font-weight-bold);
     font-size: 24px;
-    line-height: 26px;
   }
 }
 

diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
@@ -72,7 +72,7 @@
   align-items: center;
   margin-bottom: 8px;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
 
   > :first-child {
@@ -89,7 +89,7 @@
   margin-top: 24px;
   margin-bottom: 8px;
   font-size: 20px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 
   @include responsive.mobile-only() {
@@ -104,7 +104,7 @@
   margin-top: 0;
   margin-bottom: 24px;
   font-size: 18px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 }
 

diff --git a/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.module.scss b/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.module.scss
@@ -76,7 +76,7 @@ div.title {
   margin-right: auto;
   margin-bottom: 0;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
 
   > :first-child {
@@ -99,7 +99,7 @@ div.title {
   margin-top: 24px;
   margin-bottom: 8px;
   font-size: 20px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 
   @include responsive.mobile-only() {
@@ -112,6 +112,6 @@ div.title {
   min-height: 21px;
   margin-bottom: 24px;
   font-size: 18px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 }
diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
@@ -127,15 +127,15 @@
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 24px;
-  line-height: 26px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 }
 
 .relatedVideosListTitle {
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 20px;
-  line-height: 22px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 }
 

diff --git a/packages/ui-react/src/containers/Cinema/Cinema.module.scss b/packages/ui-react/src/containers/Cinema/Cinema.module.scss
@@ -65,7 +65,7 @@
 .primaryMetadata {
   margin-bottom: 8px;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
 
   @include responsive.mobile-only() {
@@ -78,7 +78,7 @@
   margin-top: 4px;
   margin-bottom: 8px;
   font-size: 20px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 
   @include responsive.mobile-only() {

diff --git a/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.module.scss b/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.module.scss
@@ -1,6 +1,7 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/mixins/typography';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
+@use '@jwp/ott-ui-react/src/styles/variables';
 
 .inlinePlayer {
   position: absolute;
@@ -73,7 +74,7 @@
 
   @include responsive.mobile-only {
     font-size: 16px;
-    line-height: 1em;
+    line-height: variables.$base-line-height;
   }
 }
 
@@ -83,12 +84,11 @@
   margin-bottom: 16px;
   font-family: var(--body-alt-font-family);
   font-size: 16px;
-  line-height: 1.2em;
+  line-height: variables.$base-line-height;
   text-align: center;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 
   @include responsive.mobile-only {
     font-size: 14px;
-    line-height: 1em;
   }
 }
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -3,7 +3,7 @@
 
 .footer {
   padding: 20px 40px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
   text-align: center;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);

diff --git a/packages/ui-react/src/styles/_variables.scss b/packages/ui-react/src/styles/_variables.scss
@@ -35,6 +35,7 @@ $body-font-size: 16px !default;
 $base-spacing: 16px !default;
 $base-spacing-mobile: 8px !default;
 $base-spacing-heading: 20px !default;
+$base-line-height: 1.5em !default;
 
 $container-width-mobile: 100% !default;
 $container-width-tablet: 685px !default;

diff --git a/platforms/web/test-e2e/tests/video_detail_test.ts b/platforms/web/test-e2e/tests/video_detail_test.ts
@@ -54,7 +54,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     I.seeElement('div[aria-label="Collapse"]');
     I.dontSeeElement('div[aria-label="Expand"]');
-    checkHeight('160px');
+    checkHeight('216px');
 
     I.click('div[aria-label="Collapse"]');