From fc6afc6b84f317a3cd193c18213d78e0df325b5f Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Fri, 30 Sep 2022 13:03:55 +0200
Subject: [PATCH] Core: Implement aria attributes for query rows, improve a11y
 (#55563)

* feat: add aria-expanded prop

* refactor: remove console.log()

* feat: add aria-controls

* refactor: add id to expendable section

* refactor: create unique id
---
 .../components/QueryOperationRow/QueryOperationRow.tsx     | 2 ++
 .../QueryOperationRow/QueryOperationRowHeader.tsx          | 4 ++++
 public/app/features/query/components/QueryEditorRow.tsx    | 7 ++++---
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
index ae4bb5a1221..5a590f53ce7 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
@@ -104,6 +104,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
               <div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
                 <div>
                   <QueryOperationRowHeader
+                    id={id}
                     actionsElement={actionsElement}
                     disabled={disabled}
                     draggable
@@ -127,6 +128,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
   return (
     <div className={styles.wrapper}>
       <QueryOperationRowHeader
+        id={id}
         actionsElement={actionsElement}
         disabled={disabled}
         draggable={false}
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
index 0591ef13242..3e1873571d7 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
@@ -15,6 +15,7 @@ interface QueryOperationRowHeaderProps {
   onRowToggle: () => void;
   reportDragMousePosition: MouseEventHandler<HTMLDivElement>;
   titleElement?: React.ReactNode;
+  id: string;
 }
 
 export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = ({
@@ -27,6 +28,7 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
   onRowToggle,
   reportDragMousePosition,
   titleElement,
+  id,
 }: QueryOperationRowHeaderProps) => {
   const styles = useStyles2(getStyles);
 
@@ -40,6 +42,8 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
           className={styles.collapseIcon}
           onClick={onRowToggle}
           type="button"
+          aria-expanded={isContentVisible}
+          aria-controls={id}
         />
         {titleElement && (
           <div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 317986803ac..8ae8c463f22 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import classNames from 'classnames';
-import { cloneDeep, filter, has, uniqBy } from 'lodash';
+import { cloneDeep, filter, has, uniqBy, uniqueId } from 'lodash';
 import pluralize from 'pluralize';
 import React, { PureComponent, ReactNode } from 'react';
 
@@ -451,6 +451,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     const { query, id, index, visualization } = this.props;
     const { datasource, showingHelp, data } = this.state;
     const isDisabled = query.hide;
+    const generatedUniqueId = uniqueId(id + '_');
 
     const rowClasses = classNames('query-editor-row', {
       'query-editor-row--disabled': isDisabled,
@@ -467,14 +468,14 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     return (
       <div aria-label={selectors.components.QueryEditorRows.rows}>
         <QueryOperationRow
-          id={id}
+          id={generatedUniqueId}
           draggable={true}
           index={index}
           headerElement={this.renderHeader}
           actions={this.renderActions}
           onOpen={this.onOpen}
         >
-          <div className={rowClasses}>
+          <div className={rowClasses} id={generatedUniqueId}>
             <ErrorBoundaryAlert>
               {showingHelp && DatasourceCheatsheet && (
                 <OperationRowHelp>