Accessibility: enable rule jsx-a11y/no-noninteractive-element-to-interactive-role (#56870)

* enable rule `jsx-a11y/no-noninteractive-element-to-interactive-role` and switch to extending recommended preset

* fix unit tests

* better unit test

.eslintrc

@@ -65,71 +65,26 @@
       }
     },
     {
+      "extends": ["plugin:jsx-a11y/recommended"],
       "files": ["**/*"],
       "excludedFiles": ["**/*.{spec,test}.{ts,tsx}"],
       "rules": {
-        // these are all the rules listed in the strict preset
-        // we should fix them one by one and mark them as errors
-        // once they're all fixed, we can remove them all and instead extend the strict preset
-        // with "extends": ["plugin:jsx-a11y/strict"]
-        "jsx-a11y/alt-text": "error",
-        "jsx-a11y/anchor-has-content": "error",
+        // rules marked "off" are those left in the recommended preset we need to fix
+        // we should remove the corresponding line and fix them one by one
+        // any marked "error" contain specific overrides we'll need to keep
         "jsx-a11y/anchor-is-valid": "off",
-        "jsx-a11y/aria-activedescendant-has-tabindex": "error",
-        "jsx-a11y/aria-props": "error",
-        "jsx-a11y/aria-proptypes": "error",
-        "jsx-a11y/aria-role": "error",
-        "jsx-a11y/aria-unsupported-elements": "error",
-        "jsx-a11y/autocomplete-valid": "error",
         "jsx-a11y/click-events-have-key-events": "off",
-        "jsx-a11y/heading-has-content": "error",
-        "jsx-a11y/html-has-lang": "error",
-        "jsx-a11y/iframe-has-title": "error",
-        "jsx-a11y/img-redundant-alt": "error",
-        "jsx-a11y/interactive-supports-focus": [
-          "off",
-          {
-            "tabbable": [
-              "button",
-              "checkbox",
-              "link",
-              "progressbar",
-              "searchbox",
-              "slider",
-              "spinbutton",
-              "switch",
-              "textbox"
-            ]
-          }
-        ],
+        "jsx-a11y/interactive-supports-focus": "off",
         "jsx-a11y/label-has-associated-control": "off",
-        "jsx-a11y/media-has-caption": "error",
         "jsx-a11y/mouse-events-have-key-events": "off",
-        "jsx-a11y/no-access-key": "error",
         "jsx-a11y/no-autofocus": [
           "error",
           {
             "ignoreNonDOM": true
           }
         ],
-        "jsx-a11y/no-distracting-elements": "error",
-        "jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
-        "jsx-a11y/no-noninteractive-element-interactions": [
-          "off",
-          {
-            "body": ["onError", "onLoad"],
-            "iframe": ["onError", "onLoad"],
-            "img": ["onError", "onLoad"]
-          }
-        ],
-        "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
-        "jsx-a11y/no-noninteractive-tabindex": "error",
-        "jsx-a11y/no-redundant-roles": "error",
-        "jsx-a11y/no-static-element-interactions": "off",
-        "jsx-a11y/role-has-required-aria-props": "error",
-        "jsx-a11y/role-supports-aria-props": "error",
-        "jsx-a11y/scope": "error",
-        "jsx-a11y/tabindex-no-positive": "error"
+        "jsx-a11y/no-noninteractive-element-interactions": "off",
+        "jsx-a11y/no-static-element-interactions": "off"
       }
     }
   ]

packages/grafana-ui/src/components/FileUpload/FileUpload.test.tsx

@@ -9,14 +9,14 @@ import { FileUpload } from './FileUpload';
 describe('FileUpload', () => {
   it('should render upload button with default text and no file name', () => {
     render(<FileUpload onFileUpload={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Upload file' })).toBeInTheDocument();
+    expect(screen.getByText('Upload file')).toBeInTheDocument();
     expect(screen.queryByLabelText('File name')).toBeNull();
   });
 
   it('clicking the button should trigger the input', async () => {
     const mockInputOnClick = jest.fn();
     const { getByTestId } = render(<FileUpload onFileUpload={() => {}} />);
-    const button = screen.getByRole('button', { name: 'Upload file' });
+    const button = screen.getByText('Upload file');
     const input = getByTestId(selectors.components.FileUpload.inputField);
 
     // attach a click listener to the input

packages/grafana-ui/src/components/FileUpload/FileUpload.tsx

@@ -58,7 +58,7 @@ export const FileUpload = ({
         accept={accept}
         data-testid={selectors.components.FileUpload.inputField}
       />
-      <label role="button" htmlFor={id} className={cx(style.labelWrapper, className)}>
+      <label htmlFor={id} className={cx(style.labelWrapper, className)}>
         <Icon name="upload" className={style.icon} />
         {children}
       </label>