style: update the focus outline in the menu item component #29753

matteoscurati · 2025-01-16T15:53:25Z

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.

Related issues

#26728

Manual testing steps

Open the menu
Navigate through the items using the TAB key
Verify that the outline is displayed correctly on the focused item

Screenshots/Recordings

Before

After

https://www.loom.com/share/25a3748a1a8b49e6b3cf617ccf791240?sid=cbe7a8d6-46d9-431a-a0dd-682c6cf209a2

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
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.

github-actions · 2025-01-16T15:53:39Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

metamaskbot · 2025-01-16T16:26:37Z

Builds ready [7fdc4f0]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1715 ± 67 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	285	1984	1566	422	203
		domContentLoaded	1457	2035	1690	143	69
		load	1512	2046	1715	140	67
		domInteractive	26	141	56	32	15
		backgroundConnect	5	85	28	22	11
		firstReactRender	16	101	53	31	15
		getState	4	95	14	21	10
		initialActions	0	1	0	0	0
		loadScripts	1040	1591	1255	129	62
		setupStore	6	76	17	22	10
		uiStartup	1676	2487	2058	239	115

Bundle size diffs [🚀 Bundle size reduced!]

background: -3 Bytes (-0.00%)
ui: -1 Bytes (-0.00%)
common: -1 Bytes (-0.00%)

metamaskbot · 2025-01-20T15:54:02Z

Builds ready [9dea288]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1804 ± 160 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1434	2925	1804	314	151
		domContentLoaded	1428	2808	1762	298	143
		load	1432	3010	1804	333	160
		domInteractive	26	77	38	16	8
		backgroundConnect	6	200	43	45	22
		firstReactRender	16	93	49	30	14
		getState	4	55	16	12	6
		initialActions	0	1	0	0	0
		loadScripts	1020	1646	1276	151	73
		setupStore	6	72	16	19	9
		uiStartup	1694	3529	2154	396	190

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-24T14:52:34Z

Builds ready [ef08de1]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1961 ± 253 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	453	2322	1612	478	230
		domContentLoaded	1422	3662	1925	527	253
		load	1470	3703	1961	526	253
		domInteractive	24	170	64	43	21
		backgroundConnect	9	125	40	33	16
		firstReactRender	16	127	39	28	14
		getState	5	57	16	14	7
		initialActions	0	1	0	0	0
		loadScripts	1000	2671	1428	427	205
		setupStore	6	83	24	24	11
		uiStartup	1756	4382	2270	613	294

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-24T16:20:23Z

Builds ready [cb9d34e]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1664 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1478	1962	1664	125	60
		domContentLoaded	1471	1944	1635	120	58
		load	1477	1967	1664	130	62
		domInteractive	23	78	35	17	8
		backgroundConnect	9	92	33	22	11
		firstReactRender	15	106	33	26	13
		getState	4	52	16	16	8
		initialActions	0	1	0	0	0
		loadScripts	1021	1445	1191	109	53
		setupStore	7	83	16	19	9
		uiStartup	1655	2485	1910	201	97

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-27T15:45:40Z

Builds ready [4cd9527]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1725 ± 97 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1404	2160	1728	200	96
		domContentLoaded	1396	2153	1709	198	95
		load	1404	2158	1725	202	97
		domInteractive	24	105	43	24	11
		backgroundConnect	9	66	19	16	8
		firstReactRender	16	105	60	27	13
		getState	4	67	12	15	7
		initialActions	0	1	0	0	0
		loadScripts	981	1514	1237	163	78
		setupStore	8	71	17	18	9
		uiStartup	1597	2769	2037	291	140

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

style: 💄 update the focus outline in the menu item component

7fdc4f0

matteoscurati self-assigned this Jan 16, 2025

metamaskbot added the team-notifications Notifications team label Jan 16, 2025

Merge branch 'main' into fix/update-focus-outline-menu-item

9dea288

Merge branch 'main' into fix/update-focus-outline-menu-item

ef08de1

Merge branch 'main' into fix/update-focus-outline-menu-item

cb9d34e

Merge branch 'main' into fix/update-focus-outline-menu-item

4cd9527

matteoscurati marked this pull request as ready for review January 27, 2025 15:42

darkwing approved these changes Jan 28, 2025

View reviewed changes

zone-live approved these changes Jan 28, 2025

View reviewed changes

darkwing added this pull request to the merge queue Jan 29, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 29, 2025

matteoscurati added this pull request to the merge queue Jan 29, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 29, 2025

matteoscurati added this pull request to the merge queue Jan 30, 2025

Merged via the queue into main with commit e6eec06 Jan 30, 2025
70 checks passed

matteoscurati deleted the fix/update-focus-outline-menu-item branch January 30, 2025 14:27

github-actions bot locked and limited conversation to collaborators Jan 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style: update the focus outline in the menu item component #29753

style: update the focus outline in the menu item component #29753

matteoscurati commented Jan 16, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Jan 16, 2025

metamaskbot commented Jan 16, 2025

metamaskbot commented Jan 20, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 27, 2025

style: update the focus outline in the menu item component #29753

style: update the focus outline in the menu item component #29753

Conversation

matteoscurati commented Jan 16, 2025 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jan 16, 2025

metamaskbot commented Jan 16, 2025

metamaskbot commented Jan 20, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 27, 2025

matteoscurati commented Jan 16, 2025 •

edited by github-actions bot

Loading