Find the keyboard focus.

Prepare sets this sample counter to zero. It does not change your cart or login.

Keyboard · Focus

Where is the focus?

Tab to this button. Activate it with Enter or Space, then compare both variants.

Activations in this session: 0

With barriers: Only this sample button hides its visible focus indicator.

View the shared source

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.

src/components/features/sample/focus-sample.tsx

'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>;
}

src/app/[locale]/globals.css

: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;}