From 5c2a0af0642b9d7101404ee1c4a13328eef89f13 Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Thu, 22 Feb 2024 14:34:45 -0800
Subject: [PATCH] Show catalog descriptions in the criteria table and set the
 row title, which is useful for screen readers.

---
 teachertool/src/components/CriteriaTable.tsx              | 3 ++-
 .../src/components/styling/CriteriaTable.module.scss      | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/teachertool/src/components/CriteriaTable.tsx b/teachertool/src/components/CriteriaTable.tsx
index b230296bad7f..a57bd97b960c 100644
--- 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
index a9254c5f89bf..99e0c033e6cf 100644
--- 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 {