Backfill interactive-control accessibility against the council (APG)

src/app/components/SpecEditor.tsx

@@ -27,8 +27,16 @@ import { useAppStore } from '../stores/AppStore';
 import { confirm } from '../stores/ConfirmStore';
 import { usePreviewStore } from '../stores/PreviewStore';
 import { selectActiveSnippet, selectShownText, useSnippetStore } from '../stores/SnippetStore';
+import { SegmentedControl, type SegmentedOption } from './SegmentedControl';
+import type { EditorView } from '../stores/SnippetStore';
 import styles from './SpecEditor.module.css';
 
+/** The two editor views as a single-select set (spec §03D). */
+const VIEW_OPTIONS: ReadonlyArray<SegmentedOption<EditorView>> = [
+  { value: 'draft', label: 'Draft' },
+  { value: 'published', label: 'Published' },
+];
+
 // Register the bundled Vega-Lite schema once: resolves `$schema` locally (no
 // network warning) and powers validation, autocomplete, and hover docs.
 configureVegaLiteJson();
@@ -68,24 +76,15 @@ function EditorToolbar() {
 
   return (
     <div className={styles.toolbar}>
-      <div className={styles.viewToggle} role="group" aria-label="Editor view">
-        <button
-          type="button"
-          className={`${styles.viewOption} ${editorView === 'draft' ? styles.viewActive : ''}`}
-          aria-pressed={editorView === 'draft'}
-          onClick={() => setEditorView('draft')}
-        >
-          Draft
-        </button>
-        <button
-          type="button"
-          className={`${styles.viewOption} ${editorView === 'published' ? styles.viewActive : ''}`}
-          aria-pressed={editorView === 'published'}
-          onClick={() => setEditorView('published')}
-        >
-          Published
-        </button>
-      </div>
+      <SegmentedControl
+        label="Editor view"
+        options={VIEW_OPTIONS}
+        value={editorView}
+        onChange={setEditorView}
+        className={styles.viewToggle}
+        optionClassName={styles.viewOption}
+        activeClassName={styles.viewActive}
+      />
 
       <span className={styles.spacer} />
 
@@ -103,6 +102,7 @@ function EditorToolbar() {
         onClick={handlePublish}
         disabled={activeId === null}
         title="Publish (⌘/Ctrl+S)"
+        aria-keyshortcuts="Meta+S Control+S"
       >
         Publish
       </button>
@@ -190,7 +190,14 @@ export function SpecEditor() {
         {activeId === null && <div className={styles.placeholder}>Select or create a snippet</div>}
         <div className={styles.editor} ref={hostRef} />
       </div>
-      {error !== null && <pre className={styles.error}>{error}</pre>}
+      {/* The single live region for render/parse errors: assertive, since the
+          user just caused it. The preview shows the same text visually but is
+          not a live region, so the message is announced once (doc §10.1). */}
+      {error !== null && (
+        <pre className={styles.error} role="alert">
+          {error}
+        </pre>
+      )}
     </div>
   );
 }