Demo selected state bookend

[taysea]

Deploy Preview

What does this PR do?

Demoing how we could use box-shadow for the selected state "bookend" since the background color alone wouldn't have enough contrast with the unselected background color.

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Screen.Recording.2024-07-26.at.1.42.43.PM.mov

Screen.Recording.2024-07-26.at.1.42.27.PM.mov

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[oliverHPE]

Thanks @taysea

To meet the guidelines for minimum contrast as found here: https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Contrast_(Minimum), let's make the width of the shadow 3px. That way the bookend would be considered thick (3 css pixels), and therefore the color contrast minimum would need to be 3 : 1, which the strong selected color is as measured against white.

[taysea]

To meet the guidelines for minimum contrast as found here: https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Contrast_(Minimum), let's make the width of the shadow 3px. That way the bookend would be considered thick (3 css pixels), and therefore the color contrast minimum would need to be 3 : 1, which the strong selected color is as measured against white.

Updated!

[oliverHPE]

Looks good.