From a2934a632023bb4416d55044bbfd141215389d8c Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 5 Dec 2024 16:11:59 -0600
Subject: [PATCH] Make question-info a heading

[CORE-418]
---
 src/components/Card.tsx                             |  2 +-
 src/components/__snapshots__/Card.spec.tsx.snap     | 10 ++++++++++
 src/components/__snapshots__/Exercise.spec.tsx.snap | 10 ++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 5fff851..2559642 100644
--- 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
index 6f9a8b9..6c640be 100644
--- 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
index 195b24e..0bfe609 100644
--- 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
@@ -219,7 +221,9 @@ exports[`Exercise with question state data matches snapshot 1`] = `
       >
         <div>
           <div
+            aria-level={2}
             className="question-info"
+            role="heading"
           >
             <span>
               Question 1
@@ -470,7 +474,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
@@ -807,7 +813,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
@@ -1130,7 +1138,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