Accessibility

"use client";

import React from "react";
import FormWizard from "react-form-wizard-component";
import "react-form-wizard-component/styles.css";

export default function AccessibleWizards() {
  return (
    <>
      <p className="aw-note">
        Click into either wizard, then use <kbd>←</kbd> <kbd>→</kbd>{" "}
        <kbd>Home</kbd> <kbd>End</kbd>. Only the focused wizard moves. Tabs also
        activate with <kbd>Enter</kbd> and <kbd>Space</kbd>.
      </p>

      <div className="aw-grid">
        <FormWizard title="Wizard A" ariaLabel="Wizard A">
          <FormWizard.TabContent title="A1">First panel of A</FormWizard.TabContent>
          <FormWizard.TabContent title="A2">Second panel of A</FormWizard.TabContent>
          <FormWizard.TabContent title="A3">Third panel of A</FormWizard.TabContent>
        </FormWizard>

        <FormWizard title="Wizard B" ariaLabel="Wizard B">
          <FormWizard.TabContent title="B1">First panel of B</FormWizard.TabContent>
          <FormWizard.TabContent title="B2">Second panel of B</FormWizard.TabContent>
          <FormWizard.TabContent title="B3">Third panel of B</FormWizard.TabContent>
        </FormWizard>
      </div>

      <style>{`
        .aw-note { color: #5c6968; font-size: 14px; }
        .aw-grid {
          display: grid; gap: 24px;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }
      `}</style>
    </>
  );
}