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-a11y

Usage

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.