Player accessibility

[cayb0rg]

Player accessibility changes

• Makes various objects inert/aria-hidden when certain dialogs are open or checkboxes are checked
• Adds aria-labels to everything
• Makes display options an aside, hence why the screenreader says "complementary"
• Updates JSXGraph so that points can be given tab indices *
• Adds Tone.js - graph now makes sound *
  • ver. 13.8.25 is the latest version that supports node 12.3.1

* Run yarn install to update

Keyboard controls

• "H": open instructions
• "S": read out slope
• "T": play the graph's tone
• Default Tab key for navigation and Arrow keys for moving points

MWDK upgrade

• Updates webpack configuration and package.json to support the MWDK upgrade
• Replaces travis configuration with Github workflows

[clpetersonucf]

I dig these changes. Only a few recs:

• There should be a dedicated keyboard controls button that compliments the existing shortcut key
• The default volume of the slope tone feels quite loud, but I'd also consider a volume slider if at all possible
• The "play audio" label should probably specify that it's playing a tone that represents the slope, since it's not immediately clear what it's for otherwise.

[dmols]

Screenreader works great and keyboard accessibility is also very good. Asides Corey's comments, I only see a couple other concerns that might be worth addressing:

• Default tab focus color is blue and that's okay for most of the elements on the widget, but it gets a little confusing where the focus goes, as you pass over the delta Y and X calculations; for delta Y it looks very similar to the line not being selected, and for delta X it might throw off the user since now the two lines look to be virtually the same color. Same goes for the delta X and Y divs in the graph itself. Might be worth changing those 4 elements' tab focus bg color to black to discern the focus a little easier.
• Focusing on either point in the graph and using Shift + any arrow, will show more of the graph in that direction, allowing the user to select from a wider range of X and Y values. Without doing Shift arrow, the user is limited to +-10 in each direction, even when moving the point using the arrow keys. Might make sense to keep as is due to no zoom-out option, but I thought it worth noting nonetheless.

[cayb0rg]

New changes

• Adds help button
• Changes "Play Audio" to "Play Slope Tone"
• Adds a volume slider
• Updates focus styling for labels/formulas
• Puts a cap on the number of octaves the tone can climb if the user sets a very high y-value or x-value
  • I had no idea about the Shift + Arrow keys. Thank you for catching this. Unfortunately, this functionality is part of JSXGraph so it may have to be left as it is.
• Fixes rise/run formula not appearing in Chrome