Fix keyboard nav

microsoft · Feb 21, 2024 · 5d5ddb0 · 5d5ddb0
1 parent 5be354c
commit 5d5ddb0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/teachertool/src/components/CriteriaTable.tsx b/teachertool/src/components/CriteriaTable.tsx
@@ -21,11 +21,15 @@ const CriteriaInstanceRow: React.FC<CriteriaInstanceDisplayProps> = ({ criteriaI
     }
 
     return catalogCriteria ? (
-        <div className={css["criteria-instance-display"]} role="row" tabIndex={0}>
+        <div className={css["criteria-instance-display"]} role="row">
             <div className={classList(css["cell"], css["criteria-text-cell"])} role="cell">
                 {catalogCriteria.template}
             </div>
-            <div className={classList(css["cell"], css["criteria-action-menu-cell"])} role="cell">
+            <div
+                className={classList(css["cell"], css["criteria-action-menu-cell"])}
+                role="cell"
+                aria-label={Strings.Actions}
+            >
                 <Button
                     label={<i className="far fa-trash-alt" />}
                     className={css["delete-criteria-button"]}
@@ -45,10 +49,14 @@ const CriteriaTableControl: React.FC<CriteriaTableProps> = ({}) => {
     return teacherTool.rubric.criteria?.length > 0 ? (
         <div className={css["criteria-table"]} role="table" aria-label={Strings.Criteria}>
             <div className={css["criteria-header"]} role="row">
-                <div className={classList(css["cell"], css["criteria-text-cell"])} role="columnheader">
+                <div className={classList(css["cell"], css["criteria-text-cell"])} role="columnheader" tabIndex={0}>
                     {Strings.Criteria}
                 </div>
-                <div className={classList(css["cell"], css["criteria-action-menu-cell"])} role="columnheader">
+                <div
+                    className={classList(css["cell"], css["criteria-action-menu-cell"])}
+                    role="columnheader"
+                    aria-label={Strings.Actions}
+                >
                     {/* Intentionally left empty */}
                 </div>
             </div>

diff --git a/teachertool/src/constants.ts b/teachertool/src/constants.ts
@@ -10,6 +10,7 @@ export namespace Strings {
     export const Name = lf("Name");
     export const RubricName = lf("Rubric Name");
     export const AddCriteria = lf("Add Criteria");
+    export const Actions = lf("Actions");
 }
 
 export namespace Ticks {