search

klembot / twinejs

Twine, a tool for telling interactive, nonlinear stories
https://twinery.org
GNU General Public License v3.0
2.01k stars 298 forks source link

Make editing passages keyboard accessible #260

Open klembot opened 8 years ago

klembot commented 8 years ago

Originally reported by: Michael Collins (Bitbucket: _mike_collins, GitHub: Unknown)

The UI is mostly keyboard accessible. However, I cannot seem to tab to the passages for editing. It might make sense to put a tabindex on the passage element (or make it a naturally tabable element instead of a div), and trigger the associated focus state and hover edit menu. The "Enter" key should trigger the double click functionality when the passage is highlighted. Aria labels would be nice as well.

When the passage model pops up, if the initial focus state was the title, and then you could tab to the rest of the options, using enter and esc to get in and out of the text body, that would be helpful. Right now, you are trapped in editing the text and pressing esc to close the modal.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

glenrgordon commented 2 months ago

CodeMirror 5 does not have good accessibility support, which is likely why Screen Readers can't access the contents of a passage with character/word/line granularity. Any appetite for upgrading to CodeMirror 6 which is supposed to have better Screen Reader support?

klembot commented 2 months ago

See discussion at https://github.com/klembot/twinejs/issues/957