Make question-info a heading

[CORE-418]
openstax · Dec 11, 2024 · 3921300 · 3921300
1 parent 86c1455
commit 3921300
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -243,7 +243,7 @@ const StepCard = ({
           <StepCardHeader>
             <div>
               {leftHeaderChildren}
-              <div className="question-info">
+              <div className="question-info" role="heading" aria-level={2}>
                 {headerTitleChildren}
                 <span>{formattedQuestionNumber}</span>
                 {showTotalQuestions ? <span className="num-questions">&nbsp;/ {numberOfQuestions}</span> : null}

diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -12,7 +12,9 @@ exports[`StepCard matches snapshot 1`] = `
     >
       <div>
         <div
+          aria-level={2}
           className="question-info"
+          role="heading"
         >
           <span>
             Question 1
@@ -59,7 +61,9 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
     >
       <div>
         <div
+          aria-level={2}
           className="question-info"
+          role="heading"
         >
           <span>
             Questions 1 - 3
@@ -113,7 +117,9 @@ exports[`TaskStepCard can optionally provide task 1`] = `
     >
       <div>
         <div
+          aria-level={2}
           className="question-info"
+          role="heading"
         >
           <span>
             Question 1
@@ -152,7 +158,9 @@ exports[`TaskStepCard can optionally provide type 1`] = `
     >
       <div>
         <div
+          aria-level={2}
           className="question-info"
+          role="heading"
         >
           <span>
             Question 1
@@ -191,7 +199,9 @@ exports[`TaskStepCard matches snapshot 1`] = `
     >
       <div>
         <div
+          aria-level={2}
           className="question-info"
+          role="heading"
         >
           <span>
             Question 1

diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -16,7 +16,9 @@ exports[`Exercise using step data matches snapshot 1`] = `
       >
         <div>
           <div
+            aria-level={2}
             className="question-info"
+            role="heading"
           >
             <span>
               Question 1
@@ -207,7 +209,9 @@ exports[`Exercise with question state data matches snapshot 1`] = `
       >
         <div>
           <div
+            aria-level={2}
             className="question-info"
+            role="heading"
           >
             <span>
               Question 1
@@ -446,7 +450,9 @@ exports[`Exercise with question state data renders header icons with multiple ch
       >
         <div>
           <div
+            aria-level={2}
             className="question-info"
+            role="heading"
           >
             <span>
               Question 1
@@ -771,7 +777,9 @@ exports[`Exercise with question state data renders header icons with two-step ex
       >
         <div>
           <div
+            aria-level={2}
             className="question-info"
+            role="heading"
           >
             <span>
               Question 1
@@ -1082,7 +1090,9 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
       >
         <div>
           <div
+            aria-level={2}
             className="question-info"
+            role="heading"
           >
             <span>
               Question 1