oxidecomputer / oxidecomputer/console
Focus behavior on dropdown menu close
@benjaminleonard is already working on this.
Since Mar 15, 2023.
- Dominant language
- TypeScript
- Stars
- 228
- Forks
- 22
- Avg merge
- 19h 42m
- Merged PRs (30d)
- 32
Description
Not sure we have to do anything. We might be fine with the current behavior. I think this was handled with :focus and :focus-visible before (see #1059 and https://github.com/oxidecomputer/console/pull/1201/commits/239d02fb3a98edb025df8ca266ff7f84ffdf63a6), but Radix must do something different from Reach in this regard.
As noted in https://github.com/oxidecomputer/console/pull/1395#discussion_r1136048710, we currently have a choice between two mediocre options. With onCloseAutoFocus set to prevent default as we are currently doing, we don't get an unwanted focus ring, but we also reset focus altogether so if you hit tab, you start over at the top of the page. Maybe that's fine.
If we don't set onCloseAutoFocus, we get the following behavior: the button is focused after you click out, and it gets a focus ring that I think we don't want (setting aside the bad rendering due to it being in a table cell — we could probably fix that). That behavior is shown below.
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.
Assessment
This issue has not been assessed yet.