1.0.2 • Published 3 months ago
feed-a11y v1.0.2
feed-a11y
headless and accessible feed component for React.
Features
- Keyboard navigation Interaction.
- ARIA roles and states link.
Demo
https://caprolactam.github.io/feed-a11y/
Install
npm install feed-a11yUsage
import * as Feed from 'feed-a11y'
export default () => (
<Feed.Root>
<Feed.RootTitle />
<Feed.Item>
<Feed.ItemTitle />
</Feed.Item>
</Feed.Root>
)API
Root
| Prop | Type | Default | Description |
|---|---|---|---|
| loading | boolean | - | To convey the loading state to users using assistive technologies. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
RootTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Item
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ItemTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Page Up | Move focus to previous article. |
| Page Down | Move focus to next article. |
| Control + Home | Move focus to the first focusable element before the feed. |
| Control + End | Move focus to the first focusable element after the feed. |
FAQs
React version? Requires React 18, because using useId internally.
Combination with virtualization? Not supported, because it's not possible to manage focus properly.
Contribute
If you have issues or questions, feel free to create an issue or pull request.