Den Tastaturfokus finden.

Vorbereiten setzt den Beispielzähler auf null. Warenkorb und Anmeldung bleiben dabei erhalten.

Tastatur · Fokus

Wo befindet sich der Fokus?

Navigiere mit der Tab-Taste zu dieser Schaltfläche. Betätige sie mit Enter oder der Leertaste und vergleiche beide Varianten.

Betätigungen in dieser Sitzung: 0

Mit Barrieren: Nur diese Beispiel-Schaltfläche blendet den sichtbaren Fokus aus.

Gemeinsamen Quellcode ansehen

Dies sind die tatsächlichen Quelldateien dieses Beispiels. Der erzeugte Stand wird bei der Build-Validierung mit der Implementierung verglichen. Imports und gemeinsame Hilfsfunktionen bleiben sichtbar; es gibt keine getrennte Lehrkopie.

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