refactor: use aria-modal in date-picker instead of aria-hidden #9976
Conversation
web-padawan
force-pushed
the
refactor/date-picker-aria-modal
branch
from
9fc22c9 to
17c0665
Compare
| firstUpdated() { | ||
| super.firstUpdated(); | ||
|
|
||
| this.setAttribute('role', 'dialog'); |
There was a problem hiding this comment.
Moved this to the mixin - extra method feels unnecessary now when we removed Polymer version.
web-padawan
force-pushed
the
refactor/date-picker-aria-modal
branch
from
17c0665 to
f076b75
Compare
| if ((props.has('opened') || props.has('_noInput')) && this._overlayContent) { | ||
| if (this.opened && this._noInput) { | ||
| // Mark as modal on mobile if the input can not be accessed | ||
| this._overlayContent.setAttribute('aria-modal', 'true'); |
There was a problem hiding this comment.
I'm not really able to verify if this is effective. We want other elements on the page to be removed from the accessibility tree.
In VoiceOver, bringing up the web rotor still lists heading and form controls in the background of the overlay. This does not happen with the previous aria-hidden logic. So aria-modal doesn't seem to do what it should here.
In NVDA, when the focus is in the overlay it is at least not possible to navigate to other parts of the page using shortcuts like h (next / previous heading) or f (next / previous form control). But that is also the case when not using aria-modal, so it seems that is probably how navigation works in general within dialogs in NVDA. There is a NVDA+F7 shortcut that is supposed to list other available elements on the page, but I have not figured out how to trigger that in my VM.
I do not have JAWS, so I wasn't able to test with that, maybe you could give it a try?
There was a problem hiding this comment.
Tested with JAWS and it seems to be possible to escape the content using hotkeys like F / Shift + F for next / previous form control (although for some reason it only worked after I toggle virtual cursor mode off and back on).
|
|
Converted to draft for now, as making this work properly will require additional changes and it's not high prio. |
Description
Related to #122
Changed the date-picker logic according to the advice from #122
Type of change
Note
Personally, I didn't spot any differences in terms of announcements with and without
aria-modal:VoiceOver
NVDA
JAWS