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

Prop	Type	Default	Description
label	string	""	Accessible label
busy	boolean	false	Loading more items

Slots

Slot	Element	Description
item	Article	Feed items

Keyboard

Key	Action
Page Down	Next article
Page Up	Previous article

Styling

Items get role="article" with aria-posinset/aria-setsize. The host is display: block.

w-feed w-slot[item] > * {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

/* While loading more items */
w-feed[aria-busy="true"] {
  opacity: 0.7;
}

Selector	Targets
w-feed[aria-busy="true"]	Feed loading more items
w-feed w-slot[item] > *	Each 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