Following is a dummy implementation of our web application https://roleapplication.herokuapp.com/index.html
appArea element has role application as it contains highly complex widgets such as ms paint/editor/ms office. Navigator contains standard web widgets such as dropdown and buttons
The HTML is something similar to as specified below.
<body>
<div class="appArea" role="application">
.......//Complex widgets
</div>
<div class="toolbar">
......//Buttons, dropdowns
</div>
</body>
Keyboard functionality of appArea is handled by its code and for toolbar we rely on keyboard handling with the screen reader as they work in web browser.
Issue - When user press escape in navigator area we blur the navigator so the focus by default goes to body. Now as focus is in body then arrow keys moves the focus to toolbar and therefore user is never able to go into appArea. If focus is in appArea it works fine.
Expectation - When focus is on body then on pressing down arrow focus should inside the appArea and then appArea will get the key instead of screen reader.
Check the down arrow key functionality when page is loaded with and without screen reader.
Keyboard notes
- Press f6 to go from widget 1 to widget 2 to navigator
- You can use arrow/tab keys in widgets to navigate.
- Move to navigator using f6 and press tab to go to any button and then press escape. Now focus is on body(check using document.activeElement).
- Without screen reader our widgets captures the key on body and process it even if they dont have focus.
- However with screen reader, when body has focus and user press down arrow, screen reader consumes the key and move the focus to navigator instead of application area which has widgets and user is unable to go to appArea using arrow keys or other keys which screen reader consume.
Note -
- If we give role application to complete application then default arrow key handling of navigator will stop working which is not desired
- Removal of role application is not possible as appArea is quite complex with hundreds of widgets all having their keyboard handling.