-
Notifications
You must be signed in to change notification settings - Fork 179
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Focusgroup use cases and APG patterns #1018
Comments
In thinking about the |
This issue documents my exploration into the various APG patterns and how
focusgroup
might (or might not) be used in them. I anticipate using this information to provide new examples for the explainer that are based on a more diverse set of use-case patterns from which the APG patterns are derived.First, there are a number of patterns that focusgroup does not seem to apply to. These are:
The following patterns are good
focusgroup
use cases for (some of) the keyboard accessibility recommendations in those patterns:focusgroup
usagefocusgroup=block
on the root,focusgroup=none
on the regions to opt-them out.focusgroup=inline
on the tablistfocusgroup
on the root<nav>
.focusgroup
on each popover<ul>
.<nav>
menu supports both ➡️ & ⬇️ for forward nav and the opposite for reverse direction--but when the button with an open menu is focused, then the 'down' arrow key captures and enters the menu.focusgroup
on the root<div>
focusgroup="manual-grid row-flow"
on the root<div>
.focusgroup=grid-row
on therole=row
elements, andfocusgroup=grid-cell
onrole=gridcell
spans.focusgroup=grid
on the<table>
root element.focusgroup=grid
on the outer<table>
withfocusgroup=wrap
in the<td>
's popover menu.aria-activedescendant
and doesn't make any content other than the root container DOM-focusable. Thesearia-activedescendant
use cases aren't generally compatible with focusgroup becuase of the lack of a DOM-focusable set of elements.role=menubar
element getsfocusgroup="inline wrap"
and the menus (role=menu
i.e.,popovers
) getfocusgroup="block wrap"
.no-memory
option is not needed in the sub-menus of this example because show/hide will reset the memory anyway, AND focus needs to be explicitly set on the submenus by the parent up/down event handlers, so this would bypass the memory feature anyway. "Typeahead" is a recommended feature for this scenario that could be handled by focusgroup.Size
(down-key-on-last item doesn't wrap) and forStyle/Color
(down-key-on-last item doesn't wrap)focusgroup
onrole=radiogroup
focusgroup
attribute for both the Radio Group w/roving tabindex example AND the Rating Radio Group.focusgroup="inline wrap no-memory"
on therole=tablist
div.role=tabpanel
s must be tabindex "chorded" to their tab for proper tab-sequencing when multiple panels are visible. In this case: because all non-active tab's tabpanels are hidden, they can all simply use tabindex=0, and the only visible tab will always be in the correct tab sequence! Note:no-memory
is necessary to ensure focus always goes to the selected tab (the one that is designated via sequential focus navigation).role=toolbar
element getsfocusgroup="inline wrap"
and the ⬆️/⬇️-activatable menus (role=menu
i.e.,popovers
) getfocusgroup="block wrap"
. (See also Menu & Menubar pattern.)focusgroup=block
on therole=tree
root element.treeitem
s.focusgroup=grid
and treat the treegrid primarily as a grid, orfocusgroup=block
and treat the treegrid primarily like a tree. Both cases need special handling.**Note: this use case (treegrid) does not easily fit a
focusgroup
because the tree-grid combines navigational elements of a tree (linear focusgroup) with that of a grid (2d navigation of grid cells). Two approaches could be used--each requires some special case handling.focusgroup=grid
. Special case handling for row-selection ⬆️/⬇️ behavior (move by row)focusgroup
from being included in its focusgroup, since<tr>
is focusable, but should be included in the parent'sfocusgroup=block
, while declaring that it's children should be in afocusgroup=inline
--⬆️/⬇️ adjacent cell movement would still need to be special-cased.The text was updated successfully, but these errors were encountered: