Reading list contrast too low, even when focused

Filling out State of CSS Survey 2023: https://survey.devographics.com/en-US/survey/state-of-css/2023/hfg5V70I2tPvW2i5wgy1V/13

To reproduce:

Add an item to your reading list
using only the keyboard to navigate, navigate into the reading list

What should happen: The text contrast should immediately improve, just as if I had hovered it with my mouse.

What actually happens: If I am using a keyboard or keyboard proxy (voice, touch, gaze) to move focus into the list, I cannot get the text contrast to improve so I can read it. Ideally, I should not have to interact at all to be able to read it.

More detail: The reading list by default is partially transparent (via opacity):

.reading-list-summary {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  opacity: .3;
  transition: all .3s ease-in;
}

In practice, that makes the text color #5A5C5C on #212424, which has a 2.3:1 contrast ratio.

When the user hovers it, then the text becomes fully opaque (giving it a 12.1 contrast ratio):

.reading-list-summary:hover {
  opacity: 1;
}

This requires a mouse or similar fine pointer.

Potential fix: Ideally never reduce the contrast. Otherwise, add a :focus-within selector so the opacity changes when a user puts keyboard focus into the list:

.reading-list-summary:hover, .reading-list-summary:focus-within {
  opacity: 1;
}

Platform: Firefox 114 / Windows 11

WCAG failure: This constitutes a WCAG SC 1.4.3 Contrast (Minimum) (Level AA) failure.

Image demonstration: This image demonstrates the reading list with focus on one of its items versus the same scenario but with the proposed fix.

A list of light gray text on dark gray, where one of the items has an X that has focus; the same list but now as much more legible white text.

Finally: I love this feature, BTW. Great way to queue up information for the things that surprise me while I am doing the survey.

Devographics / Monorepo

Reading list contrast too low, even when focused #239