Quiz Entry Accessibility Round 2 (#2875)

* Heading tags based on seo recommendations * Adjust disabled button color for bettter contrast * Focus reset for quiz options after using carousel nav with a keyboard Resolves: [MWPW-158352](https://jira.corp.adobe.com/browse/MWPW-158352)
adobecom · Sep 18, 2024 · b10f86c · b10f86c
1 parent dbc56a7
commit b10f86c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/libs/blocks/quiz-entry/quiz-entry.css b/libs/blocks/quiz-entry/quiz-entry.css
@@ -1,6 +1,6 @@
 .quiz-entry {
   --quiz-button-disabled-bg: #757575;
-  --quiz-button-disabled-text: #FFF6F6;
+  --quiz-button-disabled-text: #FFF;
 }
 
 .quiz-container {
@@ -25,12 +25,13 @@
   font-size: var(--type-heading-xl-size);
   line-height: var(--type-heading-xl-lh);
   font-weight: var(--type-heading-all-weight);
-  margin-bottom: 8px;
+  margin: 0 0 8px;
 }
 
 .quiz-subtitle {
   font-size: var(--type-heading-l-size);
   line-height: var(--type-heading-l-lh);
+  margin: 0;
 }
 
 .quiz-question-container {

diff --git a/libs/blocks/quiz-entry/quiz-entry.js b/libs/blocks/quiz-entry/quiz-entry.js
@@ -345,8 +345,8 @@ const App = ({
 
   return html`<div class="quiz-container">
     <div class="quiz-heading-container">
-      <div id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</div>
-      <div class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</div>
+      <h2 id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</h2>
+      <p class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</p>
     </div>
     <div class="quiz-question-container">
       <div class="quiz-input-container">

diff --git a/libs/blocks/quiz-entry/quizoption.js b/libs/blocks/quiz-entry/quizoption.js
@@ -1,5 +1,6 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
 import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
+import { createTag } from '../../utils/utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -51,15 +52,30 @@ export const GetQuizOption = ({
 
   const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
 
+  /**
+ * Resets focus to the top of the quiz-entry options for accessibility.
+ * To ensure that the next keyboard tab after carousel navigation
+ * will focus the first avaiable quiz option.
+ */
+  const resetFocus = () => {
+    const quiz = document.querySelector('.quiz-options-container');
+    const focuser = createTag('button', { tabindex: 0 });
+    quiz.prepend(focuser);
+    focuser.focus();
+    quiz.removeChild(focuser);
+  };
+
   const next = async () => {
     if (index + visibleCount < options.data.length) {
       setIndex(index + 1);
+      resetFocus();
     }
   };
 
   const prev = () => {
     if (index > 0) {
       setIndex(index - 1);
+      resetFocus();
     }
   };
 
@@ -144,24 +160,24 @@ 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' : ''}" aria-label="Previous"></button>`}
-  <div class="carousel-slides ${index > 0 ? 'align-right' : ''}">
-    ${options.data.slice(index + 1, index + visibleCount).map((option, idx) => html`
-      <${OptionCard} 
-        key=${idx}
-        text=${option.text}
-        title=${option.title} 
-        icon=${getOptionsValue(option.options, 'icon')}
-        iconTablet=${getOptionsValue(option.options, 'icon-tablet')}
-        iconDesktop=${getOptionsValue(option.options, 'icon-desktop')}
-        image=${getOptionsValue(option.options, 'image')}
-        background=${background}
-        options=${option.options}
-        selected=${selectedCards[option.options] ? 'selected' : ''}
-        disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) || mlInputUsed ? 'disabled' : ''}
-        onClick=${onOptionClick(option)}
-        />`)}
-  </div>
-  ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></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} 
+          key=${idx}
+          text=${option.text}
+          title=${option.title} 
+          icon=${getOptionsValue(option.options, 'icon')}
+          iconTablet=${getOptionsValue(option.options, 'icon-tablet')}
+          iconDesktop=${getOptionsValue(option.options, 'icon-desktop')}
+          image=${getOptionsValue(option.options, 'image')}
+          background=${background}
+          options=${option.options}
+          selected=${selectedCards[option.options] ? 'selected' : ''}
+          disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) || mlInputUsed ? 'disabled' : ''}
+          onClick=${onOptionClick(option)}
+          />`)}
+    </div>
+    ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></button>`}
   </div>`;
 };