Show catalog descriptions in the criteria table and set the row title…

…, which is useful for screen readers.
microsoft · Feb 22, 2024 · 5c2a0af · 5c2a0af
1 parent 01c3b08
commit 5c2a0af
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/teachertool/src/components/CriteriaTable.tsx b/teachertool/src/components/CriteriaTable.tsx
@@ -19,9 +19,10 @@ const CriteriaInstanceRow: React.FC<CriteriaInstanceDisplayProps> = ({ criteriaI
     }
 
     return catalogCriteria ? (
-        <div className={css["criteria-instance-display"]} role="row">
+        <div className={css["criteria-instance-display"]} role="row" title={catalogCriteria.template}>
             <div className={classList(css["cell"], css["criteria-text-cell"])} role="cell">
                 {catalogCriteria.template}
+                {catalogCriteria.description && <div className={css["criteria-description"]}>{catalogCriteria.description}</div>}
             </div>
             <div
                 className={classList(css["cell"], css["criteria-action-menu-cell"])}

diff --git a/teachertool/src/components/styling/CriteriaTable.module.scss b/teachertool/src/components/styling/CriteriaTable.module.scss
@@ -17,9 +17,17 @@
     }
 
     .criteria-text-cell {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
         text-align: left;
         padding: 0.5rem 0.5rem 0.5rem 0.7rem;
         border-right: 1px solid var(--pxt-content-accent);
+
+        .criteria-description {
+            color: var(--pxt-page-foreground-light)
+        }
     }
 
     .criteria-action-menu-cell {