fix: mouse/keyboard interactions of menu/menu-item (DELETE)#2658
Closed
martascorreia wants to merge 7 commits intonextfrom
Closed
fix: mouse/keyboard interactions of menu/menu-item (DELETE)#2658martascorreia wants to merge 7 commits intonextfrom
martascorreia wants to merge 7 commits intonextfrom
Conversation
github-project-automation
Bot
moved this to 📋 Backlog
in Solid Design System Project Board
🦋 Changeset detectedLatest commit: 7206cad The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR 💥 An error occurred when fetching the changed packages and changesets in this PR |
martascorreia
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
|
🚀 Storybook has been deployed for branch |
auroraVasconcelos
moved this from 📋 Backlog
to 👀 In review
in Solid Design System Project Board
auroraVasconcelos
assigned
martascorreia and
auroraVasconcelos and unassigned
auroraVasconcelos
martascorreia
assigned
smfonseca and
MartaPintoTeixeira and unassigned
smfonseca and
MartaPintoTeixeira
martascorreia
temporarily deployed
to
github-pages
GitHub Actions
Inactive
martascorreia
assigned
MartaPintoTeixeira,
smfonseca,
auroraVasconcelos,
mariohamann and
balco0110 and unassigned
MartaPintoTeixeira
4 tasks
smfonseca
reviewed
Jan 12, 2026
| if (menu) { | ||
| const current = menu.getCurrentItem(); | ||
| current?.classList.remove('force-visible-focus'); | ||
| console.log(current); |
| @apply focus-outline outline-offset-[-2px]; | ||
| } | ||
|
|
||
| :host(.force-visible-focus) [part='base'] { |
Collaborator
There was a problem hiding this comment.
I would prefer not to use the word force. Either remove it or call it something like menu-item-focus.
Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com>
martascorreia
temporarily deployed
to
github-pages
GitHub Actions
Inactive
martascorreia
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
|
Please add tests for this, as this fairly hard to reproduce without knowing what the issue was. |
mariohamann
changed the title
martascorreia
moved this from 👀 In review
to 🏗 In progress
in Solid Design System Project Board
2 tasks
martascorreia
changed the title
martascorreia
changed the title
github-project-automation
Bot
moved this from 🏗 In progress
to ✅ Done
in Solid Design System Project Board
martascorreia
added a commit
that referenced
this pull request
Jan 30, 2026
## Description: Closes #2372. Previously this PR: #2658 The problem is related to activation of focus-visible. When we click the dropdown menu with the mouse, the focus is put on the menu-item correctly with "focus", however, the focus-visible that puts the border around the item is not activated. This property only activates after a keyboard event. So for example in Safari, if you do "arrowdown" and then click "arrowright" (or any other key we are not catching), the outline suddenly appears because an event key was propagated. My solution was to force this css to appear, and also remove it when not needed. Please let me know if you know a better way to handle this. ## Definition of Reviewable: - [x] Stories (features, a11y) are created/updated - [X] relevant tickets are linked
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
6 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.
Description:
Closes #2372. The problem is related to activation of focus-visible.
When we click the dropdown menu with the mouse, the focus is put on the menu-item correctly with "focus", however, the focus-visible that puts the border around the item is not activated. This property only activates after a keyboard event. So for example in Safari, if you do "arrowdown" and then click "arrowright" (or any other key we are not catching), the outline suddenly appears because an event key was propagated.
My solution was to force this css to appear, and also remove it when not needed. Please let me know if you know a better way to handle this.
Definition of Reviewable: