Keyboard a11y structure - #787

@Dananji Testing this out locally I'm getting errors when I try to click or activate a structure node by pressing Enter:

times is undefined
./src/services/ramp-hooks.js/useActiveStructure/handleClick<@http://localhost:3003/bundle.js:17279:17

Maybe this PR needs to be updated with similar changes to those in #784?

@Dananji Testing this out locally I'm getting errors when I try to click or activate a structure node by pressing Enter:

times is undefined
./src/services/ramp-hooks.js/useActiveStructure/handleClick<@http://localhost:3003/bundle.js:17279:17

Maybe this PR needs to be updated with similar changes to those in #784?

Yes, I re-based this after #784 was merged, so it messed this work. I work on fixing it 👍

This is working for me now and an improvement to keyboard navigation! A couple things I noticed when testing:

• Right / Left arrow will expand / collapse sections but right / left arrow anywhere else in the structure will + / - 5 sec to the current time. Maybe this is natural with a screen reader but this feels a bit odd needing to know what kind of node is focused in the structure as to how the the right / left arrow keys will work. Maybe a different way of thinking about this is should all nodes be able to be collapsed / expanded?
• I was expecting space bar presses to click links similar to player controls which operate on space bar, enter, or click. (FWIW collapse / expand all sections button is also only activated by enter but I might expect space bar and right / left arrow keys to work there. Also Auto-advance only works with space bar but I might expect enter and right / left arrow keys to work there too.) When the structure is overflowing and scroll bars appear then space bar does a page down in the structure.

Thank you for taking the time to test this @cjcolvar !

Right / Left arrow will expand / collapse sections but right / left arrow anywhere else in the structure will + / - 5 sec to the current time. Maybe this is natural with a screen reader but this feels a bit odd needing to know what kind of node is focused in the structure as to how the the right / left arrow keys will work. Maybe a different way of thinking about this is should all nodes be able to be collapsed / expanded?

I was following the Tree view pattern in W3C and according to that, when focused on end nodes (leaf nodes) the ArrowRight key is suppose to do nothing. But ArrowLeft should move the focus back to its parent node when focused on a child node (in this case leaf nodes).
I had missed the ArrowLeft keypress acton in this implementation. I will add this to the event handler on leaf nodes.

As for making all nodes being able to be collapsed/expanded; I'm sorry, I can't visualize how this is done on an end node (leaf node). Could you please clarify this?

Another solution I can think for this is to catch the ArrowRight event within the focused end node's event handlers and block it from reaching player hotkeys (disable + 5 second jump)?

I was expecting space bar presses to click links similar to player controls which operate on space bar, enter, or click. (FWIW collapse / expand all sections button is also only activated by enter but I might expect space bar and right / left arrow keys to work there. Also Auto-advance only works with space bar but I might expect enter and right / left arrow keys to work there too.) When the structure is overflowing and scroll bars appear then space bar does a page down in the structure.

Yes, the player controls activate on both Enter and Space because they are working as buttons. And I was not considering these links are actually presented as buttons to assistive technology tools. Good catch 💯
I will add Space key to activate all the nodes.
As for ArrowRight, it does activate a collapsible node when focused (loads the media into the player on keypress in addition to Enter key). And ArrowLeft collapses a collapsible section. And both of these does nothing when focused on leaf nodes.

Sorry, this part of the comment is not clear to me. Could you please clarify?
collapse / expand all sections button is also only activated by enter but I might expect space bar and right / left arrow keys to work there portion; I understand why we need Space and ArrowRight keys to work here. Are you suggesting we add ArrowLeft key to do the same when focused?

As for auto-advance toggle, Space is expected key to activate it but can have Enter key optionally to activate it according to 'Switch' design pattern which addresses the accessibility of toggle buttons. I'm not sure about using right and left keys to activate the toggle button. I will create a ticket to add this functionality and investigate on using right and left keys.

New issue for the keyboard accessibility of auto-advance toggle: #796

Thanks for clarifying!

I like the idea of arrow right not doing anything for end nodes and blocking it from advancing the player 5 sec. (Forget about the idea of making all nodes expandable/collapsible. On second thought, I think it would make the UX more confusing and less efficient.)

Looking at the tree view pattern, it seems like right arrow should advance to the first child just like left should go to parent. So for this manifest (https://media.dlib.indiana.edu/media_objects/zg64tm149/manifest.json), I would expect right arrow on Side 1 (when open) to go to Track 1. For your work on nested spans I think right arrow would be able to do more since more hierarchical nodes should be focusable.

For the Collapse/Expand all button, I was thinking it visually looks like a collapsible section node with the icon on the right and thus should maybe behave similarly with right arrow as expand and left arrow as collapse but maybe that is too much and confusing?

For the Collapse/Expand all button, I was thinking it visually looks like a collapsible section node with the icon on the right and thus should maybe behave similarly with right arrow as expand and left arrow as collapse but maybe that is too much and confusing?

Yes, it makes sense to adapt the same keyboard navigation pattern to this button 👍 Since, it's visualized as the root of the structure I don't think it will be confusing. I'll try it out along with the other changes.