ActionMenu does not have hover styles in Dark high contrast theme

[siddharthkp]

Description

high-contrast-hover.mov

Steps to reproduce

1. Go to https://primer.style/react/ActionMenu
2. Change theme to Dark high contrast
3. Hover on menu items

Version

v35.12.0

Browser

Chrome

[tallys]

@siddharthkp let's prioritize a fix for a11y sake

[factscub]

i would like to solve this issue. please assign.

[lesliecdubs]

Hi @factscub, this one is already assigned to a Primer React maintainer but if you'd like to give it a go, feel free to submit a PR for consideration.

[electron97]

Hey @joshblack, @tallys, @siddharthkp,

I started looking into this issue as it was open for some time now. Below are the following details.

Currently the background of the ActionMenu is set to ${get('colors.canvas.overlay')} which is equivalent to overlay: get('scale.gray.8'). Here the overlay value is set to scale.gray.8 now if we see the hover background of ActionListItem which is all the elements in the ActionMenu we can see it has a background of scale.gray.8 as well. So since both has the same background the ActionMenu doesn't have hover styles. So to fix this we can do few things.

1. We can change the hoverBg of ActionListItem over here from scale.gray.8 to scale.gray.6. But doing this it can change the default hover style behaviour of the ActionListItem and also this change isn't required where the component containing ActionListItem doesn't have a background of scale.gray.8.

2. We can add a new variant over here along with default and danger which can be named as actionMenu and then we can add something like .

actionMenu: {
   // this can be change to any other value but keeping it different here from bg which is scale.gray.8 
   // so that hover works
    hoverBg: get('scale.gray.4'),
    activeBg: get('scale.gray.6'),
}

Since activeBg is also dependent on variant here we need to add that as well. All the available dark_high_contrast scale gray colors can be found here.

And then we can add this new variant in ActionMenu.stories, ActionMenu.examples, ActionMenuStories.featues and this way we can fixed the hover of ActionMenu component without affecting any other component which uses ActionListItem.

Please let me know what you guys think about this or if you guys have any better suggestions to handle this will be really great.

Thanks!