Grafana-ui: Improve a11y for radio button group cursor (#75933)

a11y: radio button group cursor

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@@ -45,7 +45,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
     const styles = getRadioButtonStyles(theme, size, fullWidth);
 
     return (
-      <>
+      <div className={styles.radioOption}>
         <input
           type="radio"
           className={styles.radio}
@@ -61,7 +61,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
         <label className={styles.radioLabel} htmlFor={id} title={description || ariaLabel}>
           {children}
         </label>
-      </>
+      </div>
     );
   }
 );
@@ -77,10 +77,19 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
   const labelHeight = height * theme.spacing.gridSize - 4 - 2;
 
   return {
+    radioOption: css({
+      display: 'flex',
+      justifyContent: 'space-between',
+      position: 'relative',
+      flex: fullWidth ? `1 0 0` : 'none',
+      textAlign: 'center',
+    }),
     radio: css({
       position: 'absolute',
       opacity: 0,
       zIndex: -1000,
+      width: '100% !important',
+      height: '100%',
 
       '&:checked + label': {
         color: theme.colors.text.primary,
@@ -99,8 +108,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
       },
     }),
     radioLabel: css({
-      display: 'inline-block',
-      position: 'relative',
       fontSize,
       height: `${labelHeight}px`,
       // Deduct border from line-height for perfect vertical centering on windows and linux
@@ -111,10 +118,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
       background: theme.colors.background.primary,
       cursor: 'pointer',
       zIndex: 1,
-      flex: fullWidth ? `1 0 0` : 'none',
-      textAlign: 'center',
       userSelect: 'none',
       whiteSpace: 'nowrap',
+      flexGrow: 1,
 
       '&:hover': {
         color: textColorHover,