-
Type: Improvement
-
Status: Open
-
Priority: Major
-
Resolution: Unresolved
-
Affects Version/s: 3.0.15
-
Fix Version/s: None
-
Component/s: A11y
-
Epic Link:
-
Tags:
After using select all, focus should be put on the selected items banner.
When subsequently using an action or clearing selection, focus should return to the select all (related: WEUI-486).
_________________________
Keyboard focus is lost or placed on the wrong element during user interaction, content refresh or update, or other reason.
Element Name: Status that appears on selecting 'Select all' Checkbox.
Location: In main region of the page, after
Clicking “Search” icon in left nav. Enter a search term like “Test”. Select Search and observe that a page that comes up, i.e. Search results with “grid view”.
Description:
Keyboard focus is not moving on to the newly appeared popup message. Upon selecting 'Select all' checkbox, "all x items selected" popup appears with some controls in it. Keyboard focus is not moving to the appeared popup message.
Recommendation to fix
RULE :
The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction.
HOW TO FIX:
Fix this issue by explicitly placing focus on a logical element when content is removed, refreshed, or added, for example:
1. For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content - such as in single page applications.
2. For content removed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.
REFERENCE:
Deque University: https://dequeuniversity.com/class/input-methods2/keyboard-input/focus-management
Deque University:https://dequeuniversity.com/class/dynamic-updates2/notify-users/move-focus
Deque University: https://dequeuniversity.com/class/dynamic-updates2/ajax/single-page-applications
BACKGROUND:
One of the biggest challenges when creating rich web interfaces using JavaScript is the management of focus when new content or controls are added or removed from the page. The presentation or modification of content on the screen may require that the user interact with -or at the very least, take notice of - the new or changed content. It is important to have a clear indication of page content that has been updated. This allows the user to understand the change and also allows a keyboard user to interact with any new content.