IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

GrafanaUI: Add aria-label prop to RadioButtonGroup (#67019)

Browse Source 
* Accessibility: Added label prop to RadioButtonGroup

* Update packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Update RadioButtonGroup.tsx

* Update RadioButtonGroup.tsx

* corrected ariaLabel

* fix accessibility

* change to kebab case

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: joshhunt <josh@trtr.co>
This commit is contained in:
Khushi Jain
2023-09-20 17:41:44 +05:30
committed by GitHub
parent 55a4d9b38e
commit 24ac1da817
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
View File

@@ -21,6 +21,7 @@ export interface RadioButtonGroupProps<T> {
fullWidth?: boolean;
className?: string;
autoFocus?: boolean;
['aria-label']?: string;
invalid?: boolean;
}
@@ -36,6 +37,7 @@ export function RadioButtonGroup<T>({
className,
fullWidth = false,
autoFocus = false,
'aria-label': ariaLabel,
invalid = false,
}: RadioButtonGroupProps<T>) {
const handleOnChange = useCallback(
@@ -71,7 +73,11 @@ export function RadioButtonGroup<T>({
}, [autoFocus]);
return (
<div className={cx(styles.radioGroup, fullWidth && styles.fullWidth, invalid && styles.invalid, className)}>
<div
role="radiogroup"
aria-label={ariaLabel}
className={cx(styles.radioGroup, fullWidth && styles.fullWidth, className)}
>
{options.map((opt, i) => {
const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);
const icon = opt.icon ? toIconName(opt.icon) : undefined;