fix(ui): CSS accessibility fixes for Menu, Select, and RadioGroup (#32983)

* fix(ui): add focus-visible outlines to Menu and Select

Replace the default browser focus-visible outline with a
consistent ring style using the data-focus-visible attribute
on Menu items and Select options.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* fix(ui): add cursor styles to RadioGroup items

Add pointer cursor to radio items and not-allowed cursor
for readonly state.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

---------

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/mean-fans-decide.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed focus-visible outline styles for Menu and Select components.
+
+**Affected components:** Menu, Select

.changeset/silver-pigs-remain.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added proper cursor styles for RadioGroup items.
+
+**Affected components:** RadioGroup

packages/ui/src/components/Menu/Menu.module.css

@@ -69,6 +69,15 @@
     padding-inline: var(--bui-space-1);
     display: block;
 
+    &:focus-visible {
+      outline: none;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--bui-ring);
+      outline-offset: -2px;
+    }
+
     &[data-focused] .bui-MenuItemWrapper {
       background: var(--bui-bg-neutral-2);
       color: var(--bui-fg-primary);

packages/ui/src/components/RadioGroup/RadioGroup.module.css

@@ -43,6 +43,7 @@
     font-size: var(--bui-font-size-2);
     color: var(--bui-fg-primary);
     forced-color-adjust: none;
+    cursor: pointer;
 
     &:before {
       content: '';
@@ -103,5 +104,9 @@
         background: var(--bui-bg-disabled);
       }
     }
+
+    &[data-readonly] {
+      cursor: not-allowed;
+    }
   }
 }

packages/ui/src/components/Select/Select.module.css

@@ -143,6 +143,11 @@
     gap: var(--bui-space-2);
     outline: none;
 
+    &[data-focus-visible] {
+      outline: 2px solid var(--bui-ring);
+      outline-offset: 2px;
+    }
+
     &[data-focused]::before {
       content: '';
       position: absolute;