transition header element to div.header for accessibility

[tonyfast]

References

these changes remediate overlapping issues mentioned in #9491 #9399 #9622

these changes complement those in #9622 by @marthacryan and effect different files.

Code changes

there are <header> tags that impact usability with assistive devices. these changes use <div class="header"> as an alternative. the css style are updated accordingly.

User-facing changes

There are no visual impacts on this PR, only benefits to folks with assistive devices.

Backwards-incompatible changes

🤷

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[marthacryan]

Code LGTM - @manfromjupyter Do you want to try out the changes?

[goanpeca]

Thanks for working on this @tonyfast 🎉

[manfromjupyter]

@marthacryan I will gladly test it. Can jump on it in 2-3 hours probably.

@tonyfast At a glance just from a UI/UX point of view I feel like header shouldn't be a class but it technically breaks no rules. In my mind it should be actual headings ex. <h2>'s probably so screenreaders can jump around by heading and it's better and more accurate HTML anyway, not just everything styled to look like it. If we were insistent on using classes, that's fine, just think a more detailed classname might want to be used, ex. .left-stack-panel-header or .side-header or something else. Or... perhaps more ideally an h2 and said class name so this can be styled independently from other site <h2> 's

[manfromjupyter]

@tonyfast I tested it and all works for accessibility with the exception of the debugger panel that I don't have in default Jupyter but has that same <header> improper html in there. They also already have a <h2> there so need to consolidate and do some cleanup there probably if the header providers no additional benefit or convert those specific ones to divs.

Also the top section has one as well for some reason:

The rest is fine in terms of accessibility landmarks but could improve the experience for screenreaders by switching those divs to headings (e.g. <h2> 's) and then have a class on there for stylesheets and theme to easily customize for.

[tonyfast]

more detailed classname might want to be used, ex. .left-stack-panel-header or .side-header or something else. Or... perhaps more ideally an h2 and said class name so this can be styled independently from other site <h2> 's

totally agree we can have better names. a few of these headers have h2s in them. maybe one of the jupyter folks have better naming suggestions, i'm happy to make the changes.

for accessibility with the exception of the debugger panel that I don't have in default Jupyter but has that same <header> improper html in there. They also already have a <h2> there so need to consolidate and do some cleanup there probably if the header providers no additional benefit or convert those specific ones to divs.

darn! i thought i found them all! thanks for catching @manfromjupyter i pushed these changes to the debugger package.

[manfromjupyter]

@tonyfast that region in terms of classes/ids is only uniquely labeled as the "Left stack" but agree the suggestion doesn't look great lol.

Thank you for the debugger changes :)

[isabela-pf]

Speaking without any authority, .left-stack-panel-header doesn't feel too far off in terms of names. Taking a look, it seems like this might need a jp prefix, and I agree with @manfromjupyter that since left-stack is unique to the area it would make sense to continue that label where relevant.

Thanks for working on this @tonyfast and thanks to everyone else for reviewing it!

[tonyfast]

Speaking without any authority, .left-stack-panel-header doesn't feel too far off in terms of names. Taking a look, it seems like this might need a jp prefix, and I agree with @manfromjupyter that since left-stack is unique to the area it would make sense to continue that label where relevant.

agree that the prefix would be good to add. i think one of the things i want to avoid are spatial or any cardinal references because the side bars could be configured on the left or right.

[manfromjupyter]

@tonyfast Agree, and smart. Perhaps just stack-panel-header or stack-header?

[telamonian]

LGTM! nice work tony

[telamonian]

@manfromjupyter The code changes look clean enough to me, so if you think this PR I'll merge it in

[manfromjupyter]

@telamonian Other than the debugger fixes that I think @tonyfast may have already submitted, it looks great. Thank you guys!

[telamonian]

the debugger fixes

@manfromjupyter Thanks for pointing that out. I just checked the debugger panel, and it looks like a bit of styling was left out:

I'll try and fix that right now

[telamonian]

i fixed the titles in the debugger panels. i'll pull the PR in as soon as the CI runs