Accessibility - Fix code syntax highlighting errors (light mode) - #34376

Looking forward to seeing this!

When you are ready for reviews can you include some screenshots of the before and after look? I think that helps a lot to make it clear what the change looks like and what it should look like. That way if I see something that looks different to the screenshot it is clear that it isn't on purpose.

120 contrast errors testing the Column Transformer with Mixed Types example in WAVE (stable version)

With this PR, 0 contrast errors (please note that I'm testing just one example, not the whole website):

Code syntax highlighting before this PR

Code syntax highlighting after this PR

The remaining error is the empty table header which is a pandas issue. I tried several things and kept getting WAVE errors. Solving it is important: a user with a screen reader loses orientation in the table (with this error).

I tried:

1. naming the index - With Sphinx I get an extra empty row and there are even more errors.
2. reseting the index - a new index gets generated and still an error.
3. Hiding the index is another option - that may not be desirable (?)
   In the 3 cases those commands will be visible on the example and the user may not understand the reason for it.

Screen shot of the table when naming the index:

The 258 warnings are related to actions available only with the mouse.

I like the new look!

One thing that I am wondering about: in the old style light and dark mode as well as in the new style dark mode the output of a cell has a slightly different background colour (background of "R2 score with ability")

With the new style and light mode it looks like this:

What do people think of this? At first it was weird/felt like something was missing, but after looking at a few pages I stopped noticing it. I think if anything we should be consistent across dark and light mode. But I think I am fine with either option (no background colour or with background colour).

Regarding #34376 (comment),
The Pygments white backgrounds are the ones that pass the WAVE test: https://pygments.org/styles/#:~:text=Styles%20with%20a%20lower%20contrast for accessibility.
(The "default" one didn't pass it).

Is there more work you want to do or should we ask for people's opinions/reviews?

Is there more work you want to do?

No, thanks again.

Thanks, @DeaMariaLeon, that is a useful small change!
Does WAVE automatically also check the dark theme (the screenshots you posted are all on light)? monokai is listed among the recommended styles, but since you also had to overwrite a setting in the light theme, it might be useful to check that for dark mode as well?

On the linter failure: You just have to merge main, then it should be green again.

Does WAVE automatically also check the dark theme

No, that is a known limitation.

On the linter failure: You just have to merge main, then it should be green again.

I know. But I thought what's the point if it's going to be merged with main anyway.

that is a useful small change

I don't think that trying to help people with disabilities or visual impairments is a small change.
But there is more work to do.

Does WAVE automatically also check the dark theme

No, that is a known limitation.

But have you checked manually (by switching to dark mode in your browser)?

But I thought what's the point if it's going to be merged with main anyway.

I didn't know a PR can be merged if a test is failing. Sorry for pointing it out then.

I don't think that trying to help people with disabilities or visual impairments is a small change.

I was referring to the small change in code that you found that already made many warnings disappear. I don't understand how you read that into my comment.

Does WAVE automatically also check the dark theme

No, that is a known limitation.

But have you checked manually (by switching to dark mode in your browser)?

Yes, of course. When I set the dark mode on my browser, the report always comes back "light mode".
In their documentation they recommend installing their extension if one needs to check dynamic websites. I avoided installing it because of all my personal data that the tool is able to get.

I also forced the browser dark with the devtools - not only with the icon on the page, but I got the same result from WAVE. So testing dark was not available. There are more tools to test these things, or we can force a page that only has the dark mode (totally eliminating the light mode)... but this needs more investigation/work.

I guess the ultimate and best test would be asking someone who actually has visual issues, or at least use a screen reader in dark mode.

I didn't know a PR can be merged if a test is failing. Sorry for pointing it out then.

Nothing to be sorry about. Maybe it's more safe to do the merge myself like you said. Thanks.

I was referring to the small change in code that you found that already made many warnings disappear. I don't understand how you read that into my comment.

Everybody can get better at communicating. Often, phrases can be interpreted in different ways, that's normal.
But now I have to explain why I read it the way I read it. :-D

To be clear: the warnings were not removed, we still have them and need to be fixed. It needs investigation, but it's not that easy.
What this PR should remove are the errors of contrast whenever there is code in the whole website, even if I only tested one page. (in light mode, like you said).

Let's merge this! It is an improvement to what we have right now. Maybe if we figure out a way to run the audit with dark mode we can make another PR to work on those findings.

It turns out that contrast checks can be done with Firefox, including dark mode.
Moreover, it finds more issues than the WAVE tool (and most other automatic tools, apparently).

From their docs:
"WAVE cannot detect all contrast issues. It does not account for background images, gradients, transparency, etc. It also cannot detect text that is part of an image. A manual scan for these types of contrast issues is still necessary."

So, we still have contrast issues in light mode (on the landing page, logo, etc. -- not in the code highlighting. 🥳).

Dark mode's needs fixing as well.