diff --git a/packages/grafana-data/src/types/select.ts b/packages/grafana-data/src/types/select.ts index db659062543..1243b2d0483 100644 --- a/packages/grafana-data/src/types/select.ts +++ b/packages/grafana-data/src/types/select.ts @@ -3,6 +3,7 @@ */ export interface SelectableValue { label?: string; + ariaLabel?: string; value?: T; imgUrl?: string; icon?: string; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 38f98307e47..257255ebdb6 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -4,6 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { css } from '@emotion/css'; import { getPropertiesForButtonSize } from '../commonStyles'; import { getFocusStyles, getMouseFocusStyles } from '../../../themes/mixins'; +import { StringSelector } from '@grafana/e2e-selectors'; export type RadioButtonSize = 'sm' | 'md'; @@ -16,6 +17,7 @@ export interface RadioButtonProps { id: string; onChange: () => void; fullWidth?: boolean; + 'aria-label'?: StringSelector; } export const RadioButton: React.FC = ({ @@ -28,6 +30,7 @@ export const RadioButton: React.FC = ({ name = undefined, description, fullWidth, + 'aria-label': ariaLabel, }) => { const theme = useTheme2(); const styles = getRadioButtonStyles(theme, size, fullWidth); @@ -42,6 +45,7 @@ export const RadioButton: React.FC = ({ id={id} checked={active} name={name} + aria-label={ariaLabel} />