Steps to replicate the issue (include links if applicable):

• Go to https://en.wikipedia.org/ or any other wiki with the Vector 2022 skin
• Search for something in the header search bar, then click that article to visit the page
• Search for the same thing until you see it in the menu
• Hover over the menu item

What happens?:

The title is color-link--visited--hover:

What should have happened instead?:

Text should remain color-base based on Codex MenuItem styles

What's happening

Vector 2022 applies the Codex link mixin to most links via this selector:

a:where( :not( [ role='button' ] ) ) {
	.cdx-mixin-link-base();
}

That mixin applies a color style to &:visited:hover, which overrides the following style from the Codex MenuItem component:

.cdx-menu-item--enabled {
    &,
    .cdx-menu-item__content {
        color: @color-base;
    }
}

Options

Fix it in Vector

Vector already excludes elements with role="button" from the link mixin styles to account for anchor elements with Codex button classes applied to them to style the links as buttons (see T367844). We could add another :not() selector like so:

a:where( :not( [ role='button' ] ):not( .cdx-menu-item__content ) ) {
	.cdx-mixin-link-base();
}

I wouldn't recommend this since the specificity of the link styles is what led to this problem in the first place, and we'd just be applying a bandaid for every exception to the link styles. The next exception that arises would mean another :not selector.

We could add styles for .cdx-menu-item__content to undo the styles from the link mixin, but adding styles then undoing them seems verbose and unmaintainable.

Fix it in Codex

This seems like the better solution since this is a Codex issue at its core - the problem is the link mixin itself, not the somewhat specific selector in Vector to which the mixin is applied (this problem persists if you remove the existing :not( role="button" ) selector).

We could either make the selector in CdxMenuItem that applies the color more specific:

.cdx-menu-item--enabled {
    &,
    &.cdx-menu-item .cdx-menu-item__content {
        color: @color-base;
    }
}

...or specifically add styles for the hover and/or visited states to reset the color to color-base:

.cdx-menu-item--enabled {
    &,
    .cdx-menu-item__content,
    .cdx-menu-item__content:hover {
        color: @color-base;
    }
}

I think the latter is more specific to this issue and therefore clearer.

Acceptance criteria

• When the link mixin is applied to all anchor elements, visited links in TypeaheadSearch are color-base on hover
• No other link or MenuItem styles are affected