[ProgressV2] Make expanding choice levels tab navigable (#57899)

code-dot-org · Apr 9, 2024 · 4468e42 · 4468e42
1 parent d72d3b1
commit 4468e42
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 29 deletions.
diff --git a/apps/src/templates/sectionProgressV2/LevelProgressHeader.jsx b/apps/src/templates/sectionProgressV2/LevelProgressHeader.jsx
@@ -16,6 +16,38 @@ export default function ExpandedProgressColumnHeader({
 }) {
   const isExpandable = level.sublevels?.length > 0;
 
+  const getLevelHeaderContent = React.useCallback(
+    () => (
+      <>
+        <div className={styles.expandedHeaderLevelCellLevelNumber}>
+          {lesson.relative_position + '.' + level.bubbleText}
+        </div>
+        {level.kind === 'assessment' && (
+          <FontAwesome
+            icon="star"
+            aria-label="assessment"
+            className={styles.assessmentLevelIcon}
+          />
+        )}
+      </>
+    ),
+    [lesson, level]
+  );
+
+  const expandedLevel = React.useCallback(
+    isExpanded => (
+      <button
+        type="button"
+        className={styles.expandedHeaderLevelCellExpandable}
+        aria-expanded={isExpanded}
+      >
+        {<FontAwesome icon={isExpanded ? 'caret-down' : 'caret-right'} />}
+        {getLevelHeaderContent()}
+      </button>
+    ),
+    [getLevelHeaderContent]
+  );
+
   const expandedChoiceLevel = React.useCallback(
     () => (
       <>
@@ -31,17 +63,9 @@ export default function ExpandedProgressColumnHeader({
           id={getLevelColumnHeaderId(level.id)}
           onClick={() => toggleExpandedChoiceLevel(level)}
         >
-          {level.sublevels?.length > 0 && <FontAwesome icon="caret-down" />}
-          <div className={styles.expandedHeaderLevelCellLevelNumber}>
-            {lesson.relative_position + '.' + level.bubbleText}
-          </div>
-          {level.kind === 'assessment' && (
-            <FontAwesome
-              icon="star"
-              aria-label="assessment"
-              className={styles.assessmentLevelIcon}
-            />
-          )}
+          {level.sublevels?.length > 0
+            ? expandedLevel(true)
+            : getLevelHeaderContent()}
         </th>
         {level.sublevels?.map((sublevel, index) => (
           <th
@@ -63,7 +87,14 @@ export default function ExpandedProgressColumnHeader({
         ))}
       </>
     ),
-    [lesson, level, isExpandable, toggleExpandedChoiceLevel]
+    [
+      lesson,
+      level,
+      isExpandable,
+      toggleExpandedChoiceLevel,
+      expandedLevel,
+      getLevelHeaderContent,
+    ]
   );
 
   const unexpandedLevel = React.useCallback(
@@ -80,22 +111,19 @@ export default function ExpandedProgressColumnHeader({
         onClick={() => toggleExpandedChoiceLevel(level)}
         id={getLevelColumnHeaderId(level.id)}
       >
-        {level.sublevels?.length > 0 && <FontAwesome icon="caret-right" />}
-        <div className={styles.expandedHeaderLevelCellLevelNumber}>
-          {`${lesson.relative_position}.${
-            level.isUnplugged ? 0 : level.bubbleText
-          }`}
-        </div>
-        {level.kind === 'assessment' && (
-          <FontAwesome
-            icon="star"
-            aria-label="assessment"
-            className={styles.assessmentLevelIcon}
-          />
-        )}
+        {level.sublevels?.length > 0
+          ? expandedLevel(false)
+          : getLevelHeaderContent()}
       </th>
     ),
-    [lesson, level, toggleExpandedChoiceLevel, isExpandable]
+    [
+      lesson,
+      level,
+      toggleExpandedChoiceLevel,
+      isExpandable,
+      expandedLevel,
+      getLevelHeaderContent,
+    ]
   );
 
   return level.sublevels?.length > 0 && isLevelExpanded

diff --git a/apps/src/templates/sectionProgressV2/progress-table-v2.module.scss b/apps/src/templates/sectionProgressV2/progress-table-v2.module.scss
@@ -22,9 +22,10 @@
   }
 
   // note: unless border is set, you will need to override
-  // the active border state
+  // the active border state. Important is necessary to override
+  // the default !important
   // &:active {
-  //   border: ____;
+  //   border: ____ !important;
   // }
 }
 
@@ -232,7 +233,7 @@ $level-cell-width: 52;
       align-items: center;
 
       &:active {
-        border: none;
+        border: none !important;
       }
     }
 
@@ -272,6 +273,22 @@ $level-cell-width: 52;
       color: inherit;
       background-color: inherit;
 
+      &Expandable {
+        @include remove-default-button-styles;
+        display: flex;
+        flex-direction: row;
+        line-height: 32px;
+        align-items: center;
+        overflow: hidden;
+        flex-wrap: nowrap;
+        justify-content: space-evenly;
+        width: 100%;
+
+        &:active {
+          border: none !important;
+        }
+      }
+
       &LevelNumber {
         margin-top: 0.0625em;
       }