Find the keyboard focus.

These are the actual source files used by this fixture. A generated snapshot is checked against the implementation before each build validation. Imports and reusable helpers remain visible; this is not a separate teaching copy.

'use client';
import {useSyncExternalStore} from 'react';
import {useTranslations} from 'next-intl';
import {Button} from '@/components/ui/button';
import {readState, writeState} from '@/lib/state/registry';
import type {Variant} from '@/lib/routes';
function subscribe(callback: () => void) {window.addEventListener('demo-state-change', callback); return () => window.removeEventListener('demo-state-change', callback);}
export function FocusSample({variant}: {variant: Variant}) {
  const t = useTranslations('Sample');
  const count = useSyncExternalStore(subscribe, () => readState('ui').activations, () => 0);
  return <section className="sample-panel" aria-labelledby="sample-heading" data-scenario="keyboard-focus">
    <div className="sample-index" aria-hidden="true">01</div>
    <div><p className="eyebrow">{t('label')}</p><h2 id="sample-heading">{t('title')}</h2><p>{t('instructions')}</p>
      <Button id="sample-focus-button" data-testid="sample-focus-button" className={variant === 'barriers' ? 'scenario-keyboard-focus-barriers' : ''} onClick={() => {
        try {writeState('ui', {activations: Math.min(count + 1, 1000)});} catch {window.dispatchEvent(new Event('demo-storage-error'));}
      }}>{t('activate')}</Button>
      <p role="status" className="sample-result">{t('count', {count})}</p>
      <p className="sample-note">{t(variant === 'barriers' ? 'barriersNote' : 'improvedNote')}</p>
    </div>
  </section>;
}

:focus-visible {outline:3px solid var(--focus);outline-offset:4px;}
.scenario-keyboard-focus-barriers:focus,.scenario-keyboard-focus-barriers:focus-visible {outline:none;box-shadow:none;}