Skip to main content

Feed

Scrollable feed of articles with accessibility.

Usage

<w-feed label="News feed">
<w-slot item>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
</w-slot>
<w-slot item>
<article>
<h2>Another Article</h2>
<p>More content...</p>
</article>
</w-slot>
</w-feed>

Props

PropTypeDefaultDescription
labelstring""Accessible label
busybooleanfalseLoading more items

Slots

SlotElementDescription
itemArticleFeed items

Keyboard

KeyAction
Page DownNext article
Page UpPrevious article

Accessibility

  • Container has role="feed"
  • Items have role="article" with aria-posinset and aria-setsize
  • aria-busy during loading
  • Screen readers announce article position