Lack of focus ring or other visual focus indicators in "Top 3", "Top 5" or "All" dropdown in adoption insights

[christoph-jerolimov]

Description of problem:

When the user wants use the keyboard to change if the user wants see the top 3, 5, or "All" catalog entities in the adoptions insights plugin, the user doesn't see any visual indicator for the focus.

Steps to Reproduce

1. In workspaces/adoption-insights run yarn install
2. In workspaces/adoption-insights run yarn start to start the Backstage app
3. Open the browser (use playwright-cli when possible) http://localhost:3000
4. Navigate to Adoption insights page
5. There is a card called "Top 3 catalog entities"
6. In the card footer there is a dropdown, select or menu that shows "Top 3", the user can select "Top 3", "Top 5" or "All".

Actual results:

The user can change the value with a mouse click but not via keyboard.

In addition to the issue mentioned above (need to press tab in order to change the selection, while the menu is open), the toggle buttons in the select menu have their keyboard focus styles removed, making it hard to use via keyboard

Expected results:

If the user tries to change the value via the keyboard it doesn't show an indicator.

Focus ring appears on focus. Ideally this menu should not be themed at all (the theme package should theme components, not plugins)

[fullsend-ai-triage]

🤖 Finished Triage · ✅ Success · Started 11:19 AM UTC · Completed 11:21 AM UTC
Commit: 94d1d9a · View workflow run →

[fullsend-ai-triage]

Thanks for filing this accessibility issue. The affected component is clear (the "top [3, 5, 10, 20]" Select menu in adoption insights), and the expected behavior (visible focus ring on keyboard focus) makes sense.

However, the reproduction steps are currently unfilled. Could you provide a screenshot or short screen recording showing the missing focus indicators? This would help clarify exactly which elements are affected and what the current rendering looks like when navigating via keyboard — especially since this issue references a related keyboard navigation concern in #3550.

---

Labels: This is an accessibility bug in the adoption-insights workspace, filed by a team/pai maintainer.

[fullsend-ai-triage]

🤖 Finished Triage · ✅ Success · Started 10:17 AM UTC · Completed 10:21 AM UTC
Commit: b57a430 · View workflow run →

[fullsend-ai-triage]

Triage Summary

Severity: Medium · Category: Accessibility bug (WCAG 2.4.7)

Problem

The toggle buttons inside the "Top N" Select menu in adoption insights lack visible focus indicators when navigated via keyboard. Users can change the value with a mouse but receive no visual feedback when using keyboard navigation.

Root Cause Hypothesis

The RHDH theme package likely overrides or strips default focus ring styles (outline, box-shadow) from MUI ToggleButton/Select components used in the plugin. As noted, the theme package ideally should not style plugin-level components.

Reproduction

1. Run the adoption-insights workspace locally (yarn install && yarn start)
2. Navigate to the Adoption Insights page
3. Tab to the "Top 3" dropdown in the catalog entities card footer
4. Navigate between menu items via keyboard
5. Observe no visible focus indicator on the active item

Recommended Fix

Restore focus-visible styles on the ToggleButton/Select items in the dropdown. Investigate whether the theme is stripping these styles and consider scoping theme overrides to avoid plugin-level components.

Related

• Adoption insights header dropdown menu is not intuitive to use via keyboard #3550 tracks a separate keyboard navigation concern (arrow key behavior) in the same component.

Proposed Test Case

Render the adoption insights Select menu component.
Simulate keyboard Tab navigation through the Top 3 / Top 5 / All items.
Assert each item shows a visible focus indicator (outline/box-shadow) when focused.
Verify the RHDH theme does not override focus-visible styles.

Previous run

Triage Summary

Severity: Medium · Category: Accessibility bug

Problem

The toggle buttons inside the "top [3, 5, 10, 20]" Select menu in adoption insights lack visible focus indicators when navigated via keyboard. This violates WCAG 2.4.7 (Focus Visible) and makes the component unusable for keyboard-only users.

Root Cause Hypothesis

The theme package appears to override or strip default focus ring styles from components within plugins. The Select menu items likely have their outline or focus-related CSS removed by the theme.

Reproduction

1. Navigate to the adoption insights page
2. Open the "top N" Select menu
3. Use Tab to move between menu items
4. Observe no visible focus indicator on the active item

Recommended Fix

Investigate the theme's CSS overrides affecting focus styles on Select/ToggleButton components in the adoption-insights workspace. Restore focus-visible styles. As noted in the issue, consider whether the theme package should avoid styling plugin-level components.

Related

• Adoption insights header dropdown menu is not intuitive to use via keyboard #3550 tracks a separate keyboard navigation concern in the same component (arrow key behavior).

Proposed Test Case

Render the adoption insights Select menu component.
Simulate keyboard Tab navigation through menu items.
Assert each item shows a visible focus indicator (outline/box-shadow) when focused.
Verify the RHDH theme does not override these focus styles.

---

Labels: Adding adoption-insights and team/pai labels to match repo conventions for this workspace's accessibility bug.

[fullsend-ai-coder]

🤖 Finished Code · ✅ Success · Started 10:23 AM UTC · Completed 10:43 AM UTC
Commit: b57a430 · View workflow run →