Keyboard interaction with note annotations

[abziegler]

For logged out viewers of annotated resources, note annotations aren't interactive with keyboard. Keyboard tabbing jumps over them.

We should allow notes to be toggled using keyboard only, similar to the way we handle keyboard focus on link annotations.

[rebeccacremona]

Addendum: this is also an unusual experience for screenreader users.

I see the markup is like:

<span data-v-68ab6248="" tabindex="-1" class="selected-text">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Today,
education is perhaps the most important function of state and local
governments. Compulsory school attendance laws and the great
expenditures for education both demonstrate our recognition of the
importance of education to our democratic society. It is required
in the performance of our most basic public responsibilities, even
service in the armed forces. It is the very foundation of good
citizenship. Today it is a principal instrument in awakening the
child to cultural values, in preparing him for later professional
training, and in helping him to adjust normally to his environment.
In these days, it is doubtfu</span>

Generally, tabindex=-1 means that the item is only keyboard focusable if you intentionally set focus there using javascript: the item is not in the tab order and so cannot be tabbed to in the normal way (which Adam ran into).

Because of fanciness I haven't quite worked out right now (probably similar to a Quirks Mode), I am able to focus and "press" the note-hiding text, and I can watch the note display and hide. However, I hear no indication that the text it clickable, or indication what clicking will do, or evidence that it has acted.

I think this is lower priority than the other problems: hiding notes strikes me as less useful than expanding elisions and replacements.

[leppert]

@rebeccacremona The tabindex="-1" is actually a holdover from production (see the highlight here) and I didn't totally understand why it was there so I just left it. Happy to delete if neither you nor @cgruppioni knows either.

[rebeccacremona]

Okay, embarrassed to admit the I added the tabindex of -1 to help with an author-facing problem, and I totally forgot about it. https://github.com/harvard-lil/h2o/pull/382/

Authors were creating annotations, which at that time required a refresh of the page, which of course scrolls the screen to the top, and resets keyboard focus as well... making it very hard to find the newly-created annotation. I added a mechanism to set focus to an annotation via the query string to stop that from happening. The tabindex of -1 makes that code work: ordinarily, you can't set focus onto a span.

I don't know what's needed (if anything) in Vue land to achieve that effect, since a page refresh is no longer necessary. But honestly, I think it's probably premature to work too much on author-facing accessibility: I haven't done ANY testing at all there.

But for students.... @abziegler it's not clear to me that interactive, toggleable notes are a useful feature for students. If designing this from scratch, it makes most sense to me that notes would functionally be just like footnotes/endnotes, except that on large screens, they would be displayed in the fancy way they are now. To see that interaction patter in action, observe how Google Docs handles comments. (I haven't tested their accessibility, I just mean the general pattern).

Perhaps we should discuss that before more time is spent on note-related code?

[leppert]

@rebeccacremona @abziegler I've improved the accessibility of the notes in commit https://github.com/harvard-lil/h2o/commit/fe7bf22fe4200c99d7c190f6e6c8f25ee8bee965, but the show/hide functionality, as @rebeccacremona pointed out, is at odds with it so it's only a marginal improvement until we figure out how to handle or decide to remove the show/hide.