Accessibility Updates: Shift-Tab, div order, and button names #4435
Conversation
Safari triggers onMouseMOve when the user presses shift (or any modifier). Added a check to ensure the user really did move the mouse. Shift-tab now works in Safari.
Previously if buttons were not given names, things like 'null' and 'undefinied' were making their way into the screen reader and browser tooltips. DId a thorough multi-browser review and this should make the originally desired fallback work in all cases.
Previously if a Pixi game updated its accessibleTitle or accessibleHint after its initial creation, the change would not be reflected in the DOM. Now, in these cases, it updates properly and also prioritizes any changes to the focused button to the scren reader.
pbblair
changed the title
There was a problem hiding this comment.
https://github.com/pixijs/pixi.js/blob/dev/src/accessibility/accessibleTarget.js
According to this file, there cant be undefined in hint. I dont like usage of both "!== undefined" and "!== null", its making code less readable :( Leave that thing to user-side. Its their problem if they put undefined in nulled fields.
Previous commit was checking for more than necessary.
|
@ivanpopelyshev thanks for demonstrating where the null value was coming from. You're right, no need to check for undefined. Should be addressed in newest commit. |
Previously, buttons in the DOM were in reverse order. As a result, when braille displays showed more than one button at a time, they would also list them in reverse order. Additionally, the initial focus within Pixi would sometimes jump straght to the initial DOM element, counter-intuitively the last button created by the game. Both of these problems have been resolved.
pbblair
changed the title
|
@pbblair Thank you so much for this high-quality PR and sorry we haven't been more responsive. The team is spread a little thin right now trying to put a big effort into v5. @GoodBoyDigital is going to look at this when he's free. I'm for getting this in v4 since it does a better job at provide more device/browser coverage for accessibility. |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Fixes:
Enhancement:
3. One of the first things I tried to do with Pixi accessibility was to update a button name to reflect a button's state change, but it had no effect when I tried. The official Pixi demo is a great example of this need! Buttons are toggled to light up the signs, but there's no indication of the button's new state. I've added this functionality.
Live demo at:
http://superkeen.com/web/pixi
To get as many browser/screenreader combinations as possible to announce the change as soon as its made, I've added some ARIA attributes. I've done quite a bit of testing to reveal how well this is supported. See below for details:
Full support:
Windows Chrome (Narrator and NVDA)
Windows Firefox (Narrator and NVDA)
Windows IE (NVDA)
Partial support:
Mac Safari (Voiceover): fine until the focus leaves and returns to the page, then button name changes not announced right away, only on focus change; recoverable by restarting Voiceover
Win/Mac/ChromeOS Chrome (ChromeVox): when toggling, sometimes announces the old button name instead of the new one
No button name change support (just like legacy behavior):
Mac Chrome (Voiceover)
Mac Firefox (Voiceover)
Windows Chrome (JAWS)
Windows Firefox (JAWS)
Windows IE (Narrator and JAWS)
Windows Edge (Narrator, NVDA, JAWS)