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.
It would be nice if
focusgroupcould 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
focusgroupon 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.