starteam / starcellbio_html

2 stars 7 forks source link

Student and Instructor accessibility #786

Closed jmclaus closed 6 years ago

jmclaus commented 6 years ago

This PR enables focusability on all GUI elements that were formerly only clickable.

To attain this goal, all occurences of divs or spans that were used to mimic a clickable element were replaced by a corresponding button or anchor. Tabbing order was corrected to ensure a flow from top to bottom and left to right. All dialog windows now open up with focus on either their 'close' button or on the first focusable element of their body. That includes all the account management windows (Sign In, Reset Password, Create Instructor or Student Account etc.). Also, in these, the superfluous '*' character that was appended to the end of the labels was removed and error reporting now behaves correctly.

A black focus indicator was chosen and efforts were made to ensure it sticks closely to the shape of the GUI element ie it will be rounded for round buttons, rectangular for links and it will even follow the outline of some tabs were a triangle is attached below them.

In the instructor application,invisible links have been added to the right of the logo: 'Skip to sidebar' and 'Skip to content'. They will only appear if tab or shift+tab is pressed on the element preceding them (logo) or following them (contact). If enter is pressed, focus will be given to the corresponding item in the sidebar or in the content. The student application only contains a 'Skip to content' invisible link.

In every file that was going to be modified, an attempt was first made to start fixing their formatting which contained a mix or tabs and spaces, unnecessary blanks lines, erroneous indentation or missing blank line at the end of the file.

Functionality was barely touched and test always passed all along the way. A good way to test the changes is to try to create an assignment by using only the keyboard. And then visualize the result, student side, using the same method.

Here are the areas left though that are not fully keyboard accessible:

Instructor side:

Student side:

There are a lot of commits but most of them are small and can be squashed if you wish once the review is done and the PR accepted.

annagav commented 6 years ago

Functionality works fine 👍

One thing I noticed not related to this PR: when I login a student with a course code, I am not directed to the assignments page for that course, but instead I see the SCB homepage and it is not obvious how to get to the assignments.

Another minor (probably not important): when I preview an assignment I created, the 'In the Lab' videos look broken. But this appears to happen only in the preview.

jmclaus commented 6 years ago

@annagav Thanks for the feedback.

Regarding your first statement, I agree it is confusing and opened an issue, tagged with enhacement: https://github.com/starteam/starcellbio_html/issues/788

Regarding your second statement, you are correct, the 'In the lab' videos slot is empty until a technique is chosen. Seems to happen also, in an identical manner, when I log in as a student. I checked, this behavior is not linked to this PR, so I'll go ahead and merge.