Skip to content

feat: OnboardingTour with WCAG 2.1 AA keyboard focus outlines (FWC26) #820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
greatest0fallt1me merged 3 commits into from
Jul 29, 2026
Merged

feat: OnboardingTour with WCAG 2.1 AA keyboard focus outlines (FWC26) #820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1f1fc3e
feat: OnboardingTour with WCAG 2.1 AA keyboard focus outlines (FWC26)
Legit003 Jul 28, 2026
e1c14d0
Merge branch 'main' into feat/onboarding-tour-focus-a11y
greatest0fallt1me Jul 29, 2026
e340b18
Merge branch 'main' into feat/onboarding-tour-focus-a11y
greatest0fallt1me Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
import PublishApi from "./pages/PublishApi";
import { startRouteLoading, stopRouteLoading } from "./hooks/useRouteLoading";
import { formatUsdc, formatUsdShortcut } from "./utils/format";
import DepositPreview from "./components/DepositPreview";

Check failure on line 15 in src/App.tsx

View workflow job for this annotation

GitHub Actions / TypeScript check & production build 

'DepositPreview' is declared but its value is never read.
import { EXPLORER_BASE_URL, MIN_DEPOSIT, NETWORK_FEE, PRESET_AMOUNTS } from "./config/constants";
import CompareDrawer from "./components/CompareDrawer";
import CompareTray from "./components/CompareTray";
Expand All @@ -22,6 +22,7 @@
import DesignSystemDocs from "./pages/DesignSystemDocs";
import A11yAudit from "./pages/A11yAudit";
import RateLimitCard from "./pages/RateLimitCard";
import OnboardingTour from "./pages/OnboardingTour";
import { ShortcutsModal } from "./components/ShortcutsModal";
import { ToastProvider } from "./components/Toast";
import { InvoiceCard } from "./pages/InvoiceCard";
Expand Down Expand Up @@ -123,6 +124,7 @@
designSystem: "/design-system/docs",
serverError: "/500",
rateLimitCard: "/rate-limit",
onboardingTour: "/onboarding-tour",
} as const;

function createMockHash() {
Expand Down Expand Up @@ -279,7 +281,7 @@
[APP_ROUTES.billing]: "Billing – Callora",
"/api-usage": "API Usage – Callora",
[APP_ROUTES.landing]: "Callora",
[APP_ROUTES.endpointSummary]: "Endpoint Summary – Callora",

Check failure on line 284 in src/App.tsx

View workflow job for this annotation

GitHub Actions / TypeScript check & production build 

Property 'endpointSummary' does not exist on type '{ readonly landing: "/"; readonly dashboard: "/dashboard"; readonly marketplace: "/marketplace"; readonly publish: "/publish"; readonly myApis: "/apis/my-apis"; readonly planBadge: "/apis/plan-badge"; ... 8 more ...; readonly onboardingTour: "/onboarding-tour"; }'.
};
const routeDescriptionMap: Record<string, string> = {
[APP_ROUTES.marketplace]: "Explore APIs on the Callora marketplace, discover and integrate APIs for your applications.",
Expand All @@ -287,7 +289,7 @@
[APP_ROUTES.billing]: "Manage your USDC vault, deposit funds, and view transaction status.",
"/api-usage": "Monitor API usage, request stats, and view call history.",
[APP_ROUTES.landing]: "Callora - Programmable API Access, pay-per-call billing, and on-chain settlement.",
[APP_ROUTES.endpointSummary]: "Quick reference list of all API endpoints on Callora.",

Check failure on line 292 in src/App.tsx

View workflow job for this annotation

GitHub Actions / TypeScript check & production build 

Property 'endpointSummary' does not exist on type '{ readonly landing: "/"; readonly dashboard: "/dashboard"; readonly marketplace: "/marketplace"; readonly publish: "/publish"; readonly myApis: "/apis/my-apis"; readonly planBadge: "/apis/plan-badge"; ... 8 more ...; readonly onboardingTour: "/onboarding-tour"; }'.
};
const currentTitle = routeTitleMap[location.pathname] ?? "Callora";
const currentDescription = routeDescriptionMap[location.pathname];
Expand All @@ -300,7 +302,7 @@
const [amountInput, setAmountInput] = useState("50");
const [selectedPreset, setSelectedPreset] = useState<number | "custom">(50);

const [isTouchDevice, setIsTouchDevice] = useState(false);

Check failure on line 305 in src/App.tsx

View workflow job for this annotation

GitHub Actions / TypeScript check & production build 

'isTouchDevice' is declared but its value is never read.
useEffect(() => {
setIsTouchDevice('ontouchstart' in window || navigator.maxTouchPoints > 0);
}, []);
Expand Down Expand Up @@ -595,7 +597,7 @@
<p className="eyebrow">Deposit USDC to Vault</p>
<h1>Review every number before you approve.</h1>
</div>
<button className="primary-button no-print" onClick={openDeposit}>

Check failure on line 600 in src/App.tsx

View workflow job for this annotation

GitHub Actions / TypeScript check & production build 

Type '(presetAmount?: number) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
Open deposit modal
</button>
</div>
Expand Down Expand Up @@ -685,6 +687,11 @@

<Route path={APP_ROUTES.rateLimitCard} element={<RateLimitCard />} />

<Route
path={APP_ROUTES.onboardingTour}
element={<OnboardingTour onComplete={() => navigate(APP_ROUTES.dashboard)} />}
/>

<Route path="*" element={<NotFound onGoHome={() => navigate(APP_ROUTES.dashboard)} />} />
</Routes>
</main>
Expand Down
Loading
Loading