What's The Problem?

Accessibility concern for "Get Code" text in right sidebar widgets when toggling dark mode. When the sidebar widget containing a link to the GitHub repo gets updated, the parent container <div class="right-pane-widget--container desktop-only"> background isn't updated to inherit from body.dark and instead keeps its light background.

p.s. I wasn't sure if this repo was the correct place to raise an issue regarding the docs site, my apologies if the issue needs to be transferred.

Steps To Reproduce

  1. Navigate to https://spring.io/guides/gs/consuming-rest/
  2. Toggle the dark mode
  3. See right sidebar widget text "Get Code" become very unreadable due to very low contrast ratio (white text on light background)

Screenshots

Screen Shot 2022-05-14 at 1 06 42 AM

Contrast

Screen Shot 2022-05-15 at 10 14 37 PM

Solution

Select the widget container and update its background to use the same background #1b1f23 as the .dark class.

body[class=dark] .right-pane-widget--container {
    background: #1b1f23;
    /* or background: inherit; */
}

Or update the existing selector #guide main .right-pane-widget--container when body[class=dark] to maintain the higher specificity selector rules.

Expected Result: Screen Shot 2022-05-14 at 1 35 21 AM

Comment From: wilkinsona

Thanks for raising this, @tannerdolby. Unfortunately, as you suspected, this isn't the right place as the spring.io website is not part of the Spring Boot project. https://github.com/spring-io/sagan is the correct repository. It's in a separate GitHub organization which means we can't transfer the issue. Could you please open an issue in the Sagan repository?

Comment From: tannerdolby

No problem, @wilkinsona. Thank you for the clarification. I've opened a new issue in the Sagan repository.

Comment From: wilkinsona

Thanks, @tannerdolby.