import type { Meta, StoryObj } from '@storybook/web-components-vite'; import { html } from 'lit'; import './index.ts'; import type { USASkipLink } from './usa-skip-link.js'; const meta: Meta = { title: 'Navigation/Skip Link', component: 'usa-skip-link', parameters: { layout: 'padded', docs: { description: { component: ` The Skip Link component provides accessible navigation functionality for keyboard and screen reader users, allowing them to quickly jump to main content or other important page sections. Key accessibility features: - Hidden until focused with Tab key - Keyboard accessible navigation - Screen reader friendly - USWDS compliant styling and behavior `, }, }, }, argTypes: { href: { control: 'text', description: 'Target element ID or URL fragment', }, text: { control: 'text', description: 'Display text for the skip link', }, multiple: { control: 'boolean', description: 'Whether this is part of multiple skip links', }, }, }; export default meta; type Story = StoryObj; // Basic skip link examples export const Default: Story = { args: { href: '#main-content', text: 'Skip to main content', multiple: false, }, render: (args) => html`

Press Tab to see the skip link appear!
The skip link is hidden until focused with the keyboard.

Main Content

This is the main content area that users can skip to.

Notice how the skip link focuses this element when activated.

`, }; export const CustomTarget: Story = { args: { href: '#navigation', text: 'Skip to navigation', multiple: false, }, render: (args) => html`

Tab to focus, then press Enter to skip to navigation.

`, }; export const MultipleSkipLinks: Story = { args: { multiple: true, }, render: (args) => html`

Multiple skip links for complex page layouts.
Tab through to see all available skip options.

Main Content

Primary page content goes here.

`, }; // Complex website examples export const ComplexWebsite: Story = { args: { multiple: true, }, render: (args) => html`

Complex website skip navigation pattern.
Comprehensive skip links for multi-section site structure.

Example Organization

Main Content

Welcome to Example Organization. We provide essential services and solutions to our customers and partners.

Our Services

Customer programs and solutions
Business consulting services
Information and resources
Research and analytics

`, }; export const AccessibilityDemo: Story = { args: { href: '#accessible-content', text: 'Skip to accessible content', multiple: false, }, render: (args) => html`

Accessibility Features Demonstration

Keyboard Navigation: Press Tab to focus the skip link
Screen Reader: Announces "Skip to accessible content, link"
Focus Management: Automatically focuses target when activated
Visual Feedback: High contrast colors and focus indicators

{ console.log('Skip link activated:', e.detail); // Announce to screen readers using insertAdjacentHTML const announcementHtml = `

Navigated to ${e.detail.text}

`; document.body.insertAdjacentHTML('beforeend', announcementHtml); const announcement = document.body.lastElementChild as HTMLElement; setTimeout(() => announcement?.remove(), 1000); }} >

Simulated page header and navigation content...

This represents content that users might want to skip over.

Accessible Content

This content becomes focused when the skip link is activated.

Notice how:

The browser scrolls to this section
This element receives keyboard focus
Screen readers announce the focus change
Users can continue navigation from here

`, }; export const InteractiveDemo: Story = { args: { href: '#interactive-target', text: 'Skip to interactive content', multiple: false, }, render: (args) => html`

Try it out: Press Tab to focus the skip link, then Enter to activate!

Watch the console for event details and observe the focus behavior.

{ console.log('Skip link event:', e.detail); alert(`Skip link activated!\nTarget: ${e.detail.href}\nText: ${e.detail.text}`); }} >

📝 This content would normally be skipped...

🧭 Header navigation, breadcrumbs, sidebar links, etc.

🎯 Interactive Target Content

You've successfully skipped to the main content!

This element now has focus and you can continue navigating from here.

Interactive Elements:

`, }; // Edge cases and testing export const CustomStyling: Story = { args: { href: '#styled-content', text: 'Skip to styled content', multiple: false, }, render: (args) => html`

Custom styled skip link example.
The skip link uses custom colors, sizing, and focus effects while maintaining accessibility.

Content to skip over...

Styled Target Content

The skip link successfully navigated here with custom styling.

`, }; export const ErrorHandling: Story = { args: { href: '#non-existent-target', text: 'Skip to non-existent target', multiple: false, }, render: (args) => html`

Error handling demonstration:

This skip link points to a target that doesn't exist. The component handles this gracefully without throwing errors.

{ console.warn('Skip link attempted navigation to non-existent target:', e.detail); const announcementHtml = `

Target not found - navigation failed gracefully

`; document.body.insertAdjacentHTML('beforeend', announcementHtml); const announcement = document.body.lastElementChild as HTMLElement; setTimeout(() => announcement?.remove(), 3000); }} >

Notice that activating the skip link above:

✅ Doesn't cause JavaScript errors
✅ Still fires the custom event
✅ Maintains component functionality
⚠️ Doesn't change focus (target not found)

`, }; export const RealWorldExample: Story = { args: { multiple: true, }, render: (args) => html`

U.S. Department of Example

Welcome to Our Agency

We serve the American people by providing essential government services and information.

Latest News

New service portal launch - streamlined access to benefits
Updated accessibility standards implementation
Public comment period open for new regulations

How to Get Help

Online service portal
Phone: 1-800-EXAMPLE
In-person at local offices
Email support

Instructions: Press Tab multiple times to see all skip links, then use Enter to navigate to different sections.

Accessibility note: This demonstrates a complete government website skip navigation pattern.

`, };