Notebook 7 keyboard navigation review: October 12

[isabela-pf]

Welcome to the working PR!

This is the working PR for the Notebook 7 October 12 keyboard navigation workshop! This is where we collaborate during the event before we send a contribution over to the main repo.

For the full info about this event, please visit the event agenda.

How to contribute

⭐ For full info about how to interact with this PR, please visit the How to Participate section of the agenda. Please contribute via suggestions so we can easily review each other's work and give you credit in the commit history!

✏️ If you plan to work on a test, let people know by commenting below. You can do this as a group or as an individual for as many tests as you like. We can have multiple suggestions for the same test, but it would be nice if we spread out to cover more.

📚 If you need a reference for writing markdown, give this Markdown guide a perusal.

❗ If you think anything is missing, let @isabela-pf know and she will add it to the PR.

Review tests in this PR

Find them in the Files changed tab

• Content order @isabela-pf
• Areas to navigate @krassowski
• Keyboard/tab traps @vidartf
• Skip links @ohrely
• Interactive Areas
• Focus @steff456
• Mixed input @gabalafou
• Keyboard shortcuts @afshin

---

If you need anything, please ask @isabela-pf 🌻

[krassowski]

Notes: this is best tested latest HEAD of Notebook which includes jupyter/notebook#6487 so using if it works https://mybinder.org/v2/gh/jupyter/notebook/main?urlpath=tree

[steff456]

Added focus navigation review! 👀

[gabalafou]

This is far from a thorough audit of Mixed Input, these are just some unorganized notes.

• I only covered the first page of Notebook 7 (the one with the two tabs, Files and Running). I did not look into any open notebook files or other documents or parts of the UI.
• Need to do this part of the audit with an actual touch device and not just a simulator. My hope was that I could use the iOS simulator to audit the UI for touch interactions. But I was very surprised when I opened the iPad Air simulator today. It's been a while since I used the iPad simulator. I'm not sure, but I think that in the past the UX made it a bit more obvious that touch events were being simulated. What I remember is that in the past when you dragged your mouse over the simulator window, the mouse pointer icon changed from an arrow icon to a round circle. So I just wasn't sure if I was sending touch events or not. I noticed an option under I/O > Input > Send Pointer to Device. Documentation isn't great. I noticed that when I activate "Send Pointer to Device" then the Notebook UI is aware of where the pointer is (e.g., menus in the top menu bar open when I hover over them). So my guess is that "Send Pointer to Device" is to simulate when you connect an external mouse to the iPad (or use it as a second screen). But the overall takeaway for me is that next time I need to use an actual touch device rather than a simulator, because otherwise there's too much guesswork about what the simulator is actually doing.
• One bizarre thing I noticed is that when I turned on "Send Pointer to Device," I was unable to click between the Files and Running tabs.
• I could also not find a way to switch between those tabs using only the keyboard.
• I could not find a way to use the keyboard for: select all files, sort files by name, sort files by last modified.
• Could not select/unselect file using only keyboard. Multi-select and unselect is also busted.
• Can shutdown kernels from Running using only keyboard.
• Can expand/collapse sections under Running using only keyboard.

For future reference, this is what I was able to accomplish in the 30 minutes or so of time that we had. A lot of time was lost waiting for Binder to load and trying to figure out what the iOS simulator was doing.

[isabela-pf]

Need to add space for general notes or things that could impact all tests.

[isabela-pf]

Having common language to reference could also be helpful.

[isabela-pf]

Maybe this should be on hackmd instead; leverage real RTC?

[isabela-pf]

Good things!

• Binder made it easy!
• Table placeholders were helpful!

[isabela-pf]

Add table of contents to top maybe? To help guide?

[isabela-pf]

Review might be better split by view (ie. what is open, where) or UI region rather than test running over all of it.

[isabela-pf]

Thank you all for your work on this review! I've opened jupyter/notebook #6595 with the full review and a list of major issues I pulled from reading your notes. Feel free to follow the issue if you'd like to stay up to date.

I'm merging this here so we have the history of how this was made and by whom is saved.