From 6a720f96f715f1cd558da2f9dbf44cc5637ff519 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 8 Feb 2023 14:17:15 +0000
Subject: [PATCH] A11y: ignore rule since keyboard interaction is already
 handled (#62850)

* Revert "Accessibility: Remove unnecessary onClick from title element (#59696)"

This reverts commit f19b07c0bc096ac6190cc71ec1f8baa1f87da061.

* ignore eslint rule
---
 .../QueryOperationRow/QueryOperationRow.test.tsx   |  2 +-
 .../QueryOperationRow/QueryOperationRowHeader.tsx  | 14 +++++++-------
 .../app/features/inspector/InspectDataTab.test.tsx |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx
index 3a3db9e0527..2efdd6a2729 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx
@@ -32,7 +32,7 @@ describe('QueryOperationRow', () => {
       const onCloseSpy = jest.fn();
       setup({ isOpen: false, onOpen: onOpenSpy, onClose: onCloseSpy });
 
-      const queryRow = screen.getByRole('button', { name: /^test-title$/ });
+      const queryRow = screen.getByText(/^test-title$/);
       expect(queryRow).toBeInTheDocument();
 
       // open row on click
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
index 76df2471d05..612dbb5076d 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
@@ -1,5 +1,4 @@
 import { css, cx } from '@emotion/css';
-import { useId } from '@react-aria/utils';
 import React, { MouseEventHandler } from 'react';
 import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
@@ -32,7 +31,6 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
   id,
 }: QueryOperationRowHeaderProps) => {
   const styles = useStyles2(getStyles);
-  const titleId = useId();
 
   return (
     <div className={styles.header}>
@@ -46,13 +44,13 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
           type="button"
           aria-expanded={isContentVisible}
           aria-controls={id}
-          aria-labelledby={titleId}
         />
         {title && (
-          <div className={styles.titleWrapper}>
-            <div id={titleId} className={cx(styles.title, disabled && styles.disabled)}>
-              {title}
-            </div>
+          // disabling the a11y rules here as the IconButton above handles keyboard interactions
+          // this is just to provide a better experience for mouse users
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+          <div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">
+            <div className={cx(styles.title, disabled && styles.disabled)}>{title}</div>
           </div>
         )}
         {headerElement}
@@ -114,11 +112,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: flex;
     align-items: center;
     flex-grow: 1;
+    cursor: pointer;
     overflow: hidden;
     margin-right: ${theme.spacing(0.5)};
   `,
   title: css`
     font-weight: ${theme.typography.fontWeightBold};
+    color: ${theme.colors.text.link};
     margin-left: ${theme.spacing(0.5)};
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/public/app/features/inspector/InspectDataTab.test.tsx b/public/app/features/inspector/InspectDataTab.test.tsx
index 547fb927abf..0dc821cb758 100644
--- a/public/app/features/inspector/InspectDataTab.test.tsx
+++ b/public/app/features/inspector/InspectDataTab.test.tsx
@@ -50,14 +50,14 @@ describe('InspectDataTab', () => {
     });
     it('should show available options', async () => {
       render(<InspectDataTab {...createProps()} />);
-      const dataOptions = screen.getByRole('button', { name: /Data options/i });
+      const dataOptions = screen.getByText(/Data options/i);
       await userEvent.click(dataOptions);
       expect(screen.getByText(/Show data frame/i)).toBeInTheDocument();
       expect(screen.getByText(/Download for Excel/i)).toBeInTheDocument();
     });
     it('should show available dataFrame options', async () => {
       render(<InspectDataTab {...createProps()} />);
-      const dataOptions = screen.getByRole('button', { name: /Data options/i });
+      const dataOptions = screen.getByText(/Data options/i);
       await userEvent.click(dataOptions);
       const dataFrameInput = screen.getByRole('combobox', { name: /Select dataframe/i });
       await userEvent.click(dataFrameInput);