Keyboard-only user focus on Jupyter logo is just a vertical line not bounding box around the element they are focused on.

[tonyfast]

Issue Area # 2

• Expectation: All supplementary elements that a user needs to interact with receive keyboard focus and be reached using only the keyboard. (WCAG Criteria 2.1.1 (A))
• Observed:
  • On both light and dark theme, when focused on the Jupyter logo in header, the focus indicator is just a vertical line on the left side. This is not sufficient and needs to either surround the logo or the logo needs to be visually and noticably altered.

[tonyfast]

a#jp-NotebookLogo does not take on the width of the svg contained. adding margin: auto wraps the focus around the logo. the z-index needs to be elevated to see the right side of the focus.

[Cheukting]

While investigating, I also realized the tab stops are a bit messy, the most problematic of all, IMO is that I cannot swap between "FIles" and "Running"... need to be fixed as well (It seems more complicated)

I think it is reported as #6928

[Cheukting]

The logo does not select with tab at all in Firefox

[tonyfast]

@Cheukting thanks for opening #6938!

im not seeing the same tabbing pattern you are. what version are you testing? im on Version: 7.0.0rc0.

The logo does not select with tab at all in Firefox

to be honest, i feel like the logo should be removed from the tabs in general. it doesn't really hold a meaningful action.

[Cheukting]

While investigating, I also realized the tab stops are a bit messy, the most problematic of all, IMO is that I cannot swap between "FIles" and "Running"... need to be fixed as well (It seems more complicated)

I think it is reported as #6928

This one is Chrome:
Version 114.0.5735.133 (Official Build) (arm64)

[tonyfast]

which version of notebook is this happening on?

[Cheukting]

This is what my Firefox does, using:
114.0.2 (64-bit)

As you see, no tab for logo

[Cheukting]

which version of notebook is this happening on?

7.0.0rc0

[tonyfast]

The logo does not select with tab at all in Firefox

the tab order is a calculation from the last place of focus. the logo will not appear in the tab order if focus has been set to an element after it. the logo does appear in the tab index if the tab order is measured for the url location. you'll have to start with focus before the logo to measure its tab stop.

[Cheukting]

Screen.Recording.2023-06-20.at.18.35.36.mov

The logo still does not appear even after selecting the URL first

[tonyfast]

oh wow. yea im still getting the focus line to the left of the logo on firefox. either way i prefer the behavior i'm seeing on your machine haha. i don't think the logo will often get clicked or needs focus. even when you click it, it opens another tree which is not what i would have expected.

[Cheukting]

@tonyfast Unfortunately one of the ui-test on Firefox failed for PR #6938 That's why I was checking it manually in the first place and realized that it happened even on the 7.0rc - I don't know if I know why it failed. If you have experience maybe you can give me a hint over there? Thank you for looking at this with me.