Skip to content

u1ui/focusgroup.attr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 

Repository files navigation

[u1-focusgroup] - attribute

Focus movement by arrow keys

Features

It allows you to focus elements with arrow keys inside a container.

  • Works inside shadow dom.
  • Use focusgroup="wrap" to focus the first element when the last element is focused and vice versa.
  • Use focusgroup="remember" to focus the last focused element when group is focused again.
  • Text-Inputs only works for up and down arrow keys.

See also:
https://open-ui.org/components/focusgroup.explainer/
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md

Usage

<div u1-focusgroup="wrap remember">
    <button>press left</button>
    <button>or right</button>
    <button>to focus the next button</button>
</div>

Install

<script src="https://cdn.jsdelivr.net/gh/u1ui/focusgroup.attr@x.x.x/focusgroup.min.js" type=module></script>

Demos

minimal.html
test.html

About

  • MIT License, Copyright (c) 2022 (like all repositories in this organization)
  • Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥