QueryEditor: Expose aria-labelledby prop, reenable storybook a11y tests (#114925)

* expose aria-label prop, reenable storybook a11y tests

* extract translations

* expose aria-labelledby instead

eslint-suppressions.json

@@ -710,11 +710,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/QueryField/QueryField.story.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/QueryField/QueryField.tsx": {
     "react-prefer-function-component/react-prefer-function-component": {
       "count": 1
@@ -4677,4 +4672,4 @@
       "count": 1
     }
   }
-}
+}

packages/grafana-ui/src/components/QueryField/QueryField.story.tsx

@@ -1,6 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react';
+import { useId } from 'react';
 
 import { TypeaheadInput } from '../../types/completion';
+import { Field } from '../Forms/Field';
+import { Label } from '../Forms/Label';
 
 import { QueryField, QueryFieldProps } from './QueryField';
 
@@ -24,8 +27,6 @@ const meta: Meta<typeof QueryField> = {
         'syntaxLoaded',
       ],
     },
-    // TODO fix a11y issue in story and remove this
-    a11y: { test: 'off' },
   },
   argTypes: {
     query: {
@@ -34,7 +35,16 @@ const meta: Meta<typeof QueryField> = {
   },
 };
 
-export const Basic: StoryFn<typeof QueryField> = (args: Omit<QueryFieldProps, 'theme'>) => <QueryField {...args} />;
+export const Basic: StoryFn<typeof QueryField> = (args: Omit<QueryFieldProps, 'theme'>) => {
+  const id = useId();
+  // have to manually set an id on the label
+  // can't use htmlFor as QueryField is a contenteditable div, not an input
+  return (
+    <Field label={<Label id={id}>Query field</Label>}>
+      <QueryField {...args} aria-labelledby={id} />
+    </Field>
+  );
+};
 
 Basic.args = {
   onTypeahead: async (_input: TypeaheadInput) => ({

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -25,6 +25,7 @@ import { makeValue, SCHEMA } from '../../utils/slate';
 
 export interface QueryFieldProps extends Themeable2 {
   additionalPlugins?: Plugin[];
+  ['aria-labelledby']?: string;
   cleanText?: (text: string) => string;
   disabled?: boolean;
   // We have both value and local state. This is usually an antipattern but we need to keep local state
@@ -201,7 +202,7 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
   }
 
   render() {
-    const { disabled, theme } = this.props;
+    const { disabled, theme, ['aria-labelledby']: ariaLabelledby } = this.props;
     const wrapperClassName = classnames('slate-query-field__wrapper', {
       'slate-query-field__wrapper--disabled': disabled,
     });
@@ -214,6 +215,7 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
             ref={(editor) => {
               this.editor = editor;
             }}
+            aria-labelledby={ariaLabelledby}
             schema={SCHEMA}
             autoCorrect={false}
             readOnly={this.props.disabled}