fix(a11y): make choice cards operable by keyboard

CardSelector's options were Cards with an onClick and nothing else — no
role, no tab stop, no key handler — so the split method (and every other
card choice built on it) could not be reached or chosen without a mouse.
They are controls, so they now say so, and a disabled option is marked
aria-disabled rather than merely faded.

Found by the new story: the component had none, so it had never been
scanned.

Author: reecebrowne

frontend/editor/src/core/components/shared/CardSelector.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import CardSelector from "@app/components/shared/CardSelector";
+import {
+  METHOD_OPTIONS,
+  type MethodOption,
+  type SplitMethod,
+} from "@app/constants/splitConstants";
+
+/**
+ * A stack of choice cards, each labelled from an i18n prefix + name pair.
+ * Driven here by the Split tool's real method options rather than invented
+ * keys, so the labels are the ones users actually see and the story does not
+ * introduce translation keys that have to be maintained.
+ */
+const meta: Meta<typeof CardSelector<SplitMethod, MethodOption>> = {
+  title: "Shared/CardSelector",
+  component: CardSelector,
+  parameters: { layout: "padded" },
+  args: { onSelect: () => {} },
+};
+export default meta;
+
+type Story = StoryObj<typeof CardSelector<SplitMethod, MethodOption>>;
+
+/** Every split method. */
+export const Default: Story = { args: { options: METHOD_OPTIONS } };
+
+/** A short list — two choices. */
+export const FewOptions: Story = {
+  args: { options: METHOD_OPTIONS.slice(0, 2) },
+};
+
+/** A single choice, where the selector is really just a confirmation. */
+export const SingleOption: Story = {
+  args: { options: METHOD_OPTIONS.slice(0, 1) },
+};
+
+/** Inert while the tool is busy or its endpoint is still resolving. */
+export const Disabled: Story = {
+  args: { options: METHOD_OPTIONS, disabled: true },
+};
+
+/** Nothing available — e.g. every method needs an endpoint that is switched
+ *  off. */
+export const Empty: Story = { args: { options: [] } };

frontend/editor/src/core/components/shared/CardSelector.tsx

@@ -57,6 +57,20 @@ const CardSelector = <T, K extends CardOption<T>>({
               radius="md"
               w="100%"
               h={"2.8rem"}
+              // A choice card is a control: without these it is a div with an
+              // onClick, so the option cannot be reached or chosen by keyboard.
+              // aria-disabled rather than removal keeps the option visible and
+              // explains why it is inert.
+              role="button"
+              tabIndex={disabled ? -1 : 0}
+              aria-disabled={disabled || undefined}
+              onKeyDown={(e) => {
+                if (disabled) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleOptionClick(option.value);
+                }
+              }}
               style={{
                 cursor: disabled ? "default" : "pointer",
                 backgroundColor: "var(--mantine-color-gray-2)",

frontend/editor/src/core/components/viewer/nonpdf/MarkdownRenderer.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { renderMarkdown } from "@app/components/viewer/nonpdf/MarkdownRenderer";
+
+/**
+ * How a `.md` file is rendered in the non-PDF viewer. `renderMarkdown` returns
+ * nodes rather than a component, so the stories render its output directly —
+ * the same thing the viewer mounts.
+ */
+const meta: Meta = {
+  title: "Viewer/NonPdf/MarkdownRenderer",
+  parameters: { layout: "padded" },
+};
+export default meta;
+
+const Doc = ({ md }: { md: string }) => <div>{renderMarkdown(md)}</div>;
+
+/** Headings, emphasis, a list and a link — ordinary prose. */
+export const Prose: StoryObj = {
+  render: () => (
+    <Doc
+      md={[
+        "# Release notes",
+        "",
+        "The **August** build focuses on _throughput_.",
+        "",
+        "## Highlights",
+        "",
+        "- Batch processing is no longer serialised",
+        "- Thumbnails render off the main thread",
+        "- See the [changelog](https://example.com/changelog)",
+      ].join("\n")}
+    />
+  ),
+};
+
+/** A fenced code block — the case with its own renderer override. */
+export const CodeBlock: StoryObj = {
+  render: () => (
+    <Doc
+      md={[
+        "Run the container:",
+        "",
+        "```bash",
+        "docker run -p 8080:8080 stirlingtools/stirling-pdf:latest",
+        "```",
+      ].join("\n")}
+    />
+  ),
+};
+
+/** A GFM table, which also has its own overrides for header and cell. */
+export const Table: StoryObj = {
+  render: () => (
+    <Doc
+      md={[
+        "| Format | Input | Output |",
+        "| --- | :-: | ---: |",
+        "| PDF | yes | yes |",
+        "| DOCX | yes | no |",
+        "| PNG | yes | yes |",
+      ].join("\n")}
+    />
+  ),
+};
+
+/** A wide table and a long code line — both must scroll inside the viewer
+ *  rather than widening it. */
+export const WideContent: StoryObj = {
+  render: () => (
+    <Doc
+      md={[
+        "```json",
+        '{ "id": "doc_01HQ8ZK3", "source": "s3://bucket/very/long/object/key/contract-2026-final-signed.pdf", "status": "complete" }',
+        "```",
+        "",
+        "| Field | Type | Description | Example | Notes |",
+        "| --- | --- | --- | --- | --- |",
+        "| id | string | Stable identifier | doc_01HQ8ZK3 | Opaque |",
+        "| status | enum | queued / complete / failed | complete | Poll or subscribe |",
+      ].join("\n")}
+    />
+  ),
+};
+
+/** Blockquote and nested list, the remaining common blocks. */
+export const QuotesAndNesting: StoryObj = {
+  render: () => (
+    <Doc
+      md={[
+        "> Redaction rewrites the page content stream.",
+        "",
+        "1. Select the region",
+        "   - Drag to extend",
+        "   - Shift-click to add another",
+        "2. Apply",
+      ].join("\n")}
+    />
+  ),
+};
+
+/** An empty document. */
+export const Empty: StoryObj = { render: () => <Doc md="" /> };