Dark High Contrast Theme for JupyterLab with Improved Sidebar Focus Indication #15623
Conversation
|
Thanks for making a pull request to jupyterlab! |
github-actions
bot
added
documentation
pkg:application
pkg:shortcuts
pkg:ui-components
tag:CSS
|
Please update galata snapshots |
|
Please update galata snapshots |
|
Please update galata snapshots |
|
Galata snapshots updated. |
m158261
force-pushed
the
high-contrast-theme
branch
from
9436c59
to
9cbcb34
Compare
|
Note: we should investigate if the theme should be able to turn xterm.js |
|
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. |
@krassowski could you elaborate on this comment? |
|
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; |
|
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. |
There was a problem hiding this comment.
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.
| /** | ||
| * Set JupyterLab theme to Dark High Contrast | ||
| */ | ||
| async setDarkHighContrastTheme(): Promise<void> { | ||
| await this.setTheme('JupyterLab Dark High Contrast'); | ||
| } | ||
|
|
There was a problem hiding this comment.
Do we really need this? What do folks think?
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. |
…ndication (jupyterlab#15623) * Added a high contrast dark theme * Updated variables to improve contrast and improved focus indication on sidebars * Added a test for toggling high contrast theme * Changed theme name * Updated versions in package.json * Update Playwright Snapshots * Update version numbers in package.json * Updated snapshots * Update package.json * Update package.json * Update package.json * Update package.json - missed quotation marks * Update package.json version numbers * Update package.json * Made naming more consistent * Updated naming in test helpers * Update package.json * Update package.json --------- Co-authored-by: EC2 Default User <m158261@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
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