in-survey accessibility enhancements

[JoeArmani]

Hi @danielruss @anthonypetersen, please review this when you have a chance. Thank you.

PR: JAWS / Accessibility enhancements Related: https://github.com/episphere/connect/issues/931

• Accessibility enhancements for easier screen reader use. • Update grid to table (screen reader friendly), increase click target size. • Update grid handlers for new table format. • Add checkmark graphic to grid. • Add card layout to mobile grid. • Add aria properties to some inputs. • Autofocus ‘other’ and ‘please describe’ text boxes on click. • Autoclick ‘other’ and ‘please describe’ text boxes on text input. • Update modal for accessible navigation. • Refactor stopSubmit.

TODO: <br> tags need to be handled in some browsers — they read “empty group” which can be confusing with a screen reader.

Example: updated grid view with larger click targets

[danielruss]

please center the check in the box.

[JoeArmani]

please center the check in the box.

Updated screenshots: Here are updated versions of the two views, hopefully closer to what you're looking for. • Bigger tap target on desktop - helpful for people with low vision or trouble with fine motor skills. • 4th row shows hover action -- triggered and clickable by hovering over the surrounding label for easier user targeting. • Mobile view converted back to text tap targets.

Questions: Desktop: Do you want this in a separate Connect-specific stylesheet or do you want this available for all users? We can resize the radio buttons if you want them smaller or larger and you want them available for all.

• I will style-match the old version with the new accessible-friendly table layout if those old small radio buttons are important.
• I understand we need to handle the existing live styles (live production environment) in the interim...just trying to get on the same page with this update first, then I'll know what gaps exist and fill them in.

Mobile: Do you have a preference on all caps as before vs standard casing?

[anthonypetersen]

Those updated radio buttons look great in my opinion. The size feels appropriate to the area that it's filling.

On the subject of caps, there is an issue active right now (https://github.com/episphere/connect/issues/926) that is asking for us to not put text in all caps as it's harder to read.

[JoeArmani]

Those updated radio buttons look great in my opinion. The size feels appropriate to the area that it's filling.

On the subject of caps, there is an issue active right now (episphere/connect#926) that is asking for us to not put text in all caps as it's harder to read.

Great. I like this version of radio buttons better than the checkmarks and they're way easier to use than the small radios. Agreed about lowercased text. Thanks for pointing out that issue, I'll leave it lowercased.

I increased the specificity of the new table grids. Now the old CSS for quest-grid and the new CSS for quest-grid.table-layout are both supported. This is important since replace2.js references the GitHub repo for those stylesheets... So the old version in production and the new version in testing should be good to go.

[JoeArmani]

Those updated radio buttons look great in my opinion. The size feels appropriate to the area that it's filling.

On the subject of caps, there is an issue active right now (episphere/connect#926) that is asking for us to not put text in all caps as it's harder to read.

@anthonypetersen This round of changes is in and ready for review. Thanks