import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
import * as Stories from './roving-focus.stories';
import { RdxRovingFocusGroupDirective } from '../src/roving-focus-group.directive';
import { RdxRovingFocusItemDirective } from '../src/roving-focus-item.directive';


<Meta title="Utilities/Roving Focus" />

# Roving Focus


<Canvas sourceState="hidden" of={Stories.Default} />


## Anatomy

```html
<div rdxRovingFocusGroup>
    <button rdxRovingFocusItem></button>
    <button rdxRovingFocusItem></button>
    <button rdxRovingFocusItem></button>
</div>
```

## API Reference

### Focus Group
The `RdxRovingFocusGroupDirective` allows managing focus within a group of elements, such as buttons, links, or any interactive items. It provides an accessible navigation pattern for keyboard users and ensures intuitive interaction.

#### Usage

This directive can be added to a container element, and all its focusable children will be managed as a group.

<ArgTypes of={RdxRovingFocusGroupDirective} />

### Focus Item
The `RdxRovingFocusItemDirective` is a companion directive to `RdxRovingFocusGroupDirective`. It manages individual items within the group, ensuring smooth keyboard navigation and intuitive focus behavior.

#### Usage
This directive should be used on individual elements (e.g., buttons or links) within a container that has the `RdxRovingFocusGroupDirective`.

<ArgTypes of={RdxRovingFocusItemDirective} />
