From ae97530e2545c3812f1e1dc2b8a8556f30de6670 Mon Sep 17 00:00:00 2001
From: Erika Miguel <erika@bocoup.com>
Date: Mon, 20 May 2024 17:05:08 -0400
Subject: [PATCH] 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
---
 .../TestQueue/AssignTesterDropdown/index.jsx      | 15 +++++----------
 client/tests/AssignTesterDropdown.test.jsx        |  4 ++--
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/components/TestQueue/AssignTesterDropdown/index.jsx b/client/components/TestQueue/AssignTesterDropdown/index.jsx
index 7625a3988..a36a82b5d 100644
--- 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
index bb8dce235..032b98235 100644
--- 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(() => {