From 45444940584d46a60a267174d1974a6bb68ebd86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 27 Sep 2022 10:55:16 +0200
Subject: [PATCH] A11y: enable rule jsx-a11y/aria-role (#55760)

---
 .eslintrc                                               | 2 +-
 packages/grafana-ui/src/components/Table/Filter.tsx     | 3 +--
 packages/grafana-ui/src/components/Table/Table.test.tsx | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index f61fb61f8b9..8b39d17688b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -47,7 +47,7 @@
     "jsx-a11y/aria-activedescendant-has-tabindex": "error",
     "jsx-a11y/aria-props": "error",
     "jsx-a11y/aria-proptypes": "error",
-    "jsx-a11y/aria-role": "off",
+    "jsx-a11y/aria-role": "error",
     "jsx-a11y/aria-unsupported-elements": "error",
     "jsx-a11y/autocomplete-valid": "error",
     "jsx-a11y/click-events-have-key-events": "off",
diff --git a/packages/grafana-ui/src/components/Table/Filter.tsx b/packages/grafana-ui/src/components/Table/Filter.tsx
index cae40aea9a2..8c4124af684 100644
--- a/packages/grafana-ui/src/components/Table/Filter.tsx
+++ b/packages/grafana-ui/src/components/Table/Filter.tsx
@@ -27,12 +27,11 @@ export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
   if (!field || !field.config.custom?.filterable) {
     return null;
   }
-
   return (
     <span
       className={cx(tableStyles.headerFilter, filterEnabled ? styles.filterIconEnabled : styles.filterIconDisabled)}
       ref={ref}
-      role="filterIcon"
+      role="button"
       onClick={onShowPopover}
     >
       <Icon name="filter" />
diff --git a/packages/grafana-ui/src/components/Table/Table.test.tsx b/packages/grafana-ui/src/components/Table/Table.test.tsx
index 271fd6180b6..7bcc94b3bd7 100644
--- a/packages/grafana-ui/src/components/Table/Table.test.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.test.tsx
@@ -200,7 +200,7 @@ describe('Table', () => {
 
       expect(within(getTable()).getAllByRole('row')).toHaveLength(9);
 
-      await userEvent.click(within(getColumnHeader(/number/)).getByRole('filterIcon'));
+      await userEvent.click(within(getColumnHeader(/number/)).getByRole('button', { name: '' }));
       await userEvent.click(screen.getByLabelText('1'));
       await userEvent.click(screen.getByText('Ok'));