Article Preview Sheet for React

The title Getting Started with React and the subtitle A comprehensive guide for beginners in SheetHeader, a muted line with By John Smith and 5 min read, two paragraphs, and a full-width Read Full Article button.

Render the Button as a link to the article's URL. Pass render={<a href="/articles/getting-started" />} and nativeButton={false}.

No. The • between the author and the read time is aria-hidden, so a screen reader hears By John Smith, then 5 min read.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. Here the article's title is the sheet's title, and its subtitle is the description.

The outline button labeled Read More is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

Give the body flex-1 overflow-y-auto so it scrolls inside the panel while the header stays put. A preview should stay short, though: two paragraphs and a link out.