Skip to content

Commit e6eec06

Browse files
style: update the focus outline in the menu item component (#29753)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** This PR updates the outline style when the user navigates menu items using the TAB key. This ensures the user can clearly identify which item is currently focused. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29753?quickstart=1) ## **Related issues** #26728 ## **Manual testing steps** 1. Open the menu 2. Navigate through the items using the TAB key 3. Verify that the outline is displayed correctly on the focused item ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** https://www.loom.com/share/25a3748a1a8b49e6b3cf617ccf791240?sid=cbe7a8d6-46d9-431a-a0dd-682c6cf209a2 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
1 parent 63b8dab commit e6eec06

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

ui/components/ui/menu/menu.scss

+5
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@
4242
background: var(--color-background-default-hover);
4343
}
4444

45+
&:focus {
46+
outline: 2px solid var(--color-primary-default);
47+
outline-offset: -2px;
48+
}
49+
4550
&__icon {
4651
margin-right: 8px;
4752
grid-row: 1 / span 2;

0 commit comments

Comments
 (0)