A11y: Fix fastpass issues for /explore with gdev-testdata (#40309)

* A11y: Fix fastpass issues for /explore with gdev-testdata

* Chore: changes after PR feedback

* Chore: revert file to main

* Tests: fix for e2e tests

e2e/shared/smokeTestScenario.ts

@@ -14,7 +14,7 @@ export const smokeTestScenario = {
     e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
       .should('be.visible')
       .within(() => {
-        e2e().get('input[id*="scenario-input-"]').should('be.visible').click();
+        e2e().get('input[id*="test-data-scenario-select-"]').should('be.visible').click();
       });
 
     cy.contains('CSV Metric Values').scrollIntoView().should('be.visible').click();

e2e/suite1/specs/exemplars.spec.ts

@@ -9,11 +9,7 @@ const addDataSource = () => {
     form: () => {
       e2e.components.DataSource.Prometheus.configPage.exemplarsAddButton().click();
       e2e.components.DataSource.Prometheus.configPage.internalLinkSwitch().check({ force: true });
-      e2e.components.DataSourcePicker.container()
+      e2e.components.DataSourcePicker.inputV2().should('be.visible').click({ force: true });
-        .should('be.visible')
-        .within(() => {
-          e2e.components.DataSourcePicker.input().should('be.visible').click({ force: true });
-        });
 
       e2e().contains('gdev-tempo').scrollIntoView().should('be.visible').click();
     },
@@ -48,11 +44,7 @@ describe('Exemplars', () => {
 
     e2e.pages.Explore.visit();
 
-    e2e.components.DataSourcePicker.container()
+    e2e.components.DataSourcePicker.input().should('be.visible').click();
-      .should('be.visible')
-      .within(() => {
-        e2e.components.DataSourcePicker.input().should('be.visible').click();
-      });
     e2e().contains(dataSourceName).scrollIntoView().should('be.visible').click();
     e2e.components.TimePicker.openButton().click();
     e2e.components.TimePicker.fromField().clear().type('2021-07-10 17:10:00');

e2e/suite1/specs/explore.spec.ts

@@ -14,7 +14,7 @@ e2e.scenario({
     e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
       .should('be.visible')
       .within(() => {
-        e2e().get('input[id*="scenario-input-"]').should('be.visible').click();
+        e2e().get('input[id*="test-data-scenario-select-"]').should('be.visible').click();
       });
 
     cy.contains('CSV Metric Values').scrollIntoView().should('be.visible').click();

e2e/suite1/specs/panelEdit_queries.spec.ts

@@ -50,7 +50,7 @@ e2e.scenario({
     e2e.components.DataSource.TestData.QueryTab.scenarioSelectContainer()
       .should('be.visible')
       .within(() => {
-        e2e().get('input[id*="scenario-input-"]').eq(0).should('be.visible').click();
+        e2e().get('input[id*="test-data-scenario-select-"]').eq(0).should('be.visible').click();
       });
 
     cy.contains('CSV Metric Values').scrollIntoView().should('be.visible').eq(0).click();

e2e/suite1/specs/query-editor.spec.ts

@@ -8,11 +8,7 @@ e2e.scenario({
   skipScenario: false,
   scenario: () => {
     e2e.pages.Explore.visit();
-    e2e.components.DataSourcePicker.container()
+    e2e.components.DataSourcePicker.inputV2().should('be.visible').click();
-      .should('be.visible')
-      .within(() => {
-        e2e.components.DataSourcePicker.input().should('be.visible').click();
-      });
 
     cy.contains('gdev-prometheus').scrollIntoView().should('be.visible').click();
     const queryText = 'http_requests_total';

e2e/suite1/specs/trace-view-scrolling.spec.ts

@@ -11,11 +11,7 @@ describe('Trace view', () => {
 
     e2e.pages.Explore.visit();
 
-    e2e.components.DataSourcePicker.container()
+    e2e.components.DataSourcePicker.inputV2().should('be.visible').click();
-      .should('be.visible')
-      .within(() => {
-        e2e.components.DataSourcePicker.input().should('be.visible').click();
-      });
 
     e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
 

e2e/suite1/specs/variables/new-query-variable.ts

@@ -82,11 +82,7 @@ describe('Variables - Add variable', () => {
 
     e2e().get('#Description').should('be.visible').clear().type('a description');
 
-    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
+    e2e.components.DataSourcePicker.inputV2().should('be.visible').type('gdev-testdata').type('{enter}');
-      .should('be.visible')
-      .within(() => {
-        e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
-      });
 
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
       .should('be.visible')
@@ -136,11 +132,7 @@ describe('Variables - Add variable', () => {
 
     e2e().get('#Description').should('be.visible').clear().type('a description');
 
-    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect()
+    e2e.components.DataSourcePicker.inputV2().should('be.visible').type('gdev-testdata').type('{enter}');
-      .should('be.visible')
-      .within(() => {
-        e2e.components.DataSourcePicker.input().should('be.visible').type('gdev-testdata').type('{enter}');
-      });
 
     e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput()
       .should('be.visible')

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -209,7 +209,11 @@ export const Components = {
   },
   DataSourcePicker: {
     container: 'Data source picker select container',
+    /**
+     * @deprecated use inputV2 instead
+     */
     input: () => 'input[id="data-source-picker"]',
+    inputV2: 'Select a data source',
   },
   TimeZonePicker: {
     container: 'Time zone picker select container',

packages/grafana-runtime/src/components/DataSourcePicker.tsx

@@ -145,6 +145,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     return (
       <div aria-label={selectors.components.DataSourcePicker.container}>
         <Select
+          aria-label={selectors.components.DataSourcePicker.inputV2}
           inputId="data-source-picker"
           menuShouldPortal
           className={styles.select}

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Icon, renderOrCallToRender, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from '@emotion/css';
@@ -102,10 +102,11 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
     return (
       <Draggable draggableId={id} index={index}>
         {(provided) => {
+          const dragHandleProps = { ...provided.dragHandleProps, role: 'group' }; // replace the role="button" because it causes https://dequeuniversity.com/rules/axe/4.3/nested-interactive?application=msftAI
           return (
             <>
               <div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
-                <div {...provided.dragHandleProps}>{rowHeader}</div>
+                <div {...dragHandleProps}>{rowHeader}</div>
                 {isContentVisible && <div className={styles.content}>{children}</div>}
               </div>
             </>

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -4,13 +4,13 @@ import { useAsync } from 'react-use';
 
 // Components
 import { selectors as editorSelectors } from '@grafana/e2e-selectors';
-import { Input, InlineFieldRow, InlineField, Select, TextArea, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, Input, Select, TextArea } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
-import { StreamingClientEditor, RandomWalkEditor } from './components';
+import { RandomWalkEditor, StreamingClientEditor } from './components';
 
 // Types
 import { TestDataDataSource } from './datasource';
-import { TestDataQuery, NodesQuery, CSVWave, USAQuery } from './types';
+import { CSVWave, NodesQuery, TestDataQuery, USAQuery } from './types';
 import { PredictablePulseEditor } from './components/PredictablePulseEditor';
 import { CSVWavesEditor } from './components/CSVWaveEditor';
 import { defaultCSVWaveQuery, defaultPulseQuery, defaultQuery } from './constants';
@@ -170,12 +170,12 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: Props)
       <InlineFieldRow aria-label={selectors.scenarioSelectContainer}>
         <InlineField labelWidth={14} label="Scenario">
           <Select
+            inputId={`test-data-scenario-select-${query.refId}`}
             menuShouldPortal
             options={options}
             value={options.find((item) => item.value === query.scenarioId)}
             onChange={onScenarioChange}
             width={32}
-            inputId={`scenario-input-${query.refId}`}
           />
         </InlineField>
         {currentScenario?.stringInput && (