Accessibility Updates (Screenreader, Semantic HTML, Keyboard) #38
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…reader updates for choices
… questions and answers
DynieM
changed the title
clpetersonucf
requested changes
Sep 8, 2023
There was a problem hiding this comment.
Nice work! Only a few small things I've noticed:
- The previous and next buttons are both focusable and selectable when there aren't previous or next pages to paginate to. Ideally, these buttons are disabled (they should change visually as well as being non-interactive). Additionally, the aria labels associated with these buttons don't appear to update the current page's progress correctly.
- The keyboard instructions dialog doesn't appear to be interactive at all with the screenreader. Honestly, that instructions pop-up is super dated anyways. I believe I'd rather see it turned into a proper modal dialog, with the corresponding accessibility attributes, and the information about how to play could likely be condensed and simplified. The visual style and presentation is up to you - the "page of an instruction booklet" style it has now is cute, but it also makes it more difficult to comprehend at a glance.
cayb0rg
suggested changes
Oct 31, 2023
There was a problem hiding this comment.
This looks great, Dee! There's just a couple minor issues I noticed:
- (More of a nitpick) The
_assistiveNotificationand_assistiveAlertboth appear to do the same thing, so we should probably switch to using one or the other. - The close button for the instructions modal is still tabbable when closed. This might be due to using
tabindex=1, which could be fixed by using thefocus()function instead when the instruction modal is opened to focus the close button. - The game board is still tabbable when the instructions are opened.
Also, I would maybe suggest adding the keyboard instructions as an aria-label to the Help button to make finding them easier, or as an aria-label to the instruction modal's close button.
Overall, this looks good. Nice work!
cayb0rg
reviewed
Oct 31, 2023
| if !$scope.completePerPage[match.matchPageId] then $scope.completePerPage[match.matchPageId] = 1 | ||
| else $scope.completePerPage[match.matchPageId]++ | ||
| console.log($scope.completePerPage) | ||
| console.log($scope.currentPage) |
There was a problem hiding this comment.
Just a reminder to clear any leftover console.logs
Merged
|
This appears to be superseded by #40, closing |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.