separator

<!-- Decorative Separator (not focusable) -->
<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/services">Services</a>
</nav>

<hr />

<main>
  <h1>Welcome to Our Site</h1>
  <p>Content here...</p>
</main>

<!-- The native <hr> element is automatically a separator -->
<!-- For custom separators: -->
<div role="separator" aria-orientation="horizontal"></div>

<!-- Note: Decorative separators should NOT have tabindex -->

<!-- Focusable Separator (Splitter/Resizer) -->
<div class="split-view">
  <div id="left-panel" class="panel">
    Left content
  </div>
  
  <div 
    role="separator"
    aria-valuenow="50"
    aria-valuemin="10"
    aria-valuemax="90"
    aria-orientation="vertical"
    aria-label="Resize panels"
    aria-controls="left-panel right-panel"
    tabindex="0"
    class="splitter"
  >
    <div class="splitter-handle"></div>
  </div>
  
  <div id="right-panel" class="panel">
    Right content
  </div>
</div>

<!-- Focusable separators require:
     - tabindex="0"
     - aria-valuenow, aria-valuemin, aria-valuemax
     - aria-controls (optional but recommended) -->

<!-- Splitter with Full Keyboard Support -->
<div class="split-container">
  <div id="panel-a">Panel A</div>
  
  <div 
    role="separator"
    id="splitter"
    aria-valuenow="50"
    aria-valuemin="10"
    aria-valuemax="90"
    aria-orientation="horizontal"
    aria-label="Adjust panel sizes"
    aria-controls="panel-a panel-b"
    aria-valuetext="Panel A: 50%, Panel B: 50%"
    tabindex="0"
  ></div>
  
  <div id="panel-b">Panel B</div>
</div>

<script>
  const splitter = document.getElementById('splitter');
  const panelA = document.getElementById('panel-a');
  const panelB = document.getElementById('panel-b');
  let currentValue = 50;
  const step = 5;

  splitter.addEventListener('keydown', (e) => {
    let newValue = currentValue;

    switch (e.key) {
      case 'ArrowLeft':
      case 'ArrowUp':
        e.preventDefault();
        newValue = Math.max(10, currentValue - step);
        break;
      case 'ArrowRight':
      case 'ArrowDown':
        e.preventDefault();
        newValue = Math.min(90, currentValue + step);
        break;
      case 'Home':
        e.preventDefault();
        newValue = 10;
        break;
      case 'End':
        e.preventDefault();
        newValue = 90;
        break;
    }

    if (newValue !== currentValue) {
      currentValue = newValue;
      updateSplitter();
    }
  });

  function updateSplitter() {
    splitter.setAttribute('aria-valuenow', currentValue);
    splitter.setAttribute('aria-valuetext', 
      'Panel A: ' + currentValue + '%, Panel B: ' + (100 - currentValue) + '%'
    );
    
    panelA.style.width = currentValue + '%';
    panelB.style.width = (100 - currentValue) + '%';
  }
</script>

<!-- Using Native HTML Elements -->
<!-- Horizontal rule - automatically has separator role -->
<p>First paragraph of content.</p>
<hr />
<p>Second paragraph of content.</p>

<!-- Thematic break with styling -->
<hr class="fancy-separator" />

<style>
  hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #888, transparent);
    margin: 2rem 0;
  }
  
  .fancy-separator {
    height: 3px;
    background: linear-gradient(to right, #4f46e5, #7c3aed, #4f46e5);
    border-radius: 2px;
  }
</style>

<!-- For visual-only decoration that shouldn't be announced: -->
<div role="presentation" class="decorative-line"></div>
<!-- or -->
<div aria-hidden="true" class="decorative-line"></div>

// React Splitter Component
import { useState, useRef, useCallback, useEffect } from 'react';

interface SplitterProps {
  orientation?: 'horizontal' | 'vertical';
  initialPosition?: number;
  minPosition?: number;
  maxPosition?: number;
  onResize?: (position: number) => void;
  children: [React.ReactNode, React.ReactNode];
}

function Splitter({
  orientation = 'horizontal',
  initialPosition = 50,
  minPosition = 10,
  maxPosition = 90,
  onResize,
  children,
}: SplitterProps) {
  const [position, setPosition] = useState(initialPosition);
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const isHorizontal = orientation === 'horizontal';

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    const step = 5;
    let newPosition = position;

    switch (e.key) {
      case 'ArrowLeft':
      case 'ArrowUp':
        e.preventDefault();
        newPosition = Math.max(minPosition, position - step);
        break;
      case 'ArrowRight':
      case 'ArrowDown':
        e.preventDefault();
        newPosition = Math.min(maxPosition, position + step);
        break;
      case 'Home':
        e.preventDefault();
        newPosition = minPosition;
        break;
      case 'End':
        e.preventDefault();
        newPosition = maxPosition;
        break;
      default:
        return;
    }

    setPosition(newPosition);
    onResize?.(newPosition);
  }, [position, minPosition, maxPosition, onResize]);

  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    setIsDragging(true);
  }, []);

  useEffect(() => {
    if (!isDragging) return;

    const handleMouseMove = (e: MouseEvent) => {
      if (!containerRef.current) return;

      const rect = containerRef.current.getBoundingClientRect();
      const newPosition = isHorizontal
        ? ((e.clientX - rect.left) / rect.width) * 100
        : ((e.clientY - rect.top) / rect.height) * 100;

      const clampedPosition = Math.max(minPosition, Math.min(maxPosition, newPosition));
      setPosition(clampedPosition);
      onResize?.(clampedPosition);
    };

    const handleMouseUp = () => setIsDragging(false);

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, isHorizontal, minPosition, maxPosition, onResize]);

  const valueText = isHorizontal
    ? `Left panel: ${Math.round(position)}%, Right panel: ${Math.round(100 - position)}%`
    : `Top panel: ${Math.round(position)}%, Bottom panel: ${Math.round(100 - position)}%`;

  return (
    <div
      ref={containerRef}
      className={`splitter-container ${isHorizontal ? 'horizontal' : 'vertical'}`}
      style={{
        display: 'flex',
        flexDirection: isHorizontal ? 'row' : 'column',
      }}
    >
      <div style={{ [isHorizontal ? 'width' : 'height']: `${position}%` }}>
        {children[0]}
      </div>
      
      <div
        role="separator"
        aria-valuenow={Math.round(position)}
        aria-valuemin={minPosition}
        aria-valuemax={maxPosition}
        aria-orientation={orientation}
        aria-valuetext={valueText}
        aria-label="Resize panels"
        tabIndex={0}
        onKeyDown={handleKeyDown}
        onMouseDown={handleMouseDown}
        className={`splitter-handle ${isDragging ? 'dragging' : ''}`}
      />
      
      <div style={{ [isHorizontal ? 'width' : 'height']: `${100 - position}%` }}>
        {children[1]}
      </div>
    </div>
  );
}

// Usage
<Splitter orientation="horizontal" initialPosition={30}>
  <aside>Sidebar content</aside>
  <main>Main content</main>
</Splitter>

<!-- Separator in Menu Context -->
<ul role="menu" aria-label="Edit menu">
  <li role="menuitem">Undo</li>
  <li role="menuitem">Redo</li>
  
  <li role="separator"></li>
  
  <li role="menuitem">Cut</li>
  <li role="menuitem">Copy</li>
  <li role="menuitem">Paste</li>
  
  <li role="separator"></li>
  
  <li role="menuitem">Select All</li>
</ul>

<!-- In menus, separators group related items -->
<!-- They are NOT focusable and have no value attributes -->