change: [M3-8468] - Improve action menu styling

[harsh-akamai]

Description 📝

When a user opens the LinodeActionMenu by using their mouse, the first option remain highlighted, even after the user is hovering over a separate option. This can be confusing for our users and negatively impacts accessibility.

It has also been reported that the LinodeActionMenu could use additional visual enhancements during the active state. In particular, when visiting the Linodes landing page, the top of the menu can be difficult to identify for some users because it's aligned with the "Last Backup" column of the Linodes table. This is particularly more evident when a user is using dark mode settings.

Changes 🔄

• Added an eventHandler to change the <MenuItem/> state to focus status onMouseEnter
• Changed the active state color for <MenuItem while in dark mode

Target release date 🗓️

N/A

Preview 📷

• On hovering over menu items

Before	After

|

• Visual enhacement

Before highlight color change	After highlight color change

How to test 🧪

Prerequisites

• Open the website in dark theme

Verification steps

• Navigate to localhost:3000/linodes and click on the <KebabIcon/> for any one of the Linodes
• Ensure that the first item('Power Off` in this case) doesn't remain highlighted when you are hovering over other options
• Verify that the Last Backup Column of the Linodes table is able to be differentiated from the top of the option menu

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 86.98%
Current Coverage: 86.98%

[dwiley-akamai]

Verified focus/hover state and color differentiation improvements ✅

[dwiley-akamai]

Suggested change

	Improve ActionMenu styling ([#10964](https://github.com/linode/manager/pull/10964))
	Improve ActionMenu styling and accessibility ([#10964](https://github.com/linode/manager/pull/10964))

[bnussman-akamai]

I'm wondering if this change could be made in the theme rather than in the component itself.

manager/packages/manager/src/foundations/themes/light.ts

Line 1009 in 518a663

MuiMenuItem: {

[harsh-akamai]

@bnussman-akamai wouldn't it be better to make the change in design-language-system repo since the value of Dropdown.Background.Hover isn't used anywhere else?

https://github.com/linode/design-language-system/blob/main/dist/themes/dark/index.d.ts#L4312

[cpathipa]

Confirming the action menu styles. No regressions were found in dark or light mode.

[bnussman-akamai]

I'm not sure @harsh-akamai

I'm mostly just concerned with one-off styling of the MenuItem. I think in an ideal world, this issue would be fixed in the theme or design-language-system rather than by a stray sx.

If the design-language-system color doesn't make sense and needs updating, we can make the change there!

[harsh-akamai]

Changed the color for active state as the one I chose in the initial commit coincided with the disabled state color.

Initial change	New change

[cypress]

Cloud Manager E2E    Run #6598

Run Properties:   Passed #6598  •  d664f543aa: change: [M3-8468] - Improve action menu styling (#10964)

Project	Cloud Manager E2E
Branch Review	develop
Run status	Passed #6598
Run duration	25m 53s
Commit	d664f543aa: change: [M3-8468] - Improve action menu styling (#10964)
Committer	Harsh Shankar Rao
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	2
Skipped	0
Passing	409
View all changes introduced in this branch ↗︎