cms
cms copied to clipboard
Add high-contrast indicator to active sidebar item
Description
Resolves DEV-372. Also fixes left sidebar edge going offscreen on small screen sizes.
![Shows global and index sidebar navigation with a bar on the left side of the item to show the active page](https://user-images.githubusercontent.com/17525979/178560962-3bbb78d9-04e2-44c4-a129-e45563a659e3.png)
Related issues
DEV-372 Active sidebar button does not meet minimum contrast requirements
Active state has a 1.28:1 contrast ratio for the outline applied to the button
Adding a border of 1px solid #6C84A7 on the selected state would give this component an acceptable contrast in comparison with the other sidebar items
Screen Shot 2022-03-18 at 2.44.38 PM.png
Resolves CMS-063
Wasn’t loving the added indicator strips—they felt a little too noisy—so went with making the entire active nav items high-contrast instead:
![Screenshot of a control panel page, showing that the active global nav item and the active subnav item each have a high-contrast background color, relative to their containers’ background colors.](https://user-images.githubusercontent.com/47792/184251365-828a1adc-61c5-4e66-8003-051331d1f0d8.png)