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

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}

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">