MWPW-156126 - quiz-entry contrast and accessibility (#2785)

* adjustment to colors for better contrast * aria-label for carousel arrows * css clean up Resolves: [MWPW-156126](https://jira.corp.adobe.com/browse/MWPW-156126)
adobecom · Sep 2, 2024 · e675bf4 · e675bf4
1 parent 4e85f88
commit e675bf4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 46 deletions.
diff --git a/libs/blocks/quiz-entry/quiz-entry.css b/libs/blocks/quiz-entry/quiz-entry.css
@@ -1,3 +1,8 @@
+.quiz-entry {
+  --quiz-button-disabled-bg: #757575;
+  --quiz-button-disabled-text: #FFF6F6;
+}
+
 .quiz-container {
   align-items: center;
   color: var(--color-black);
@@ -17,15 +22,15 @@
 }
 
 .quiz-title {
-  font-size: 28px;
-  line-height: 36px;
+  font-size: var(--type-heading-xl-size);
+  line-height: var(--type-heading-xl-lh);
   font-weight: var(--type-heading-all-weight);
   margin-bottom: 8px;
 }
 
 .quiz-subtitle {
-  font-size: 20px;
-  line-height: 30px;
+  font-size: var(--type-heading-l-size);
+  line-height: var(--type-heading-l-lh);
 }
 
 .quiz-question-container {
@@ -134,7 +139,7 @@
 
 .quiz-directions {
     align-items: center; 
-    background: linear-gradient(90deg, #E200D9 1.24%, #E84601 100%);
+    background: linear-gradient(90deg, #A900A2 1.24%, #E84601 100%);
     border-radius: 8px;
     color: #FFF;
     display: flex;
@@ -230,33 +235,14 @@
   position: relative;
 }
 
-.quiz-option-icon {
-  align-items: center;
-  background-color: var(--quiz-icon-bg);
-  border-radius: 0.5rem;
-  display: flex;
-  line-height: 0;
-  padding: 0 24px;
-}
-
-.quiz-option-icon img {
-  height: var(--icon-size-l);
-  width: var(--icon-size-l);
-  max-width: var(--icon-size-l);
-}
-
-.quiz-option.has-icon .no-icon-default {
-  display: none;
-}
-
 .quiz-option-image {
   display: flex;
   align-items: center;
   border-radius: 0.5rem;
   justify-content: center;
   margin: 0;
   height: 100%;
-  filter: brightness(33%);
+  filter: brightness(35%);
 }
 
 .quiz-option-text-container {
@@ -289,14 +275,6 @@
   text-align: start;
 }
 
-.quiz-option:hover .quiz-option-icon {
-  background-color: color-mix(in srgb, var(--quiz-icon-bg) 70%, var(--color-white));
-}
-
-.quiz-option:focus-visible .quiz-option-icon {
-  background-color: color-mix(in srgb, var(--quiz-icon-bg) 80%, var(--color-white));
-}
-
 .quiz-option.selected {
   border: 5px solid #FC00F2;
   border-radius: 13px;
@@ -314,14 +292,10 @@
   z-index: 1;
 }
 
-.quiz-option.selected .quiz-option-icon {
-  background-color: color-mix(in srgb, var(--quiz-icon-bg) 70%, var(--color-white));
-}
-
 .quiz-option:hover .quiz-option-image, 
 .quiz-option.selected .quiz-option-image,
 .quiz-option:focus-visible .quiz-option-image {
-  filter: brightness(33%);
+  filter: brightness(20%);
 }
 
 .quiz-option:focus-visible::after {
@@ -382,12 +356,12 @@
 }
 
 .quiz-button[disabled] {
-  background: var(--color-gray-400);
+  background: var(--quiz-button-disabled-bg);
   cursor: not-allowed;
 }
 
 .quiz-button[disabled] .quiz-button-label{
-  color: var(--color-white);
+  color: var(--quiz-button-disabled-text);
 }
 
 /* Tablet up */
@@ -477,10 +451,6 @@
     min-height: 232px;
   }
 
-  .quiz-option-image {
-    filter: brightness(55%);
-  }
-
   .quiz-option-title {
     font-size: 24px;
     line-height: 30px;

diff --git a/libs/blocks/quiz-entry/quizoption.js b/libs/blocks/quiz-entry/quizoption.js
@@ -144,7 +144,7 @@ export const GetQuizOption = ({
 
   return html`
   <div class="quiz-options-container" role="group" aria-labelledby="question" tabindex="0" onkeydown=${handleKey}>
-  ${index > 0 && html`<button onClick=${prev} class="carousel-arrow arrow-prev ${isRTL ? 'rtl' : ''}"></button>`}
+  ${index > 0 && html`<button onClick=${prev} class="carousel-arrow arrow-prev ${isRTL ? 'rtl' : ''}" aria-label="Previous"></button>`}
   <div class="carousel-slides ${index > 0 ? 'align-right' : ''}">
     ${options.data.slice(index + 1, index + visibleCount).map((option, idx) => html`
       <${OptionCard} 
@@ -162,6 +162,6 @@ export const GetQuizOption = ({
         onClick=${onOptionClick(option)}
         />`)}
   </div>
-  ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}"></button>`}
+  ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></button>`}
   </div>`;
 };