diff --git a/src/components/block-kitchen.tsx b/src/components/block-kitchen.tsx
index 7a679a2..ba4532c 100644
--- a/src/components/block-kitchen.tsx
+++ b/src/components/block-kitchen.tsx
@@ -188,6 +188,7 @@ export function BlockKitchen(props: BlockKitchenProps) {
                 onUpdate={updateBlock}
                 onDuplicate={duplicateBlock}
                 onDelete={removeBlock}
+                onReorder={reorderBlock}
                 isPaletteDrag={activePaletteVariant !== null}
               />
             </div>
diff --git a/src/components/block-row.tsx b/src/components/block-row.tsx
index ce21fac..07209d0 100644
--- a/src/components/block-row.tsx
+++ b/src/components/block-row.tsx
@@ -1,6 +1,6 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { AlertTriangle, Copy, Pencil, Trash2 } from 'lucide-react';
+import { AlertTriangle, ArrowDown, ArrowUp, Copy, Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import type { RichTextBlock } from 'slack-web-api-client';
 import { cn } from '../lib/cn';
@@ -59,6 +59,9 @@ export function BlockRow({
   onUpdate,
   onDuplicate,
   onDelete,
+  index,
+  total,
+  onReorder,
   isPaletteDrag = false
 }: {
   builderBlock: BuilderBlock;
@@ -73,6 +76,12 @@ export function BlockRow({
   onUpdate: (id: string, block: SupportedBlock) => void;
   onDuplicate: (id: string) => void;
   onDelete: (id: string) => void;
+  /** Zero-based index of this row in the surface; powers move up/down. */
+  index?: number;
+  /** Total number of rows on the surface; powers move up/down. */
+  total?: number;
+  /** Move this row to a new index. Wires up the keyboard-accessible move buttons. */
+  onReorder?: (id: string, toIndex: number) => void;
   /** True while a palette item is being dragged (vs. reordering an existing block). */
   isPaletteDrag?: boolean;
 }) {
@@ -143,6 +152,15 @@ export function BlockRow({
                 aria-label="Edit block"
                 {...sortableA11yAttrs}
                 {...listeners}
+                onKeyDown={(e) => {
+                  // The div trigger is keyboard-activatable via role="button" + tabIndex=0,
+                  // but Space on a non-button element scrolls the page by default. Toggle the
+                  // popover ourselves on Enter/Space and swallow the event so the page stays put.
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onOpenChange?.(!isOpen);
+                  }
+                }}
                 className={cn(
                   'block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing',
                   hasErrors ? 'ring-1 ring-destructive/60 hover:ring-destructive' : 'hover:ring-1 hover:ring-border'
@@ -166,7 +184,10 @@ export function BlockRow({
         <div
           className={cn(
             'absolute -top-3 right-2 z-10 flex items-center gap-0.5 rounded-md border bg-background p-0.5 shadow-sm transition-opacity',
-            hasErrors ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+            // Reveal on hover, on focus inside the row (so Tab-stops on the
+            // floating buttons themselves keep them visible), and when there
+            // are validation errors worth surfacing immediately.
+            hasErrors ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
           )}
         >
           {hasErrors ? (
@@ -176,7 +197,7 @@ export function BlockRow({
                   type="button"
                   aria-label={`Show ${errors!.length} validation ${errors!.length === 1 ? 'issue' : 'issues'}`}
                   onClick={() => onOpenChange?.(true)}
-                  className="flex h-6 w-6 items-center justify-center rounded text-destructive hover:bg-destructive/10"
+                  className="flex h-6 w-6 items-center justify-center rounded text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                 >
                   <AlertTriangle className="h-3.5 w-3.5" />
                 </button>
@@ -191,6 +212,38 @@ export function BlockRow({
               </TooltipContent>
             </Tooltip>
           ) : null}
+          {onReorder && typeof index === 'number' && typeof total === 'number' ? (
+            <>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Move block up"
+                    disabled={index === 0}
+                    onClick={() => onReorder(builderBlock.id, index - 1)}
+                    className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+                  >
+                    <ArrowUp className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top">Move up</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Move block down"
+                    disabled={index >= total - 1}
+                    onClick={() => onReorder(builderBlock.id, index + 1)}
+                    className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+                  >
+                    <ArrowDown className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top">Move down</TooltipContent>
+              </Tooltip>
+            </>
+          ) : null}
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -203,7 +256,7 @@ export function BlockRow({
                     onOpenChange?.(true);
                   }
                 }}
-                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               >
                 <Pencil className="h-3.5 w-3.5" />
               </button>
@@ -216,7 +269,7 @@ export function BlockRow({
                 type="button"
                 aria-label="Duplicate block"
                 onClick={() => onDuplicate(builderBlock.id)}
-                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               >
                 <Copy className="h-3.5 w-3.5" />
               </button>
@@ -229,7 +282,7 @@ export function BlockRow({
                 type="button"
                 aria-label="Delete block"
                 onClick={() => onDelete(builderBlock.id)}
-                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </button>
diff --git a/src/components/json-drawer.tsx b/src/components/json-drawer.tsx
index ffd7e7c..df0d3c6 100644
--- a/src/components/json-drawer.tsx
+++ b/src/components/json-drawer.tsx
@@ -127,6 +127,7 @@ export function JsonDrawer({
           </div>
           <textarea
             ref={textareaRef}
+            aria-label="Block Kit JSON"
             value={value}
             onChange={(e) => handleChange(e.target.value)}
             onScroll={(e) => {
diff --git a/src/components/surface.tsx b/src/components/surface.tsx
index 33c860a..3b6c871 100644
--- a/src/components/surface.tsx
+++ b/src/components/surface.tsx
@@ -43,6 +43,7 @@ export function Surface({
   onUpdate,
   onDuplicate,
   onDelete,
+  onReorder,
   isPaletteDrag = false
 }: {
   blocks: BuilderBlock[];
@@ -59,6 +60,8 @@ export function Surface({
   onUpdate: (id: string, block: SupportedBlock) => void;
   onDuplicate: (id: string) => void;
   onDelete: (id: string) => void;
+  /** Move a block to a new index. Powers the keyboard-accessible move up / move down buttons. */
+  onReorder?: (id: string, toIndex: number) => void;
   /** True while a palette item is being dragged (vs. reordering an existing block). */
   isPaletteDrag?: boolean;
 }) {
@@ -87,7 +90,7 @@ export function Surface({
         <EmptyState isDark={isDark} isPaletteDrag={isPaletteDrag} isOver={isOver} />
       ) : (
         <SortableContext items={blocks.map((b) => b.id)} strategy={verticalListSortingStrategy}>
-          {blocks.map((block) => (
+          {blocks.map((block, idx) => (
             <BlockRow
               key={block.id}
               builderBlock={block}
@@ -99,6 +102,9 @@ export function Surface({
               onUpdate={onUpdate}
               onDuplicate={onDuplicate}
               onDelete={onDelete}
+              index={idx}
+              total={blocks.length}
+              onReorder={onReorder}
               isPaletteDrag={isPaletteDrag}
             />
           ))}
@@ -109,7 +115,10 @@ export function Surface({
   );
 
   return (
-    <div className={cn('flex flex-1 flex-col p-6', isDark ? 'bg-[#0e0f12]' : 'bg-[#f4f4f4]')}>
+    <main
+      aria-label="Block preview"
+      className={cn('flex flex-1 flex-col p-6', isDark ? 'bg-[#0e0f12]' : 'bg-[#f4f4f4]')}
+    >
       <div className="mx-auto w-full max-w-2xl">
         {previewSurface === 'modal' ? (
           <ModalFrame isDark={isDark}>{blocksList}</ModalFrame>
@@ -123,7 +132,7 @@ export function Surface({
           </MessageFrame>
         )}
       </div>
-    </div>
+    </main>
   );
 }
 
@@ -194,6 +203,12 @@ function MessageFrame({
  * @returns the rendered modal frame
  */
 function ModalFrame({ isDark, children }: { isDark: boolean; children: ReactNode }) {
+  // The X / Cancel / Submit affordances are visual chrome — they exist to
+  // make the preview look like a real Slack modal. They aren't wired to
+  // anything, so render them as `<span aria-hidden>` to keep them out of
+  // the focus order and the accessibility tree (a keyboard or screen
+  // reader user activating a "Submit" button that did nothing would be a
+  // worse experience than not seeing the chrome at all).
   return (
     <div
       className={cn(
@@ -208,43 +223,33 @@ function ModalFrame({ isDark, children }: { isDark: boolean; children: ReactNode
         )}
       >
         <h2 className={cn('text-base font-bold', isDark ? 'text-white' : 'text-[#1d1c1d]')}>Modal title</h2>
-        <button
-          type="button"
-          aria-label="Close"
+        <span
+          aria-hidden="true"
           className={cn(
             'flex h-6 w-6 items-center justify-center rounded',
-            isDark
-              ? 'text-white/60 hover:bg-white/10 hover:text-white'
-              : 'text-[#616061] hover:bg-[#f3f3f3] hover:text-[#1d1c1d]'
+            isDark ? 'text-white/60' : 'text-[#616061]'
           )}
         >
           <X className="h-4 w-4" />
-        </button>
+        </span>
       </div>
       {children}
       <div
+        aria-hidden="true"
         className={cn(
           'flex items-center justify-end gap-2 border-t px-5 py-3',
           isDark ? 'border-[#2c2d30]' : 'border-[#e8e8e8]'
         )}
       >
-        <button
-          type="button"
+        <span
           className={cn(
-            'cursor-pointer rounded-sm border px-3 py-1.5 text-sm font-medium',
-            isDark
-              ? 'border-white/20 bg-transparent text-white hover:bg-white/5'
-              : 'border-[#e8e8e8] bg-white text-[#1d1c1d] hover:bg-[#f3f3f3]'
+            'rounded-sm border px-3 py-1.5 text-sm font-medium',
+            isDark ? 'border-white/20 bg-transparent text-white' : 'border-[#e8e8e8] bg-white text-[#1d1c1d]'
           )}
         >
           Cancel
-        </button>
-        <button
-          type="button"
-          className="cursor-pointer rounded-sm bg-[#007a5a] px-3 py-1.5 text-sm font-bold text-white hover:bg-[#148567]"
-        >
-          Submit
-        </button>
+        </span>
+        <span className="rounded-sm bg-[#007a5a] px-3 py-1.5 text-sm font-bold text-white">Submit</span>
       </div>
     </div>
   );
diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
index 974cf9e..3ad050b 100644
--- a/src/components/toolbar.tsx
+++ b/src/components/toolbar.tsx
@@ -13,6 +13,8 @@ import {
   Sun,
   Trash2
 } from 'lucide-react';
+import type { ComponentType, KeyboardEvent } from 'react';
+import { useRef, useState } from 'react';
 import { cn } from '../lib/cn';
 import { Button } from '../lib/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '../lib/ui/popover';
@@ -101,68 +103,55 @@ export function Toolbar({
   const docsHref = docsLink === false ? null : (docsLink?.href ?? DEFAULT_DOCS_HREF);
   const docsLabel = docsLink === false ? null : (docsLink?.label ?? DEFAULT_DOCS_LABEL);
 
+  // Controlled open state so we can close the menus after a selection — the
+  // `role="menuitemradio"` semantics imply activation dismisses the menu.
+  const [surfaceMenuOpen, setSurfaceMenuOpen] = useState(false);
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false);
+
   return (
     <div className="flex items-center justify-between gap-2 border-b bg-background px-3 py-2">
       <div className="flex items-center gap-2">
         {showSurfaceControl ? (
-          <Popover>
+          <Popover open={surfaceMenuOpen} onOpenChange={setSurfaceMenuOpen}>
             <PopoverTrigger asChild>
-              <Button type="button" variant="ghost" size="sm">
+              <Button type="button" variant="ghost" size="sm" aria-label={`Preview surface: ${activeSurface.label}`}>
                 <activeSurface.Icon className="h-3.5 w-3.5" />
                 {activeSurface.label}
                 <ChevronDown className="h-3.5 w-3.5 opacity-60" />
               </Button>
             </PopoverTrigger>
             <PopoverContent align="start" className="w-36 p-1">
-              {surfaceOptions.map(({ value, label, Icon }) => {
-                const isActive = value === previewSurface;
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => onPreviewSurfaceChange(value)}
-                    className={cn(
-                      'flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-foreground',
-                      isActive ? 'text-foreground' : 'text-muted-foreground'
-                    )}
-                  >
-                    <Icon className="h-3.5 w-3.5" />
-                    <span className="flex-1">{label}</span>
-                    {isActive ? <Check className="h-3.5 w-3.5" /> : null}
-                  </button>
-                );
-              })}
+              <Menu<PreviewSurface>
+                ariaLabel="Preview surface"
+                options={surfaceOptions}
+                value={previewSurface}
+                onChange={(next) => {
+                  onPreviewSurfaceChange(next);
+                  setSurfaceMenuOpen(false);
+                }}
+              />
             </PopoverContent>
           </Popover>
         ) : null}
         {showThemeControl ? (
-          <Popover>
+          <Popover open={themeMenuOpen} onOpenChange={setThemeMenuOpen}>
             <PopoverTrigger asChild>
-              <Button type="button" variant="ghost" size="sm">
+              <Button type="button" variant="ghost" size="sm" aria-label={`Preview theme: ${activeTheme.label}`}>
                 <activeTheme.Icon className="h-3.5 w-3.5" />
                 {activeTheme.label}
                 <ChevronDown className="h-3.5 w-3.5 opacity-60" />
               </Button>
             </PopoverTrigger>
             <PopoverContent align="start" className="w-32 p-1">
-              {THEME_OPTIONS.map(({ value, label, Icon }) => {
-                const isActive = value === previewTheme;
-                return (
-                  <button
-                    key={value}
-                    type="button"
-                    onClick={() => onPreviewThemeChange(value)}
-                    className={cn(
-                      'flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-foreground',
-                      isActive ? 'text-foreground' : 'text-muted-foreground'
-                    )}
-                  >
-                    <Icon className="h-3.5 w-3.5" />
-                    <span className="flex-1">{label}</span>
-                    {isActive ? <Check className="h-3.5 w-3.5" /> : null}
-                  </button>
-                );
-              })}
+              <Menu<PreviewTheme>
+                ariaLabel="Preview theme"
+                options={THEME_OPTIONS}
+                value={previewTheme}
+                onChange={(next) => {
+                  onPreviewThemeChange(next);
+                  setThemeMenuOpen(false);
+                }}
+              />
             </PopoverContent>
           </Popover>
         ) : null}
@@ -215,3 +204,76 @@ export function Toolbar({
     </div>
   );
 }
+
+/**
+ * Single-select dropdown menu rendered inside a Popover. Adds proper
+ * `role="menu"` / `role="menuitem"` semantics and arrow-key navigation
+ * between options. Avoiding `@radix-ui/react-dropdown-menu` keeps this
+ * dependency-free; the wrapping `Popover` already handles outside-click
+ * dismiss, focus return, and Escape.
+ */
+function Menu<T extends string>({
+  ariaLabel,
+  options,
+  value,
+  onChange
+}: {
+  ariaLabel: string;
+  options: readonly { value: T; label: string; Icon: ComponentType<{ className?: string }> }[];
+  value: T;
+  onChange: (next: T) => void;
+}) {
+  const itemsRef = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const moveFocus = (from: number, delta: number) => {
+    const len = options.length;
+    if (len === 0) return;
+    const next = (from + delta + len) % len;
+    itemsRef.current[next]?.focus();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, idx: number) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      moveFocus(idx, 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveFocus(idx, -1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      itemsRef.current[0]?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      itemsRef.current[options.length - 1]?.focus();
+    }
+  };
+
+  return (
+    <div role="menu" aria-label={ariaLabel} className="flex flex-col">
+      {options.map(({ value: optValue, label, Icon }, idx) => {
+        const isActive = optValue === value;
+        return (
+          <button
+            key={optValue}
+            ref={(el) => {
+              itemsRef.current[idx] = el;
+            }}
+            type="button"
+            role="menuitemradio"
+            aria-checked={isActive}
+            onClick={() => onChange(optValue)}
+            onKeyDown={(e) => handleKeyDown(e, idx)}
+            className={cn(
+              'flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:outline-none',
+              isActive ? 'text-foreground' : 'text-muted-foreground'
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+            <span className="flex-1">{label}</span>
+            {isActive ? <Check className="h-3.5 w-3.5" /> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}