CODAP-1341: suppress focus outline on CFM menu list container - #430
Merged
Conversation
React Aria gives the menu list container (.menu-list-container) programmatic keyboard focus when a menu opens. The browser's :focus-visible heuristic resolves that focus inconsistently, and when it resolves true the browser draws its default focus outline around the whole menu container. The container is never a meaningful keyboard focus target -- keyboard users navigate the menu items, which carry their own :focus-visible outline -- so suppress the outline on the container itself. This is the CFM-side counterpart to CODAP PR #2585. That PR fixes the menu drop shadow, which is broken by a CODAP-specific global box-shadow reset and so must be fixed in CODAP. The stray focus outline, however, is a CFM rendering artifact that appears in any host app, so the CFM should own it. Once this ships, the matching outline rule in CODAP PR #2585 becomes redundant. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This was referenced May 21, 2026
Merged
kswenson
added a commit
that referenced
this pull request
Aug 27, 2026
…rt-focus-outline CODAP-1341: suppress focus outline on CFM menu list container (forward-port of #430)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Suppresses the browser's default focus outline on the CFM menu list container (
.menu-list-container).React Aria gives
.menu-list-containerprogrammatic keyboard focus when a menu (File, Settings, Help, …) opens. The browser's:focus-visibleheuristic resolves that focus inconsistently, and when it resolves true the browser draws its default focus outline around the whole menu container. The container is never a meaningful keyboard focus target — keyboard users navigate the menu items, which carry their own:focus-visibleoutline — so this adds a rule to remove the outline on the container itself.Relationship to CODAP PR #2585
CODAP PR #2585 fixes two CFM-menu symptoms that share a root cause:
*:focus:not(:focus-visible) { box-shadow: none !important }). That rule lives only in CODAP, so that fix correctly belongs in CODAP.box-shadow, neveroutline). It is the browser's default UA focus ring on the programmatically-focused container, and it appears in any host app embedding the CFM.This PR addresses the second symptom in the CFM, where it belongs. CFM previously had no
outlinerule on.menu-list-containerat all. Once this ships, the matching.menu-list-container:focus { outline: none }rule in CODAP PR #2585 becomes redundant (the box-shadow exclusion still needs to stay in CODAP).Changes
src/style/components/dropdown-menu.styl:.menu-list-container:focus { outline: none }rule, so it covers both the main menu and submenu containers.Testing
CSS-only change; production build compiles and the rule is present in the emitted
app.css. No automated test added (consistent with CODAP PR #2585).Relates to CODAP-1341. This PR targets
v2.2.x; it can be cherry-picked tomasterlater.🤖 Generated with Claude Code