fix/dg col selector accessibility (#2024)

Author: HedwigAR

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved accessibility on column selector, added aria-attributes and changed the role to 'menuitemcheckbox'.
+
 ### Added
 
 - We added accessibility support for column headers when single selection is enabled, making sure the purpose of the column is announced.

packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx

@@ -160,7 +160,9 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                                 setShow(false);
                             }
                         }}
-                        role="menuitem"
+                        role="menuitemcheckbox"
+                        aria-checked={isVisible}
+                        aria-disabled={isLastVisibleColumn}
                         tabIndex={0}
                     >
                         <input
@@ -170,6 +172,7 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                             style={{ pointerEvents: "none" }}
                             type="checkbox"
                             tabIndex={-1}
+                            aria-hidden="true"
                             onChange={onChangeStub}
                         />
                         <label htmlFor={`${props.id}_checkbox_toggle_${index}`} style={{ pointerEvents: "none" }}>

packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnSelector.spec.tsx

@@ -37,7 +37,7 @@ describe("Column Selector", () => {
 
             jest.advanceTimersByTime(100);
 
-            const items = screen.getAllByRole("menuitem");
+            const items = screen.getAllByRole("menuitemcheckbox");
             expect(items[0]).toHaveFocus();
         });
 
@@ -52,7 +52,7 @@ describe("Column Selector", () => {
 
             jest.advanceTimersByTime(100);
 
-            const items = screen.getAllByRole("menuitem");
+            const items = screen.getAllByRole("menuitemcheckbox");
             expect(items[0]).toHaveFocus();
 
             await act(async () => {
@@ -92,7 +92,7 @@ describe("Column Selector", () => {
             });
             jest.advanceTimersByTime(100);
 
-            const items = screen.getAllByRole("menuitem");
+            const items = screen.getAllByRole("menuitemcheckbox");
             expect(items[0]).toHaveFocus();
 
             await act(async () => {
@@ -149,7 +149,7 @@ describe("Column Selector", () => {
             });
             jest.advanceTimersByTime(100);
 
-            const items = screen.getAllByRole("menuitem");
+            const items = screen.getAllByRole("menuitemcheckbox");
             expect(items).toHaveLength(3);
             expect(items[0]).toHaveFocus();