accessible-astro-components

The window.toast object provides a programmatic API to trigger toast notifications from anywhere in your application. You can use specific typed helpers for common notification types or the generic show method.

Available Methods:

• show(options: ToastOptions): Displays a toast with custom options.
• success(message: string, duration?: number): Displays a success toast.
• error(message: string, duration?: number): Displays an error toast.
• info(message: string, duration?: number): Displays an info toast.
• warning(message: string, duration?: number): Displays a warning toast.
• dismiss(id: string, immediate?: boolean): Dismisses a specific toast by ID.
• dismissAll(): Dismisses all active toasts.

// Example usage of the toast API
window.toast.success('Operation successful!', 3000);
window.toast.error('Something went wrong');

// Using the generic show method
window.toast.show({
  message: 'Custom message',
  type: 'warning',
  duration: 5000,
  dismissible: true
});

The Form and Input components provide built-in progressive enhancement for form validation and accessibility.

Form Props:

• errorSummaryMessage: Message displayed when validation fails.
• defaultFieldValidationMessage: Fallback message for invalid fields.
• defaultFieldsetValidationMessage: Fallback message for invalid fieldsets.

Input Props:

• name (required): Name attribute for form submission.
• label (required): Label text for the field.
• type: Determines built-in validation rules ('text' | 'email' | 'password' | 'tel' | 'url'). Default: 'text'.
• required: Whether the field is required. Default: false.
• requiredText: Text displayed next to required labels. Default: '(required)'.
• data-validation: Custom error message to override automatic ones.
• data-validation-pattern: Custom regex pattern for validation.
• data-validation-fn: Name of a custom validation function available on the window object.
• emailValidationMessage, telValidationMessage, passwordValidationMessage, urlValidationMessage: Custom messages for specific input types.

The Accordion component acts as a parent container for AccordionItem components. The parent renders as a <ul> and the items render as <div> elements containing a details/summary structure.

AccordionItem Props:

• title (required): The text displayed in the header.
• name: Optional name attribute for the details element.
• headingLevel: Semantic HTML heading level ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'). Default: 'h3'.
• headingSize: Visual size of the heading ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'). Default: 'h6'.
• variant: Visual style ('default' | 'chevron'). Default: 'default'.
• open: Whether the item is initially expanded. Default: false.
• class: Optional CSS class names.

import { Accordion, AccordionItem } from 'accessible-astro-components';

<Accordion>
  <AccordionItem title="Section 1" headingLevel="h2" open={true}>
    <p>Content for section 1.</p>
  </AccordionItem>
  <AccordionItem title="Section 2">
    <p>Content for section 2.</p>
  </AccordionItem>
</Accordion>

The ToastProvider component manages the display area for toast notifications. It should be placed in your application layout to ensure toasts are rendered correctly.

Props:

• position: Viewport position ('bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center'). Default: 'bottom-right'.
• duration: Default auto-dismiss duration in milliseconds. Default: 5000.
• maxToasts: Maximum number of toasts to show simultaneously. Default: 5.
• ariaLabel: Accessible label for the toast region. Default: 'Notifications'.
• zIndex: CSS z-index value (applied via --toast-z-index). Default: 'var(--z-index-8, 80)'.
• portal: If true, moves the provider to document.body on initialization to escape stacking contexts. Default: false.
• style: Inline styles appended after the computed zIndex.
• class: Optional CSS class names.

<ToastProvider position="top-center" maxToasts={3} />

The library exposes global APIs on the window object to programmatically control accessibility and theme preferences. These APIs allow you to toggle settings that affect the entire document.

Dark Mode API:

• enable(): Enables dark mode (adds darkmode class to document.documentElement).
• disable(): Disables dark mode.
• toggle(): Toggles dark mode.
• isEnabled(): Returns whether dark mode is currently active.

High Contrast API:

• enable(): Enables high contrast mode (adds high-contrast class to document.documentElement).
• disable(): Disables high contrast mode.
• toggle(): Toggles high contrast mode.
• isEnabled(): Returns whether high contrast mode is currently active.

Reduced Motion API:

• enable(): Enables reduced motion (adds reduce-motion class to document.documentElement).
• disable(): Disables reduced motion.
• toggle(): Toggles reduced motion.
• isEnabled(): Returns whether reduced motion is currently active.

The following components are exported by the library, categorized by their primary function:

Layout & Structure

• Card
• Heading
• Media
• Video

Navigation

• Breadcrumbs & BreadcrumbsItem
• Link
• Pagination
• SkipLink
• Tabs, TabsList, TabsPanel, & TabsTab

Forms

• Checkbox
• Fieldset
• Form
• Input
• Radio
• Textarea

Feedback & Overlays

• Accordion & AccordionItem
• Avatar & AvatarGroup
• Badge
• Button
• Modal
• Notification
• Toast & ToastProvider
• Tooltip

Accessibility & Preferences

• DarkMode
• HighContrast
• ReducedMotion

export { default as Accordion } from './src/components/accordion/Accordion.astro'
export { default as AccordionItem } from './src/components/accordion/AccordionItem.astro'
export { default as Avatar } from './src/components/avatar/Avatar.astro'
export { default as AvatarGroup } from './src/components/avatar/AvatarGroup.astro'
export { default as Badge } from './src/components/badge/Badge.astro'
export { default as Breadcrumbs } from './src/components/breadcrumbs/Breadcrumbs.astro'
export { default as Button } from './src/components/button/Button.astro'
export { default as BreadcrumbsItem } from './src/components/breadcrumbs/BreadcrumbsItem.astro'
export { default as Card } from './src/components/card/Card.astro'
export { default as DarkMode } from './src/components/darkmode/DarkMode.astro'
export { default as HighContrast } from './src/components/highcontrast/HighContrast.astro'
export { default as Heading } from './src/components/heading/Heading.astro'
export { default as Link } from './src/components/link/Link.astro'
export { default as Media } from './src/components/media/Media.astro'
export { default as Modal } from './src/components/modal/Modal.astro'
export { default as Notification } from './src/components/notification/Notification.astro'
export { default as Pagination } from './src/components/pagination/Pagination.astro'
export { default as ReducedMotion } from './src/components/reducedmotion/ReducedMotion.astro'
export { default as SkipLink } from './src/components/skiplink/SkipLink.astro'
export { default as Tabs } from './src/components/tabs/Tabs.astro'
export { default as TabsList } from './src/components/tabs/TabsList.astro'
export { default as TabsPanel } from './src/components/tabs/TabsPanel.astro'
export { default as TabsTab } from './src/components/tabs/TabsTab.astro'
export { default as Toast } from './src/components/toast/Toast.astro'
export { default as ToastProvider } from './src/components/toast/ToastProvider.astro'
export { default as Tooltip } from './src/components/tooltip/Tooltip.astro'
export { default as Video } from './src/components/video/Video.astro'

// Forms
export { default as Checkbox } from './src/components/forms/Checkbox.astro'
export { default as Fieldset } from './src/components/forms/Fieldset.astro'
export { default as Form } from './src/components/forms/Form.astro'
export { default as Input } from './src/components/forms/Input.astro'
export { default as Radio } from './src/components/forms/Radio.astro'
export { default as Textarea } from './src/components/forms/Textarea.astro'

The Video component renders an accessible video player (supporting YouTube or direct embeds) within an iframe. It uses an aspect ratio to maintain the video's dimensions and supports lazy loading for performance.

Props

Note: Any additional HTML attributes passed to the component will be spread onto the root element.

import { Video } from 'accessible-astro-components';

<Video 
  src="https://www.youtube.com/embed/example" 
  title="Product Demo Video" 
  ratio="16:9" 
/>