fix: Use aria-checked for AssignTesterDropdown (#1097)

Address #977 * Use aria-checked for `AssignTesterDropdown` * Update dropdown item role to `menuitemcheckbox` and remove `aria-hidden` from username
w3c · May 20, 2024 · ae97530 · ae97530
1 parent 9414180
commit ae97530
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/client/components/TestQueue/AssignTesterDropdown/index.jsx b/client/components/TestQueue/AssignTesterDropdown/index.jsx
@@ -169,10 +169,13 @@ const AssignTesterDropdown = ({
                             }
                             return (
                                 <Dropdown.Item
-                                    role="menuitem"
+                                    role="menuitemcheckbox"
                                     variant="secondary"
                                     as="button"
                                     key={`tpr-${testPlanReportId}-assign-tester-${username}`}
+                                    aria-checked={
+                                        testerIsAssigned ? true : false
+                                    }
                                     onClick={async () => {
                                         const updatedIsAssigned =
                                             !testerIsAssigned;
@@ -189,15 +192,7 @@ const AssignTesterDropdown = ({
                                     }}
                                 >
                                     {icon && <FontAwesomeIcon icon={icon} />}
-                                    <span className="sr-only">{`${username} ${
-                                        testerIsAssigned
-                                            ? 'checked'
-                                            : 'unchecked'
-                                    }`}</span>
-                                    <span
-                                        aria-hidden="true"
-                                        className={classname}
-                                    >
+                                    <span className={classname}>
                                         {`${tester.username}`}
                                     </span>
                                 </Dropdown.Item>

diff --git a/client/tests/AssignTesterDropdown.test.jsx b/client/tests/AssignTesterDropdown.test.jsx
@@ -179,7 +179,7 @@ describe('AssignTesterDropdown', () => {
         fireEvent.click(button);
 
         const items = await screen.findAllByText(/bee/);
-        expect(items.length).toBe(2); // One for display, one for sr-only
+        expect(items.length).toBe(1);
         fireEvent.click(items[0]);
 
         await waitFor(async () => {
@@ -205,7 +205,7 @@ describe('AssignTesterDropdown', () => {
         fireEvent.click(button);
 
         const items = await screen.findAllByText(/NVDA Bot/);
-        expect(items.length).toBe(2); // One for display, one for sr-only
+        expect(items.length).toBe(1);
         fireEvent.click(items[0]);
 
         await waitFor(() => {