Running Panel sections not accessible at browser zoom

[kulsoomzahra]

This issue was discovered during browser zoom audits.

Context

When Kernels section is expanded, it's hard to access other sections (like Language Server and Terminal) of the Running Panel.

Expected behavior
Our goal is to be able to reach other sections of the Running Panel like for e.g. in VS code.

VSCode.webm

To Reproduce
Steps to reproduce the behavior:

1. Zoom to 400%
2. Open a few notebooks
3. Click on 'Running' tab
4. Expand 'Kernels'
5. Try to reach 'Language Server' or 'Terminal'

Desktop (please complete the following information):

• OS: Linux (Ubuntu)
• Browser: Chrome version 104.0.5112.101

[kulsoomzahra]

Hey! @jtpio
Are you aware of any plans to upstream the expand/collapse functionality of the Running Panel sections to JupyterLab?
I'm asking in an attempt to resolve an accessibility issue in JupyterLab. Thanks!

[jtpio]

Many thanks @kulsoomzahra for opening this issue and for the screenscasts 👍

Are you aware of any plans to upstream the expand/collapse functionality of the Running Panel sections to JupyterLab?

The Running Panel section in Notebook 7 is the same as the one JupyterLab. It was recently updated in jupyterlab/jupyterlab#13074, and Notebook 7 just reuses it as is.

So any fix to this component should be implemented upstream in JupyterLab. Which can then be pulled in Notebook 7 next time the JupyterLab dependency is updated.

[kulsoomzahra]

@jtpio That's great, thanks!

[kulsoomzahra]

Update-1
Something that I tried doing:

1. Identify the .lm-AccordionPanel and put a scroll to it.
2. Modified min-height:auto which helps to scroll the entire length of the .lm-AccordionPanel.
   (Previously it was 328px)

Current scenario:

Scroll.webm

[jtpio]

Thanks @kulsoomzahra! Feel free to open a PR (even as a draft) in JupyterLab if you would like to suggest these fixes 👍

[kulsoomzahra]

I've opened a PR in jupyterlab/jupyterlab#13241, @jtpio thanks for following up! :)