Prometheus: Add aria labels on query builder options for screen readers (#111271)

* add aria labels for screen readers on option gorups

* add  translation extraction

packages/grafana-prometheus/src/locales/en-US/grafana-prometheus.json

@@ -413,8 +413,11 @@
         }
       },
       "prom-query-builder-options": {
-        "aria-label-lower-limit-parameter": "Set lower limit for the step parameter",
+        "aria-label-exemplars": "Exemplars switch.",
+        "aria-label-format": "Format combobox",
+        "aria-label-lower-limit-parameter": "Min step text box, set lower limit for the step parameter",
         "aria-label-select-resolution": "Select resolution",
+        "aria-label-type": "Type radio button group",
         "format-options": {
           "label-heatmap": "Heatmap",
           "label-table": "Table",
@@ -438,6 +441,7 @@
         "title-parsing-error-switch-builder": "Parsing error: Switch to the builder mode?"
       },
       "prom-query-legend-editor": {
+        "aria-label-legend": "Legend combobox",
         "label-legend": "Legend",
         "placeholder-select-legend-mode": "Select legend mode",
         "tooltip-legend": "Series name override or template. Ex. {{templateExample}} will be replaced with label value for {{labelName}}."

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.tsx

@@ -112,7 +112,7 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
                 type="text"
                 aria-label={t(
                   'grafana-prometheus.querybuilder.prom-query-builder-options.aria-label-lower-limit-parameter',
-                  'Set lower limit for the step parameter'
+                  'Min step text box, set lower limit for the step parameter'
                 )}
                 placeholder={t('grafana-prometheus.querybuilder.prom-query-builder-options.placeholder-auto', 'auto')}
                 minWidth={10}
@@ -128,13 +128,25 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
                 allowCustomValue
                 onChange={onChangeFormat}
                 options={FORMAT_OPTIONS}
+                aria-label={t(
+                  'grafana-prometheus.querybuilder.prom-query-builder-options.aria-label-format',
+                  'Format combobox'
+                )}
               />
             </EditorField>
             <EditorField
               label={t('grafana-prometheus.querybuilder.prom-query-builder-options.label-type', 'Type')}
               data-testid={selectors.components.DataSource.Prometheus.queryEditor.type}
             >
-              <RadioButtonGroup options={queryTypeOptions} value={queryTypeValue} onChange={onQueryTypeChange} />
+              <RadioButtonGroup
+                options={queryTypeOptions}
+                value={queryTypeValue}
+                onChange={onQueryTypeChange}
+                aria-label={t(
+                  'grafana-prometheus.querybuilder.prom-query-builder-options.aria-label-type',
+                  'Type radio button group'
+                )}
+              />
             </EditorField>
             {shouldShowExemplarSwitch(query, app) && (
               <EditorField
@@ -144,6 +156,10 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
                   value={query.exemplar || false}
                   onChange={onExemplarChange}
                   data-testid={selectors.components.DataSource.Prometheus.queryEditor.exemplars}
+                  aria-label={t(
+                    'grafana-prometheus.querybuilder.prom-query-builder-options.aria-label-exemplars',
+                    'Exemplars switch.'
+                  )}
                 />
               </EditorField>
             )}

packages/grafana-prometheus/src/querybuilder/components/PromQueryLegendEditor.tsx

@@ -117,6 +117,10 @@ export const PromQueryLegendEditor = React.memo<PromQueryLegendEditorProps>(
               width={22}
               onChange={onLegendModeChanged}
               value={legendModeOptions.find((x) => x.value === mode)}
+              aria-label={t(
+                'grafana-prometheus.querybuilder.prom-query-legend-editor.aria-label-legend',
+                'Legend combobox'
+              )}
             />
           )}
         </>