フォーカスインジケーターとキーボード操作

/* NEVER do this globally */
* {
  outline: none;  /* destroys keyboard accessibility */
}

/* WRONG approach in Tailwind */
<button class='focus:outline-none'>...</button>
/* Removes focus for keyboard users too */

/* BETTER: suppress only for mouse users */
<button class='focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'>
  This button shows ring for keyboard users only
</button>

<!-- Standard button with focus-visible ring -->
<button
  class='
    px-4 py-2 bg-blue-600 text-white rounded-lg font-medium
    focus:outline-none
    focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
  '
>
  Submit
</button>

<!-- Link with focus-visible style -->
<a
  href='/docs'
  class='
    text-blue-700 underline
    focus:outline-none
    focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:rounded
  '
>
  Documentation
</a>

<!-- Ring width options -->
<button class='ring-1 ...'>1px ring</button>
<button class='ring-2 ...'>2px ring (recommended)</button>
<button class='ring-4 ...'>4px ring (high visibility)</button>

<!-- Ring with offset (recommended for buttons) -->
<button class='focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'>
  With offset gap
</button>

<!-- Ring offset on dark background -->
<div class='bg-gray-900 p-4'>
  <button class='
    bg-blue-600 text-white px-4 py-2 rounded
    focus-visible:ring-2 focus-visible:ring-blue-400
    focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900
  '>Dark bg button</button>
</div>

<!-- Native elements: in tab order automatically -->
<button>First</button>  <!-- tab stop 1 -->
<a href='/'>Second</a>  <!-- tab stop 2 -->
<input type='text' />   <!-- tab stop 3 -->

<!-- Custom component: add to tab order with tabindex='0' -->
<div
  role='button'
  tabindex='0'
  class='focus-visible:ring-2 focus-visible:ring-blue-500'
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Custom interactive element
</div>

<!-- Remove from tab order but allow programmatic focus -->
<div tabindex='-1' ref={modalPanelRef}>
  Modal content (focused by JS, not Tab)
</div>

// Focus management after route change (React/Next.js)
import { useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';

function MainContent({ children }) {
  const mainRef = useRef(null);
  const pathname = usePathname();

  useEffect(() => {
    // Move focus to main content on route change
    mainRef.current?.focus();
  }, [pathname]);

  return (
    <main
      ref={mainRef}
      tabIndex={-1}  // focusable but not in tab order
      className='focus:outline-none'
    >
      {children}
    </main>
  );
}

<!-- Skip nav: hidden until focused by keyboard -->
<a
  href='#main-content'
  class='
    sr-only
    focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50
    focus:bg-white focus:text-blue-700 focus:font-semibold
    focus:px-4 focus:py-2 focus:rounded-lg focus:shadow-lg
    focus:ring-2 focus:ring-blue-500
  '
>
  Skip to main content
</a>

<nav><!-- navigation --></nav>

<main id='main-content' tabIndex={-1} className='focus:outline-none'>
  <!-- page content -->
</main>

// Arrow key navigation for a custom tab list
function TabList({ tabs }) {
  const tabRefs = useRef([]);

  const handleKeyDown = (e, index) => {
    let newIndex;
    if (e.key === 'ArrowRight') newIndex = (index + 1) % tabs.length;
    if (e.key === 'ArrowLeft') newIndex = (index - 1 + tabs.length) % tabs.length;
    if (e.key === 'Home') newIndex = 0;
    if (e.key === 'End') newIndex = tabs.length - 1;

    if (newIndex !== undefined) {
      e.preventDefault();
      tabRefs.current[newIndex]?.focus();
    }
  };

  return (
    <div role='tablist'>
      {tabs.map((tab, i) => (
        <button
          key={tab.id}
          ref={el => tabRefs.current[i] = el}
          role='tab'
          onKeyDown={e => handleKeyDown(e, i)}
          className='focus-visible:ring-2 focus-visible:ring-blue-500'
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}

/* High contrast mode compatible focus style */
@media (forced-colors: active) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible {
    outline: 3px solid ButtonText;
    outline-offset: 2px;
  }
}

/* Tailwind equivalent for standard mode */
<button
  class='
    focus:outline-none
    focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600
    /* Fallback for High Contrast Mode uses CSS above */
  '
>
  Accessible button
</button>

/*
  Keyboard navigation test checklist:

  Tab through entire page:
  [ ] Every interactive element is reachable
  [ ] Every focused element shows a visible indicator
  [ ] Tab order follows visual reading order
  [ ] No focus traps outside intentional ones (modals)

  Activate elements:
  [ ] Enter activates buttons and links
  [ ] Space activates checkboxes and toggles
  [ ] Arrow keys navigate menus, tabs, selects

  Modal behavior:
  [ ] Focus enters modal on open
  [ ] Tab stays inside modal while open
  [ ] Escape closes modal
  [ ] Focus returns to trigger on close

  Automated:
  axe-core, Lighthouse accessibility audit
*/

/* globals.css — consistent focus baseline */
@layer base {
  :focus-visible {
    outline: 2px solid #3b82f6;  /* blue-500 */
    outline-offset: 2px;
    border-radius: 0.25rem;
  }

  /* Remove outline only for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }
}

/* Components that need ring instead of outline: */
/* Still override per-element with focus-visible:ring-2 etc. */
<button class='focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'>