From 24ac1da817e8a7993879fff0458e1c00d5a95753 Mon Sep 17 00:00:00 2001
From: Khushi Jain <57278642+khushijain21@users.noreply.github.com>
Date: Wed, 20 Sep 2023 17:41:44 +0530
Subject: [PATCH] GrafanaUI: Add aria-label prop to RadioButtonGroup (#67019)

* 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>
---
 .../Forms/RadioButtonGroup/RadioButtonGroup.tsx           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index 208c9b0763f..8c5153180d4 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -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;