Dark High Contrast Theme for JupyterLab with Improved Sidebar Focus Indication

[m158261]

References

#9399 - although not a direct colorblindness issue, this PR will improve accessibility for people who need higher contrast than the current dark theme provides. Text in the application now complies with WCAG AAA for contrast.

Also included in this PR is better focus indication for users that navigate using the keyboard. This has been improved for the sidebars and accordion panels.

Code changes

Many of the current CSS variables have been changed to meet WCAG AAA for text in all areas of the application.

Focus-visible selectors have been added to improve focus indication on sidebars for users who use keyboard navigation.

One area for improvement would be higher contrast scrollbars. I could not find how to change the colour of the scrollbar thumb. Any input would be much appreciated.

User-facing changes

A new theme will be added to JupyterLab to improve accessibility for people with visual impairments. Focus indication has also been improved for sidebar widgets by adding a border when elements are focus-visible.

New Dark High Contrast Theme

Code colours now meet AAA for contrast

Menu Option for Theme

Advanced settings editor

Improved focus indication for sidebar widgets and accordion panels when using keyboard navigation

Backwards-incompatible changes

None

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[m158261]

Please update galata snapshots

[m158261]

Please update galata snapshots

[m158261]

Please update galata snapshots

[github-actions]

Galata snapshots updated.

[krassowski]

Note: we should investigate if the theme should be able to turn xterm.js minimumContrastRatio.

[gabalafou]

Just putting this down so we have it in writing.

The proposal is to put this in alpha (or release candidate) to gather user feedback before a more general release.

[gabalafou]

Note: we should investigate if the theme should be able to turn xterm.js minimumContrastRatio.

@krassowski could you elaborate on this comment?

[krassowski]

xterm.js has minimumContrastRatio setting; it should be enabled in the high contrast theme to make xterm.js use high contrast mode (this is what VSCode does). This does not need to be done in this PR but it would be a nice addition (the alternative is to open a new issue to track it).

Because the docs link is useless (does not include the docstring), here is the reference:

    /**
     * The minimum contrast ratio for text in the terminal, setting this will
     * change the foreground color dynamically depending on whether the contrast
     * ratio is met. Example values:
     *
     * - 1: The default, do nothing.
     * - 4.5: Minimum for WCAG AA compliance.
     * - 7: Minimum for WCAG AAA compliance.
     * - 21: White on black or black on white.
     */
    minimumContrastRatio?: number;

[m158261]

I am unable to continue working on this PR after March 28, 2024. If further refinements are identified, I welcome any future contributors to pick up and progress the work.

[krassowski]

Improved focus indication for sidebar widgets and accordion panels when using keyboard navigation

This focus indicator is very hard to read. I would use a different colour (white? very bright blue?).

That said, it is a new, accessible theme, which is an improvement over having none. I would say let's merge and iterate. If we are not happy with including it in the 4.2.0 release do to unpolished quality we can disable this plugin by default and flag as experimental option.

[krassowski]

Do we really need this? What do folks think?

[jtpio]

That said, it is a new, accessible theme, which is an improvement over having none. I would say let's merge and iterate. If we are not happy with including it in the 4.2.0 release do to unpolished quality we can disable this plugin by default and flag as experimental option.

Having it in 4.2.0 sounds good. Also it should technically be just a new entry in the theme menu and the command palette, so it's not too much in the way for those who don't want to use it.