Accessibility is a crucial aspect of web development that ensures everyone, including people with disabilities, can perceive, understand, navigate, and interact with websites.
Feed
A component for displaying a list of articles or updates in a feed format with infinite scroll capability.
Updates Feed
Astro is a modern static site builder that delivers lightning-fast performance with less JavaScript.
Modern CSS has evolved significantly with features like CSS Grid, Flexbox, and Custom Properties.
This is the content for feed item 4. The Feed component automatically loads more items as you scroll.
This is the content for feed item 5. The Feed component automatically loads more items as you scroll.
This is the content for feed item 6. The Feed component automatically loads more items as you scroll.
This is the content for feed item 7. The Feed component automatically loads more items as you scroll.
This is the content for feed item 8. The Feed component automatically loads more items as you scroll.
This is the content for feed item 9. The Feed component automatically loads more items as you scroll.
This is the content for feed item 10. The Feed component automatically loads more items as you scroll.
Code
<Feeditems={[
{
url: "https://example.com/post/1",
id: "1",
title: "First Post",
content: "This is the first post in the feed.",
date: "2024-03-19",
author: "John Doe",
image: "https://picsum.photos/id/1/800/450",
imageAlt: "Random placeholder image"
},
// ... more items
]}
initialItems={3} // Optional: number of items to show initially (default: 3)
/>Props
| Name | Type | Required | Description |
|---|---|---|---|
items |
FeedItem[] | Yes | Array of feed items to display |
initialItems |
number | No |
Number of items to display initially before loading more
Default: 3
|
title |
string | No |
Title for the feed, used as aria-label
Default: "Updates Feed"
|
FeedItem Props
| Name | Type | Required | Description |
|---|---|---|---|
url |
string | URL | null | undefined | No | URL for the feed item link |
id |
string | Yes | Unique identifier for the feed item |
title |
string | Yes | Title of the feed item |
content |
string | Yes | HTML content of the feed item |
date |
string | Yes | Date of the feed item |
author |
string | No | Author of the feed item |
image |
string | No | URL of the feed item image |
imageAlt |
string | No | Alt text for the feed item image |
Usage
✅ Do’s
- Use for dynamic content that can be loaded incrementally such as news or social media feeds
- Include meaningful labels and descriptions for feed items
❌ Don’t’s
- Don’t use for static content that doesn’t need infinite scrolling
- Don’t load too many items at once
- Don’t use for content that requires immediate visibility of all items
Accessibility
Keyboard Navigation
- Page Down: Move focus to next article
- Page Up: Move focus to previous article
- Ctrl + Home: Move focus to the first article in the feed
- Ctrl + End: Move focus to the last article in the feed
- Tab: Navigate to interactive elements within an article
Screen Reader Support
- The feed interface context is announced to screen readers
- Uses
role="feed"for the container element - Each feed article is an
<article>element withtabindex="0"to make it focusable - Uses
aria-labelledbyto identify the feed with its heading - Uses
aria-busy="true"during loading to indicate content changes - Each article includes
aria-labelledbypointing to its title - Each article includes
aria-describedbypointing to its content - Articles include
aria-posinsetandaria-setsizeto indicate position in feed