Player accessibility improvements.

[FrenjaminBanklin]

Closes #2.

Updated MWDK version.

Added tab indices to numerous elements.

Replaced submit/reset buttons and main game area with a form.

Added keyup event listeners where relevant.

Adjusted ARIA labeling on several components.

Added corresponding focus rules to buttons with hover rules.

Added logic to toggle inert on and off depending on open dialogs.

Added auto-focus logic when canceling a submission to fill more blanks.

Added key bindings to read the entire paragraph or to read the sentence that contains the currently focused blank location and re-read keyboard instructions.

Swapped the 'Submit what I have' and 'Show me what I'm missing' buttons in the submission confirmation dialog to prevent accidental early submissions.

Changed the 'keyup' event listeners on the submission confirmation buttons to 'keypress' to prevent accidental activations if using the Enter key on the 'Submit' button.

[cayb0rg]

Keyboard navigability is 👌🏻. Screenreader accessibility is pretty good for the most part, just noticed a few things with the commands.

• Irrelevant to the task at hand, but the missing gap between “WORD” and “GUESS” on the intro screen bothers me. Maybe something like this:

• The intro screenreader dialog should say “Click to begin” or something similar, and say paragraph instead of phrase for the Ctrl + W command. Giggety went to hell.
• The screenreader instructions should be available in-game as well
• Ctrl + W and Ctrl + T only read out “BLANK” the first time
• Ctrl + T is reading out words between commas, not periods (maybe this is intended)
• Ctrl + W and Ctrl + T don’t appear to read filled out blanks
• Pressing Ctrl + T inside a text field that has some characters in it switches the last two characters on a Mac which appears to override the aria-live region sometimes
• Pressing Ctrl + T or Ctrl + W a second time will not read out anything unless there’s a change in content
• In the demo example, pressing Ctrl + T on the third blank, then pressing Ctrl + W, and then pressing Ctrl + T again will skip the middle part of the sentence
• Reset button should confirm to the screenreader that all blanks were reset after being pressed

Tested on Chrome ver. 115

[FrenjaminBanklin]

It turns out Ctrl + W and Ctrl + T are both OSX system-level key bindings for manipulating text in inputs, which means we can't use them. I've opted for Ctrl + Enter and Ctrl + Space instead, which required changing the main paragraph container from a form back to a div among other things.

After some more consideration of other possible use cases, I'm thinking there's really no reasonable way to tell for sure where any given sentence ends or begins in the entire paragraph. Even under ideal conditions, the moment somebody includes an abbreviation or a title ending with a period the calculus will get thrown off and the readouts won't work any more, so for the time being I've opted to keep the 'whole paragraph' read function and remove the binding to read the sentence associated with the current blank space. I've instead added a keybind to re-read the instructions.

My intention with the 'whole paragraph' function was that it would always read where the blank spaces were, but I can look into potentially updating the readable text each time an editable space is changed. The 'whole paragraph' function now reads the whole paragraph with currently provided values in places where there were previously ;BLANK;s.

[cayb0rg]

Changes look good. Just having Ctrl + Enter and Ctrl + Space I think works great; It’s a good way to get an idea beforehand of what to expect, before moving in to each blank space and using arrow keys to get context. A few more things I noticed:

• Pressing Ctrl + Enter works only once if no changes are made
• Having aria-visible-only instructions somewhere in-game could be good in case the user forgets to Ctrl + Space
• “Use the Tab key to select” may be unnecessary for the “Submit what I have” button since it’s standard navigation, but also, more can't hurt.

[clpetersonucf]

Functional and sensible. The only weirdness I noticed: ctrl + space, used to re-read the instructions, is bound to Spotlight (at least for me), which takes precedence and immediately defocuses the board. I'm not sure what to recommend as an alternative key combination, though. Overall it's a minor issue.

[FrenjaminBanklin]

I've experimented a little bit and tried looking up various operating systems's/browsers' keybinds, and between all of those possibilities and this widget relying on just about every key being usable there really aren't any safe keybinds we can use that won't be hijacked by something, somewhere. To say nothing of any potential custom keybinds.

I think the current keybinds might be as good as we're liable to get, unless somebody more familiar with acceptable custom keyboard macros comes along with a better idea.

[clpetersonucf]

Realized I never circled back around to this one. It's good to ship, IMO, the only other thing I'd recommend is fixing the header text overlapping: