a11y: keyboard-operable editor chrome + topbar aria-labels

Clickable <div> rows/tiles (page list, layer tree, template cards, asset
picker grid) now expose role="button", a tab stop, and Enter/Space
activation via a shared clickableProps() helper, matching their existing
onClick behavior. TopBar icon-only controls (device switcher, undo/redo,
save, publish, templates, code, preview, back) gain aria-label alongside
their existing title tooltips.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/utils/a11y.ts

@@ -0,0 +1,30 @@
+import type { KeyboardEvent } from 'react';
+
+export interface ClickableProps {
+  role: 'button';
+  tabIndex: number;
+  onClick: () => void;
+  onKeyDown: (e: KeyboardEvent) => void;
+}
+
+/**
+ * Props to spread onto a non-interactive element (typically a `<div>`) that
+ * acts like a button (e.g. a clickable list row or grid tile), so it
+ * becomes keyboard-operable: `role="button"`, a tab stop, and Enter/Space
+ * activation in addition to the existing click behavior.
+ *
+ * Usage: `<div {...clickableProps(() => doThing())}>...</div>`
+ */
+export function clickableProps(onActivate: () => void): ClickableProps {
+  return {
+    role: 'button',
+    tabIndex: 0,
+    onClick: onActivate,
+    onKeyDown: (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onActivate();
+      }
+    },
+  };
+}