Accessibility pass, report control for homework exercises, clearer rail actions

- axe is clean across every screen in both themes, phone and desktop. Fixed:
  the hidden file inputs (aria-hidden + tabIndex -1 — they are opened by
  labelled buttons, so they should not be in the accessibility tree), the
  heading order (deck/homework/smart-review cards are h2 under the page h1;
  LearningSection takes a level so it stays h2 on the library and h3 inside
  the settings dialog) and landmarks around the study and review feeds.
- tests/contrast.mjs (new diagnostic): samples rendered pixels, because axe
  cannot judge text on blurred glass — it reports those nodes as incomplete.
  It skips disabled controls (1.4.3 exempts them) and content behind an open
  sheet. Result: no below-minimum text on any scanned screen.
- The report control exists in the homework guide too: under each "Try it
  yourself" exercise, labelled "Report exercise", without a skip (there is no
  queue to skip). lib/question-reports now takes deckId/deckTitle directly.
- The rail's two creation actions are buttons now (.nav-action) rather than
  quiet nav rows — once the library is full they were the only way to start
  something on desktop and read as just more navigation. "Make my homework"
  is "New homework" wherever it is an action (rail, empty state, share
  chooser, manifest shortcut); the page title and mode switch keep their
  wording.

Version 0.1.6 (three task bumps), SW -> freezmo-v52.

components/DataSection.tsx

@@ -78,6 +78,8 @@ export function DataSection() {
         <input
           ref={fileRef}
           type="file"
+        aria-hidden="true"
+        tabIndex={-1}
           accept="application/json,.json"
           className="hidden"
           onChange={(event) => void pick(event.target.files?.[0])}

components/DeckCard.tsx

@@ -182,12 +182,12 @@ export function DeckCard({
               </Button>
             </div>
           ) : (
-            <h3
+            <h2
               className="line-clamp-2 text-[15px] font-semibold leading-snug tracking-[-0.01em] text-[var(--text)]"
               title={deck.title}
             >
               {truncate(deck.title, 90)}
-            </h3>
+            </h2>
           )}
           {/* Phones: one compact meta line. */}
           <p className="mt-1 text-[12.5px] text-[var(--text-subtle)] sm:hidden">

components/HomeworkCard.tsx

@@ -62,12 +62,12 @@ export function HomeworkCard({
 
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 flex-1">
-          <h3
+          <h2
             className="line-clamp-2 text-[15px] font-semibold leading-snug tracking-[-0.01em] text-[var(--text)]"
             title={record.title}
           >
             {truncate(record.title, 90)}
-          </h3>
+          </h2>
           <p className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[12.5px] text-[var(--text-subtle)]">
             <span className="inline-flex items-center gap-1">
               {record.mode === "make" ? <BoltIcon className="size-3.5" /> : <PlayIcon className="size-3.5" />}

components/LearningSection.tsx

@@ -25,7 +25,12 @@ function urlBase64ToUint8Array(base64: string): Uint8Array {
  * the server has VAPID keys configured. Without them the reminder block is
  * hidden completely, exactly as if the feature did not exist.
  */
-export function LearningSection() {
+/**
+ * `level` keeps the heading order right in both places it is used: h2 on the
+ * library page (under its h1) and h3 inside the settings dialog (under its h2
+ * title).
+ */
+export function LearningSection({ level = 2 }: { level?: 2 | 3 } = {}) {
   const { t } = useI18n();
   const dailyGoal = useSyncExternalStore(
     settingsStore.subscribe,
@@ -154,7 +159,11 @@ export function LearningSection() {
 
   return (
     <section className="mb-4 space-y-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
-      <h3 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.learning")}</h3>
+      {level === 3 ? (
+        <h3 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.learning")}</h3>
+      ) : (
+        <h2 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.learning")}</h2>
+      )}
 
       <div className="space-y-1.5">
         <p className="text-[12px] font-semibold text-[var(--text)]">{t("settings.dailyGoal")}</p>

components/LibraryScreen.tsx

@@ -220,6 +220,8 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
         <input
           ref={importRef}
           type="file"
+        aria-hidden="true"
+        tabIndex={-1}
           accept="application/json,.json"
           className="sr-only"
           onChange={(event) => {

components/ReportQuestionButton.tsx

@@ -3,22 +3,31 @@
 import { haptic } from "@/lib/haptics";
 import { useI18n } from "@/lib/i18n";
 import { reportQuestion, unreportQuestion } from "@/lib/question-reports";
-import type { Activity, Deck } from "@/lib/schemas";
+import type { Activity } from "@/lib/schemas";
 import { showToast } from "@/lib/toast";
 
 /**
  * The red "!" report control that sits under the card (bottom-right of the
- * exercise): records the question, sends the operator a copy and skips past
- * it. Undo lives in the toast. 44px, because it is a thumb target.
+ * exercise): records the question, sends the operator a copy and — in the
+ * study feeds — skips past it. Undo lives in the toast. 44px, because it is a
+ * thumb target.
+ *
+ * `deckId` is a deck id in the feeds and the homework record's id for a
+ * homework exercise; `onSkip` is omitted where there is no queue to skip.
  */
 export function ReportQuestionButton({
-  deck,
+  deckId,
+  deckTitle,
   activity,
   onSkip,
+  labelKey = "feed.report",
 }: {
-  deck: Deck;
+  deckId: string;
+  deckTitle?: string;
   activity: Activity;
-  onSkip: () => void;
+  onSkip?: () => void;
+  /** i18n key for the accessible name ("Report question" / "Report exercise"). */
+  labelKey?: string;
 }) {
   const { t } = useI18n();
 
@@ -27,16 +36,16 @@ export function ReportQuestionButton({
       type="button"
       onClick={() => {
         haptic("tap");
-        reportQuestion({ deck, activity });
+        reportQuestion({ deckId, deckTitle, activity });
         showToast({
           message: t("feed.reported"),
           actionLabel: t("toast.undo"),
-          onAction: () => unreportQuestion(deck.id, activity.id),
+          onAction: () => unreportQuestion(deckId, activity.id),
         });
-        onSkip();
+        onSkip?.();
       }}
-      aria-label={t("feed.report")}
-      title={t("feed.report")}
+      aria-label={t(labelKey)}
+      title={t(labelKey)}
       className="grid size-11 shrink-0 place-items-center rounded-xl border-2 border-rose-400/80 text-base font-black leading-none text-rose-600 transition hover:bg-rose-50 dark:border-rose-400/50 dark:text-rose-300 dark:hover:bg-rose-400/10"
     >
       <span aria-hidden>!</span>

components/ReviewClient.tsx

@@ -81,36 +81,39 @@ export function ReviewClient({ mistakes, deckId }: { mistakes: boolean; deckId?:
   const sessionItems: SessionItem[] = session.map(({ deck, activity }) => ({ deck, activity }));
 
   return (
-    <SessionFeed
-      title={title}
-      items={sessionItems}
-      testId="review-feed"
-      onExit={() => router.push("/")}
-      onAnswered={(item, correct) => {
-        haptic(correct ? "success" : "error");
-        recordAnswer({
-          deckId: item.deck.id,
-          deckTitle: item.deck.title,
-          activityId: item.activity.id,
-          type: item.activity.type,
-          topic: item.activity.topic,
-          correct,
-        });
-      }}
-      renderResults={({ correct, total, score }) => (
-        <div className="card space-y-4 p-5 text-center">
-          <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">{title}</p>
-          <p className="text-[42px] font-extrabold leading-none text-[var(--text)]">{score}%</p>
-          <p className="text-sm font-medium text-[var(--text-muted)]">
-            {t("results.gotOf", { correct, total, retry: "" })}
-          </p>
-          <div className="flex flex-wrap justify-center gap-2">
-            <Button size="lg" className="touch-target" onClick={() => router.push("/")}>
-              {t("review.done")}
-            </Button>
+    // The feed is a fixed overlay, but its content still needs a landmark.
+    <main>
+      <SessionFeed
+        title={title}
+        items={sessionItems}
+        testId="review-feed"
+        onExit={() => router.push("/")}
+        onAnswered={(item, correct) => {
+          haptic(correct ? "success" : "error");
+          recordAnswer({
+            deckId: item.deck.id,
+            deckTitle: item.deck.title,
+            activityId: item.activity.id,
+            type: item.activity.type,
+            topic: item.activity.topic,
+            correct,
+          });
+        }}
+        renderResults={({ correct, total, score }) => (
+          <div className="card space-y-4 p-5 text-center">
+            <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">{title}</p>
+            <p className="text-[42px] font-extrabold leading-none text-[var(--text)]">{score}%</p>
+            <p className="text-sm font-medium text-[var(--text-muted)]">
+              {t("results.gotOf", { correct, total, retry: "" })}
+            </p>
+            <div className="flex flex-wrap justify-center gap-2">
+              <Button size="lg" className="touch-target" onClick={() => router.push("/")}>
+                {t("review.done")}
+              </Button>
+            </div>
           </div>
-        </div>
-      )}
-    />
+        )}
+      />
+    </main>
   );
 }

components/SessionFeed.tsx

@@ -221,7 +221,8 @@ export function SessionFeed({
                   <AiDisclaimer />
                   <div className="flex justify-end">
                     <ReportQuestionButton
-                      deck={item.deck}
+                      deckId={item.deck.id}
+                      deckTitle={item.deck.title}
                       activity={item.activity}
                       onSkip={() => {
                         setSkipped((current) => [...current, item.activity.id]);

components/SettingsDialog.tsx

@@ -407,7 +407,7 @@ export function SettingsDialog({
                     </section>
 
                     {/* ------------------------------------------- data & sync */}
-                    <LearningSection />
+                    <LearningSection level={3} />
                     <DataSection />
                     <SyncSection />
 
@@ -746,7 +746,7 @@ export function SettingsDialog({
                 </section>
 
                 {/* ------------------------------------------- data & sync */}
-                <LearningSection />
+                <LearningSection level={3} />
                 <DataSection />
                 <SyncSection />
 

components/Sidebar.tsx

@@ -137,23 +137,24 @@ function NavContent({ collapsed = false }: { collapsed?: boolean }) {
         {!collapsed ? <span className="flex-1 truncate text-left">{t("sidebar.collapse")}</span> : null}
       </button>
 
-      {/* new deck: a quiet row, not a competing primary button ---------- */}
+      {/* new deck: a button, not a nav row — it stays visible when the
+          library is already full (see .nav-action in globals.css) --------- */}
       <Link
         href="/create"
-        className={cn("nav-row mb-3", collapsed && "justify-center px-2")}
+        className={cn("nav-action mb-2.5", collapsed && "justify-center px-2")}
         title={t("common.newDeck")}
       >
-        <PlusIcon className="size-4 shrink-0" />
+        <PlusIcon className="size-4 shrink-0 text-accent-600 dark:text-accent-200" />
         {!collapsed ? <span className="flex-1 truncate text-left">{t("common.newDeck")}</span> : null}
       </Link>
 
-      {/* make my homework: same quiet row --------------------------------- */}
+      {/* new homework: the same button ------------------------------------ */}
       <Link
         href="/homework"
-        className={cn("nav-row mb-3", collapsed && "justify-center px-2")}
+        className={cn("nav-action mb-3", collapsed && "justify-center px-2")}
         title={t("homework.nav")}
       >
-        <SparklesIcon className="size-4 shrink-0" />
+        <SparklesIcon className="size-4 shrink-0 text-accent-600 dark:text-accent-200" />
         {!collapsed ? <span className="flex-1 truncate text-left">{t("homework.nav")}</span> : null}
       </Link>
 

components/StudyFeed.tsx

@@ -332,7 +332,8 @@ export function StudyFeed({ deck }: { deck: Deck }) {
                   <AiDisclaimer />
                   <div className="flex justify-end">
                     <ReportQuestionButton
-                      deck={currentDeck}
+                      deckId={currentDeck.id}
+                      deckTitle={currentDeck.title}
                       activity={activity}
                       onSkip={() => {
                         setSkipped((current) => [...current, activity.id]);

components/UploadScreen.tsx

@@ -650,6 +650,8 @@ export function UploadScreen() {
       <input
         ref={fileInputRef}
         type="file"
+        aria-hidden="true"
+        tabIndex={-1}
         accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
         multiple
         className="sr-only"
@@ -663,6 +665,8 @@ export function UploadScreen() {
       <input
         ref={cameraInputRef}
         type="file"
+        aria-hidden="true"
+        tabIndex={-1}
         accept="image/*"
         capture="environment"
         className="sr-only"
@@ -1128,6 +1132,8 @@ export function UploadScreen() {
           <input
             ref={fileInputRef}
             type="file"
+        aria-hidden="true"
+        tabIndex={-1}
             accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
             multiple
             className="sr-only"
@@ -1139,6 +1145,8 @@ export function UploadScreen() {
           <input
             ref={cameraInputRef}
             type="file"
+        aria-hidden="true"
+        tabIndex={-1}
             accept="image/*"
             capture="environment"
             className="sr-only"

components/chat/Composer.tsx

@@ -105,6 +105,8 @@ export function Composer({
         <input
           ref={fileInput}
           type="file"
+        aria-hidden="true"
+        tabIndex={-1}
           accept="image/*,application/pdf,.docx,.pptx,.odt,.txt,.md,.csv"
           className="sr-only"
           onChange={(event) => {

components/homework/HomeworkGuide.tsx

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActivityRenderer } from "@/components/activities";
 import { PromptCard, QuestionText } from "@/components/activities/shared";
 import { AiDisclaimer } from "@/components/AiDisclaimer";
+import { ReportQuestionButton } from "@/components/ReportQuestionButton";
 import { XIcon } from "@/components/icons";
 import { Button, ProgressBar } from "@/components/ui";
 import { AskButton } from "@/components/chat/AskButton";
@@ -246,7 +247,7 @@ export function HomeworkGuide({
 
               {/* checkpoint or a plain next button */}
               {step.checkpoint ? (
-                <div className="space-y-2">
+                <div className="space-y-3">
                   <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
                     {t("homework.guide.tryIt")}
                   </p>
@@ -263,6 +264,16 @@ export function HomeworkGuide({
                     }}
                     onNext={() => goTo(stepIndex + 1)}
                   />
+                  {/* Same report control as the study feeds, under the
+                      exercise (the homework record is the "deck" here). */}
+                  <div className="flex justify-end">
+                    <ReportQuestionButton
+                      deckId={record.id}
+                      deckTitle={record.title}
+                      activity={step.checkpoint}
+                      labelKey="homework.report"
+                    />
+                  </div>
                 </div>
               ) : (
                 <Button className="touch-target self-start" onClick={() => goTo(stepIndex + 1)}>

components/homework/HomeworkInput.tsx

@@ -246,6 +246,8 @@ export function HomeworkInput({
       <input
         ref={solutionFileRef}
         type="file"
+        aria-hidden="true"
+        tabIndex={-1}
         accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
         multiple
         className="sr-only"
@@ -257,6 +259,8 @@ export function HomeworkInput({
       <input
         ref={solutionCameraRef}
         type="file"
+        aria-hidden="true"
+        tabIndex={-1}
         accept="image/*"
         capture="environment"
         className="sr-only"
@@ -378,6 +382,8 @@ export function HomeworkInput({
     <input
       ref={fileInputRef}
       type="file"
+        aria-hidden="true"
+        tabIndex={-1}
       accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
       multiple
       className="sr-only"
@@ -391,6 +397,8 @@ export function HomeworkInput({
     <input
       ref={cameraInputRef}
       type="file"
+        aria-hidden="true"
+        tabIndex={-1}
       accept="image/*"
       capture="environment"
       className="sr-only"
@@ -756,6 +764,8 @@ export function HomeworkInput({
         <input
           ref={fileInputRef}
           type="file"
+        aria-hidden="true"
+        tabIndex={-1}
           accept={`${ACCEPTED_TYPES.join(",")},${DOCUMENT_ACCEPT_ATTR}`}
           multiple
           className="sr-only"
@@ -767,6 +777,8 @@ export function HomeworkInput({
         <input
           ref={cameraInputRef}
           type="file"
+        aria-hidden="true"
+        tabIndex={-1}
           accept="image/*"
           capture="environment"
           className="sr-only"