QueryRow: Make toggle actions screen-readers accessible (#67998)

public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx

@@ -5,7 +5,10 @@ import { DataFrame, DataTransformerConfig, TransformerRegistryItem, FrameMatcher
 import { reportInteraction } from '@grafana/runtime';
 import { HorizontalGroup } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
-import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
+import {
+  QueryOperationAction,
+  QueryOperationToggleAction,
+} from 'app/core/components/QueryOperationRow/QueryOperationAction';
 import {
   QueryOperationRow,
   QueryOperationRowRenderProps,
@@ -37,7 +40,7 @@ export const TransformationOperationRow = ({
 }: TransformationOperationRowProps) => {
   const [showDebug, toggleDebug] = useToggle(false);
   const [showHelp, toggleHelp] = useToggle(false);
-  const disabled = configs[index].transformation.disabled;
+  const disabled = !!configs[index].transformation.disabled;
   const filter = configs[index].transformation.filter != null;
   const showFilter = filter || data.length > 1;
 
@@ -85,29 +88,29 @@ export const TransformationOperationRow = ({
     return (
       <HorizontalGroup align="center" width="auto">
         {uiConfig.state && <PluginStateInfo state={uiConfig.state} />}
-        <QueryOperationAction
-          title="Show/hide transform help"
+        <QueryOperationToggleAction
+          title="Show transform help"
           icon="info-circle"
           onClick={instrumentToggleCallback(toggleHelp, 'help', showHelp)}
           active={showHelp}
         />
         {showFilter && (
-          <QueryOperationAction
+          <QueryOperationToggleAction
             title="Filter"
             icon="filter"
             onClick={instrumentToggleCallback(toggleFilter, 'filter', filter)}
             active={filter}
           />
         )}
-        <QueryOperationAction
+        <QueryOperationToggleAction
           title="Debug"
           disabled={!isOpen}
           icon="bug"
           onClick={instrumentToggleCallback(toggleDebug, 'debug', showDebug)}
           active={showDebug}
         />
-        <QueryOperationAction
-          title="Disable/Enable transformation"
+        <QueryOperationToggleAction
+          title="Disable transformation"
           icon={disabled ? 'eye-slash' : 'eye'}
           onClick={instrumentToggleCallback(() => onDisableToggle(index), 'disabled', disabled)}
           active={disabled}

public/app/features/query/components/QueryEditorRow.tsx

@@ -25,7 +25,10 @@ import { selectors } from '@grafana/e2e-selectors';
 import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
 import { Badge, ErrorBoundaryAlert, HorizontalGroup } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
-import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
+import {
+  QueryOperationAction,
+  QueryOperationToggleAction,
+} from 'app/core/components/QueryOperationRow/QueryOperationAction';
 import {
   QueryOperationRow,
   QueryOperationRowRenderProps,
@@ -430,15 +433,15 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   renderActions = (props: QueryOperationRowRenderProps) => {
     const { query, hideDisableQuery = false } = this.props;
     const { hasTextEditMode, datasource, showingHelp } = this.state;
-    const isDisabled = query.hide;
+    const isDisabled = !!query.hide;
 
     const hasEditorHelp = datasource?.components?.QueryEditorHelp;
 
     return (
       <HorizontalGroup width="auto">
         {hasEditorHelp && (
-          <QueryOperationAction
-            title="Toggle data source help"
+          <QueryOperationToggleAction
+            title="Show data source help"
             icon="question-circle"
             onClick={this.onToggleHelp}
             active={showingHelp}
@@ -456,8 +459,8 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
         {this.renderExtraActions()}
         <QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
         {!hideDisableQuery ? (
-          <QueryOperationAction
-            title="Disable/enable query"
+          <QueryOperationToggleAction
+            title="Disable query"
             icon={isDisabled ? 'eye-slash' : 'eye'}
             active={isDisabled}
             onClick={this.onDisableQuery}

public/app/features/query/components/QueryEditorRows.test.tsx

@@ -114,10 +114,7 @@ describe('QueryEditorRows', () => {
     renderScenario({ onAddQuery, onQueryCopied });
     const queryEditorRows = await screen.findAllByTestId('query-editor-row');
     queryEditorRows.map(async (childQuery) => {
-      const duplicateQueryButton = queryByLabelText(
-        childQuery,
-        'Duplicate query query operation action'
-      ) as HTMLElement;
+      const duplicateQueryButton = queryByLabelText(childQuery, 'Duplicate query') as HTMLElement;
 
       expect(duplicateQueryButton).toBeInTheDocument();
 
@@ -135,7 +132,7 @@ describe('QueryEditorRows', () => {
 
     const queryEditorRows = await screen.findAllByTestId('query-editor-row');
     queryEditorRows.map(async (childQuery) => {
-      const deleteQueryButton = queryByLabelText(childQuery, 'Remove query query operation action') as HTMLElement;
+      const deleteQueryButton = queryByLabelText(childQuery, 'Remove query') as HTMLElement;
 
       expect(deleteQueryButton).toBeInTheDocument();