[focusgroup] Up/down arrow key navigation with inline wrapping content
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
It would be nice if focusgroup could handle inline wrapping content with up/down arrow key navigation. In this case the focusable elements are using inline layout and may wrap across lines. This means they are logically (according to layout) one-dimensional, but visually two-dimensional. Note I don't mean the wrapping mode where moving off the end moves back to the start; I mean wrapping with the content.
To illustrate the point, here is a screenshot of an "icon view" control from Construct 3:
Within each group (e.g. "Data & Storage"), items use inline layout, flowing from left to right and wrapping down lines. For example the "Dictionary" item follows "CSV" in DOM order, but the browser layout has wrapped it to the next line.
Note this is not a grid layout: the wrapping varies depending on the size of the container. Using a grid would mean having to resort to JavaScript to perform layout or mark the grid cells by inspecting the layout the browser produced (and then know to update that whenever the container changes).
Using focusgroup on this kind of content works fine with left/right arrow keys. However the user will expect the up/down arrow keys to work too. For example with the 'Clipboard' item focused, pressing down should move the focus to the 'JSON' item, because visually it is below, even though logically it is after it ("to the right") in inline layout. So at the moment we still have to use JavaScript to handle keyboard navigation with up/down arrow keys, which means to some extent reimplementing what the browser already does with the left/right keys.
This might need to be a new mode for backwards compatibility reasons, but I'd argue it would be useful to handle up/down arrow keys by default with the "inline" modifier: content that does not wrap is not affected, and content that does wrap gets additional useful shortcuts.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the focusgroup behavior described here, especially the inline modifier and wrapping layout. Determine the intended up/down navigation behavior for visually adjacent items and whether a new mode is needed for compatibility; done means the behavior and its scope are specified clearly enough to implement.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100