fix(a11y): update vertical nav selected and hover colors

[andyfeds]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: CDE-2115

What is the new behavior?

To fix the a11y defect the below changes have been made:

• Keep current unselected background colors.
• Update the selected option background to white.
• Hover and active (clicked) colors to be different from one another for light theme. Hover (construction-200). Active (construction-300)

Does this PR introduce a breaking change?

• Yes
• No

Other information

[github-actions]

👋 @andyfeds,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, view a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal Clarity Support space

Thank you,

🤖 Clarity Release Bot

[github-actions]

This PR introduces visual changes: 6cfb203
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout a11y/CDE-2115
git fetch https://github.com/vmware-clarity/ng-clarity.git 6cfb20359f0164c0a3e20f88eeb3d96080d103f3
git cherry-pick 6cfb20359f0164c0a3e20f88eeb3d96080d103f3
git push

[github-actions]

This PR introduces visual changes: c6159c1
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout a11y/CDE-2115
git fetch https://github.com/vmware-clarity/ng-clarity.git c6159c1e4493989663c92933754643b963b568a9
git cherry-pick c6159c1e4493989663c92933754643b963b568a9
git push

[valentin-mladenov]

I have noticed that in light theme --clr-vertical-nav-hover-bg-color and --clr-vertical-nav-active-bg-color are using the same construction-100 color.

[andyfeds]

I have noticed that in light theme --clr-vertical-nav-hover-bg-color and --clr-vertical-nav-active-bg-color are using the same construction-100 color.

Yes, I see that too, will confirm this with Grigor

[Jinnie]

Assigning global colors to --clr-... tokens is a bit controversial.
It requires dark-theme overrides in the component specific _properties.vertical-nav.scss file, which short-circuits any possibility to deliver proper theming through design tokens.
I think we should stick to using --cds-alias-... aliases as immediate assignment to the --clr-... space tokens, and not directly link to global colors.

[andyfeds]

The new cds-alias tokens for the vertical nav have to be added in @cds/core which involves changes to the core version.
As a temporary solution, I've added --cds-alias-... in the temp-overrides.scss file for now and mapped these to the --clr-... space tokens instead of the global variables. Let me know if you see any issues @Jinnie @valentin-mladenov

[github-actions]

This PR introduces visual changes: 5b96551
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout a11y/CDE-2115
git fetch https://github.com/vmware-clarity/ng-clarity.git 5b96551eb58324b96bb297181cedd8091d054ca2
git cherry-pick 5b96551eb58324b96bb297181cedd8091d054ca2
git push

[valentin-mladenov]

LGTM

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.