Event

Props

• label: string (optional) -- accessible label for the event
• children: slot (required) -- event content including title, date, location, etc.
• ...restProps: Any additional HTML attributes

Keyboard Interactions

• None -- events are informational, not interactive

ARIA

• Implicit article role from <article> element
• aria-label -- describes the event for screen readers

When to Use

• Use to display event information such as appointments, conferences, or scheduled activities.
• Use when event metadata (date, time, location) needs structured semantic presentation.
• Use for calendar entries, schedule listings, and appointment summaries.
• Use with semantic <time> elements for machine-readable dates.
• Use in combination with Place for location details and Person for attendee information.

When Not to Use

• Do not use for timeline history -- use TimelineList instead.
• Do not use for tasks or to-do items -- use TaskList instead.
• Do not use for simple date display -- use a plain <time> element instead.

Headless

This component provides an <article> element with optional aria-label for accessible event identification, with zero visual styling. The consumer is responsible for all CSS including layout, date/time formatting, location styling, and visual hierarchy.

Styles

The consumer provides all CSS styling. The component renders with an .event class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders an <article> element with class event
• Verify aria-label is applied when provided
• Verify child content slots are rendered correctly
• Verify pass-through attributes are applied

Advice

• Designers: Clearly distinguish event date, time, and location from the description. Use consistent formatting across event listings.
• Developers: Use semantic <time> elements with datetime attributes for machine-readable dates. Provide descriptive label props for screen readers.

Implementation Notes

• Uses <article> element for self-contained event semantics
• aria-label describes the event for screen readers
• Contains slots for title, date, time, location, and description
• Supports structured event metadata

Related components

• timeline-list-item — one event in a timeline list
• date-range — paired start and end date inputs

References

• MDN article element