marquee

<!-- Basic Marquee (Stock Ticker) -->
<div role="marquee" aria-label="Stock Prices">
  <span>AAPL: $150.25</span>
  <span>GOOGL: $2,800.50</span>
  <span>MSFT: $310.75</span>
</div>

<!-- Implicit aria-live="off" - updates are NOT announced -->
<!-- This is appropriate for non-essential, rapidly changing data -->

<!-- Stock Ticker / News Ticker -->
<div id="stock-ticker" 
     role="marquee" 
     aria-label="Live Stock Prices"
     class="ticker">
  <div class="ticker-content">
    <span class="stock">AAPL: <strong id="aapl">$150.25</strong></span>
    <span class="stock">GOOGL: <strong id="googl">$2,800.50</strong></span>
    <span class="stock">MSFT: <strong id="msft">$310.75</strong></span>
  </div>
</div>

<script>
  // Update prices every second
  setInterval(async () => {
    const prices = await fetchStockPrices();
    document.getElementById('aapl').textContent = `$${prices.AAPL}`;
    document.getElementById('googl').textContent = `$${prices.GOOGL}`;
    document.getElementById('msft').textContent = `$${prices.MSFT}`;
    
    // Screen readers do NOT announce these updates
    // (because aria-live="off" by default)
  }, 1000);
</script>

<!-- News Ticker / Scrolling Text -->
<div role="marquee" 
     aria-label="Breaking News Ticker"
     class="news-ticker">
  <div class="ticker-text">
    Breaking: New product launch announced • 
    Weather: Sunny, 75°F • 
    Sports: Team wins championship • 
    Traffic: Highway 101 delays expected
  </div>
</div>

<style>
  .news-ticker {
    overflow: hidden;
    white-space: nowrap;
  }
  
  .ticker-text {
    display: inline-block;
    animation: scroll-left 30s linear infinite;
  }
  
  @keyframes scroll-left {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>

<!-- Note: Provide alternative way to access this information
     since screen readers don't announce it -->

// React Marquee Component
import { useState, useEffect } from 'react';

function StockTicker({ stocks }) {
  const [prices, setPrices] = useState(stocks);
  
  useEffect(() => {
    // Simulate real-time price updates
    const interval = setInterval(async () => {
      const updated = await fetchLatestPrices();
      setPrices(updated);
    }, 2000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div
      role="marquee"
      aria-label="Stock Price Ticker"
      className="stock-ticker"
    >
      {prices.map(stock => (
        <div key={stock.symbol} className="stock-item">
          <span className="symbol">{stock.symbol}</span>
          <span className={stock.change >= 0 ? 'positive' : 'negative'}>
            {'$'}{stock.price.toFixed(2)}
          </span>
          <span className="change">
            {stock.change >= 0 ? '▲' : '▼'} 
            {Math.abs(stock.change).toFixed(2)}%
          </span>
        </div>
      ))}
    </div>
  );
}

// News Ticker Example
function NewsTicker({ items }) {
  return (
    <>
      {/* Visual marquee (not announced) */}
      <div
        role="marquee"
        aria-label="Breaking News"
        className="marquee-container"
      >
        <div className="scrolling-text">
          {items.map((item, i) => (
            <span key={i}>{item} • </span>
          ))}
        </div>
      </div>
      
      {/* Alternative: Accessible news list */}
      <details className="sr-only">
        <summary>View all news items</summary>
        <ul>
          {items.map((item, i) => (
            <li key={i}>{item}</li>
          ))}
        </ul>
      </details>
    </>
  );
}