openui / openui/open-ui

[focusgroup] Up/down arrow key navigation with inline wrapping content

Open
#1,471 0 comments 0 reactions 0 assignees View on GitHub

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:

Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.