Accessibility: Make either tooltip or aria-label required when no button children present (#109131)

* ensure button must have tooltip/aria-label when no children

* fix violations

* restore some unnecessarily removed labels

* use types instead of interfaces as before

* further fixes

* fix unit test

* commit translations and fix unit test

* upgrade plugin-ui to 0.10.8

* set aria-label + unit tests

packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx

@@ -165,7 +165,7 @@ export const settings: Settings = {
     return (
       <Button
         type="button"
-        title={t('grafana-sql.components.settings.title-button-filter', '{{ buttonLabel }} filter', {
+        aria-label={t('grafana-sql.components.settings.title-button-filter', '{{ buttonLabel }} filter', {
           buttonLabel: buttonProps?.label,
         })}
         onClick={buttonProps?.onClick}

packages/grafana-sql/src/components/visual-query-builder/GroupByRow.tsx

@@ -53,7 +53,7 @@ function makeRenderColumn({ options }: { options?: Array<SelectableValue<string>
           onChange={({ value }) => value && onChangeItem(setGroupByField(value))}
         />
         <AccessoryButton
-          title={t(
+          aria-label={t(
             'grafana-sql.components.make-render-column.render-column.title-remove-group-by-column',
             'Remove group by column'
           )}

packages/grafana-sql/src/components/visual-query-builder/SelectCustomFunctionParameters.tsx

@@ -94,7 +94,7 @@ export function SelectCustomFunctionParameters({
             data-testid={selectors.components.SQLQueryEditor.selectInputParameter}
             addonAfter={
               <Button
-                title={t(
+                aria-label={t(
                   'grafana-sql.components.select-custom-function-parameters.render-parameters.params.title-remove-parameter',
                   'Remove parameter'
                 )}
@@ -127,7 +127,7 @@ export function SelectCustomFunctionParameters({
         variant="secondary"
         size="md"
         icon="plus"
-        title={t('grafana-sql.components.select-custom-function-parameters.title-add-parameter', 'Add parameter')}
+        aria-label={t('grafana-sql.components.select-custom-function-parameters.title-add-parameter', 'Add parameter')}
       />
       <InlineLabel className={styles.label}>)</InlineLabel>
     </>

packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx

@@ -153,7 +153,7 @@ export function SelectRow({ query, onQueryChange, db, columns }: SelectRowProps)
               />
             </EditorField>
             <Button
-              title={t('grafana-sql.components.select-row.title-remove-column', 'Remove column')}
+              aria-label={t('grafana-sql.components.select-row.title-remove-column', 'Remove column')}
               type="button"
               icon="trash-alt"
               variant="secondary"
@@ -167,7 +167,7 @@ export function SelectRow({ query, onQueryChange, db, columns }: SelectRowProps)
         type="button"
         onClick={addColumn}
         variant="secondary"
-        title={t('grafana-sql.components.select-row.title-add-column', 'Add column')}
+        aria-label={t('grafana-sql.components.select-row.title-add-column', 'Add column')}
         size="md"
         icon="plus"
         className={styles.addButton}