From 890935951bab4498c8d88ff3115e3fbffbf175b0 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 24 Feb 2026 17:28:32 +0100
Subject: [PATCH] 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                           | 7 +++++++
 .changeset/silver-pigs-remain.md                         | 7 +++++++
 packages/ui/src/components/Menu/Menu.module.css          | 9 +++++++++
 .../ui/src/components/RadioGroup/RadioGroup.module.css   | 5 +++++
 packages/ui/src/components/Select/Select.module.css      | 5 +++++
 5 files changed, 33 insertions(+)
 create mode 100644 .changeset/mean-fans-decide.md
 create mode 100644 .changeset/silver-pigs-remain.md

diff --git a/.changeset/mean-fans-decide.md b/.changeset/mean-fans-decide.md
new file mode 100644
index 0000000000..5fe04beb40
--- /dev/null
+++ b/.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
diff --git a/.changeset/silver-pigs-remain.md b/.changeset/silver-pigs-remain.md
new file mode 100644
index 0000000000..d6481f2990
--- /dev/null
+++ b/.changeset/silver-pigs-remain.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added proper cursor styles for RadioGroup items.
+
+**Affected components:** RadioGroup
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 4967d26551..6dca183395 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/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);
diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.module.css b/packages/ui/src/components/RadioGroup/RadioGroup.module.css
index 1a2cd221ca..f6b7de0795 100644
--- a/packages/ui/src/components/RadioGroup/RadioGroup.module.css
+++ b/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;
+    }
   }
 }
diff --git a/packages/ui/src/components/Select/Select.module.css b/packages/ui/src/components/Select/Select.module.css
index 19118acf3c..3a5d066d1d 100644
--- a/packages/ui/src/components/Select/Select.module.css
+++ b/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;