Skip to content

Commit

Permalink
Improve docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ai committed Nov 3, 2024
1 parent 0e10c96 commit b28c08b
Showing 1 changed file with 21 additions and 25 deletions.
46 changes: 21 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ https://github.com/user-attachments/assets/bcd78271-cf76-45a3-8beb-4f3cea69c143
- [Hotkeys for List](#hotkeys-for-list)
- [Meta instead of Ctrl on Mac](#meta-instead-of-ctrl-on-mac)
- [Focus Groups](#focus-groups)
- [`focusgroup` attribute](#focusgroup-attribute)
- [Menu](#menu)
- [Listbox](#listbox)
- [Tablist](#tablist)
Expand Down Expand Up @@ -288,6 +289,26 @@ Using only <kbd>Tab</kbd> for navigation is not very useful. User may need to
press it too many times to get to their button (also non-screen-reader users
don’t have quick navigation).


### `focusgroup` attribute

Key UX has limited polyfill for [`focusgroup` attribute](https://open-ui.org/components/focusgroup.explainer/) to mark groups where user will move `:focus`
by arrows.

```html
<div focusgroup>
<button type="button">Copy</button>
<button type="button">Paste</button>
<button type="button">Cut</button>
</div>
```

Key UX supports (you can combine these features):
- `focusgroup="block"` for vertical arrows.
- `focusgroup="no-memory"` to not restore last focus position.

Key UX doesn’t support `wrap`, `none`, and `grid` features.

### Menu

To reduce Tab-list you can group website’s menu
Expand Down Expand Up @@ -410,31 +431,6 @@ startKeyUX(window, [
focusGroupKeyUX()
])
```
### Focusgroup attribute

```html
<div focusgroup>
<button type="button">Copy</button>
<button type="button">Paste</button>
<button type="button">Cut</button>
</div>
```

```html
<div focusgroup="inline">
<button type="button">Mac</button>
<button type="button">Windows</button>
<button type="button">Linux</button>
</div>
```

```html
<div focusgroup="block">
<button type="button">Dog</button>
<button type="button">Cat</button>
<button type="button">Turtle</button>
</div>
```

## Focus Jumps

Expand Down

0 comments on commit b28c08b

Please # to comment.