Fixes LMS-1740 by activating the zooming diagram with the spacebar.

[davestgermain]

The zooming diagram has some accessibility problems. Diagrams with text like the one in the demo course should probably be vector images that can be zoomed with the browser or OS's native assistive tech.

But one bug that we can fix is activating the loupe using the keyboard. You still need to use the mouse to navigate around the image, though.
@Lyla-Fischer @frrrances

[Lyla-Fischer]

Would it be bad to use the arrow keys to navigate around the image?

[davestgermain]

I don't think it's possible to use the keyboard to move the cursor using javascript. It might be possible to have a keyboard alternative to the current loupe, but it would involve replacing or rewriting the jquery component that's being used there. (and it still would be useless to blind people)

Didn't somebody recently submit/suggest a new component that replaces the zooming diagram with a fullscreen display of the image?

[marcotuts]

@caesar2164 I think would know the answer to your last question @davestgermain. Additionally, I believe Giulio was originally responsibly for this contribution, so his perspective would be helpful to have for potential a11y improvements.

[frrrances]

Actually, there are two "zooming" image components:

1. this one which can show a different, more detailed view, of an image, which is good for doing something like showing the molecules involved in chemical reaction
2. the one @caesar2164 developed which just shows a big version of the same image as large as can fit into the browser window, which is good for doing something like showing a big version of a comic book page so you can read the words

I believe this fix is for number 1 and the recent fix was for number 2. I can't think of a quick way to fix this one as the valuable information is in the linking of particular parts of the zoomed and small images together. Perhaps the small image could have hotspots links to parts of the detailed zoomed image?

[marcotuts]

@davestgermain - given the limitations of relying on an existing jquery component I would suggest merging this keyboard activation fix along with an additional backlog story for exploring how this component might be rewritten (or sourced via a different plugin) in order to be more accessible.

It may be that there exists a jquery plugin that uses client-side "usemap" attributes to define active/selectable/focusable regions within an image, but a quick search didn't yield an easy winner unfortunately. (reference: http://www.w3.org/TR/WCAG10-HTML-TECHS/#image-maps)

Let me know if you think that makes sense, as it lets us merge this bug for now. ( 👍 )