openui / openui/open-ui

[focusgroup] Should arrow keys be able to move focus out of certain key conflict elements?

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

Nobody has claimed this yet.

focusgroup needs-triage
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

As mentioned in a discussion on Discord, should it be possible to exit certain key conflict elements with arrow keys?

So far, the explainer treats key conflict elements (where arrow keys are already used for other native functionality like in a text input to move the caret) similar to opted out elements with focusgroup=none. These elements are not participating in the focusgroup arrow key navigation and users need to use Tab or Shift+Tab to move focus back to the focusgroup.

If arrow keys would be allowed to move focus out of key conflict elements under certain conditions, this would allow for a more natural interaction with focusgroups since users would not need to switch between arrow keys and tabs in these cases.

Text input and textarea

Focus would leave a text input in the forward direction after the caret moved to the last position in the value and in the backwards direction after it reached the start of the value. It might be good to consider edge cases where this behaviour is suspended like when the user is selecting content with Shift and arrow keys. What other edge cases are there?

Similar behaviour could apply to date, datetime and time types of inputs.

Select

A select uses Up Arrow and Down Arrow to open the options list. When pressing Up Arrow from the first option, focus could leave in the backwards direction as well as in the forward direction when pressing Down Arrow on the last option.

Audio and video with controls

Should arrow keys cycle seamlessly between internal control elements and other focusgroup participants outside?

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 with the linked Discord discussion and the focusgroup explainer referenced in the issue. Review the proposed behavior for text inputs, textareas, date/time inputs, selects, and media controls, including the stated edge cases. Done means the open interaction questions are resolved into a specific focusgroup behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.