diff --git a/app/src/components/BottomSheet.tsx b/app/src/components/BottomSheet.tsx
index 891cb59..1f33d2d 100644
--- a/app/src/components/BottomSheet.tsx
+++ b/app/src/components/BottomSheet.tsx
@@ -43,7 +43,14 @@ export function BottomSheet({ isOpen, onClose, title, children }: BottomSheetPro
   if (!isOpen) return null;
 
   return (
-    <div className="bottom-sheet-backdrop" onClick={handleBackdropClick}>
+    <div
+      className="bottom-sheet-backdrop"
+      onClick={handleBackdropClick}
+      onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}
+      role="dialog"
+      aria-modal="true"
+      aria-label={title || 'Bottom sheet'}
+    >
       <div className="bottom-sheet" ref={sheetRef}>
         <div className="bottom-sheet-handle" />
         {title && <div className="bottom-sheet-title">{title}</div>}
diff --git a/app/src/components/EffectsPanel.tsx b/app/src/components/EffectsPanel.tsx
index 0d342e8..037b556 100644
--- a/app/src/components/EffectsPanel.tsx
+++ b/app/src/components/EffectsPanel.tsx
@@ -128,8 +128,9 @@ export function EffectsPanel({
             <span className="effect-label">Reverb</span>
             <div className="effect-controls">
               <div className="effect-param">
-                <label>Mix</label>
+                <label htmlFor="fx-reverb-mix">Mix</label>
                 <input
+                  id="fx-reverb-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -142,8 +143,9 @@ export function EffectsPanel({
                 <span className="param-value">{Math.round(effects.reverb.wet * 100)}%</span>
               </div>
               <div className="effect-param">
-                <label>Decay</label>
+                <label htmlFor="fx-reverb-decay">Decay</label>
                 <input
+                  id="fx-reverb-decay"
                   type="range"
                   min="0.1"
                   max="10"
@@ -163,8 +165,9 @@ export function EffectsPanel({
             <span className="effect-label">Delay</span>
             <div className="effect-controls">
               <div className="effect-param">
-                <label>Mix</label>
+                <label htmlFor="fx-delay-mix">Mix</label>
                 <input
+                  id="fx-delay-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -177,8 +180,9 @@ export function EffectsPanel({
                 <span className="param-value">{Math.round(effects.delay.wet * 100)}%</span>
               </div>
               <div className="effect-param">
-                <label>Time</label>
+                <label htmlFor="fx-delay-time">Time</label>
                 <select
+                  id="fx-delay-time"
                   value={effects.delay.time}
                   onChange={(e) => updateEffect('delay', 'time', e.target.value)}
                   disabled={disabled}
@@ -190,8 +194,9 @@ export function EffectsPanel({
                 </select>
               </div>
               <div className="effect-param">
-                <label>Feedback</label>
+                <label htmlFor="fx-delay-feedback">Feedback</label>
                 <input
+                  id="fx-delay-feedback"
                   type="range"
                   min="0"
                   max="0.95"
@@ -211,8 +216,9 @@ export function EffectsPanel({
             <span className="effect-label">Chorus</span>
             <div className="effect-controls">
               <div className="effect-param">
-                <label>Mix</label>
+                <label htmlFor="fx-chorus-mix">Mix</label>
                 <input
+                  id="fx-chorus-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -225,8 +231,9 @@ export function EffectsPanel({
                 <span className="param-value">{Math.round(effects.chorus.wet * 100)}%</span>
               </div>
               <div className="effect-param">
-                <label>Rate</label>
+                <label htmlFor="fx-chorus-rate">Rate</label>
                 <input
+                  id="fx-chorus-rate"
                   type="range"
                   min="0.1"
                   max="10"
@@ -239,8 +246,9 @@ export function EffectsPanel({
                 <span className="param-value">{effects.chorus.frequency.toFixed(1)}Hz</span>
               </div>
               <div className="effect-param">
-                <label>Depth</label>
+                <label htmlFor="fx-chorus-depth">Depth</label>
                 <input
+                  id="fx-chorus-depth"
                   type="range"
                   min="0"
                   max="1"
@@ -260,8 +268,9 @@ export function EffectsPanel({
             <span className="effect-label">Distortion</span>
             <div className="effect-controls">
               <div className="effect-param">
-                <label>Mix</label>
+                <label htmlFor="fx-distortion-mix">Mix</label>
                 <input
+                  id="fx-distortion-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -274,8 +283,9 @@ export function EffectsPanel({
                 <span className="param-value">{Math.round(effects.distortion.wet * 100)}%</span>
               </div>
               <div className="effect-param">
-                <label>Drive</label>
+                <label htmlFor="fx-distortion-drive">Drive</label>
                 <input
+                  id="fx-distortion-drive"
                   type="range"
                   min="0"
                   max="1"
diff --git a/app/src/components/LandingPage.tsx b/app/src/components/LandingPage.tsx
index bb449bd..96330ad 100644
--- a/app/src/components/LandingPage.tsx
+++ b/app/src/components/LandingPage.tsx
@@ -146,6 +146,9 @@ export function LandingPage({ onStartSession }: LandingPageProps) {
                         if (el) cardsRef.current[i] = el;
                       }}
                       onClick={() => handleExampleClick(ex)}
+                      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleExampleClick(ex); }}
+                      role="button"
+                      tabIndex={0}
                     >
                       <div className="landing-example-thumb">
                         {pattern.map((row, ri) => (
diff --git a/app/src/components/MixerPanel.tsx b/app/src/components/MixerPanel.tsx
index d21513f..445e438 100644
--- a/app/src/components/MixerPanel.tsx
+++ b/app/src/components/MixerPanel.tsx
@@ -149,8 +149,9 @@ const MixerChannel = memo(function MixerChannel({
       {/* Per-track swing (if handler provided) */}
       {onSetSwing && (
         <div className="channel-swing">
-          <label className="swing-label">Swing</label>
+          <label className="swing-label" htmlFor={`mixer-swing-${track.id}`}>Swing</label>
           <input
+            id={`mixer-swing-${track.id}`}
             type="range"
             className="swing-slider"
             min="0"
diff --git a/app/src/components/PitchOverview.tsx b/app/src/components/PitchOverview.tsx
index d262212..aa4b928 100644
--- a/app/src/components/PitchOverview.tsx
+++ b/app/src/components/PitchOverview.tsx
@@ -84,11 +84,9 @@ export const PitchOverview = memo(function PitchOverview({
   }, [melodicTracks]);
 
   // Count visible tracks (for header info)
-  const visibleTrackCount = useMemo(() => {
-    return melodicTracks.filter(track =>
-      anySoloed ? track.soloed : !track.muted
-    ).length;
-  }, [melodicTracks, anySoloed]);
+  const visibleTrackCount = melodicTracks.filter(track =>
+    anySoloed ? track.soloed : !track.muted
+  ).length;
 
   // Build per-step pitch data
   const stepData = useMemo((): StepPitchData[] => {
diff --git a/app/src/components/QROverlay/QRCode.tsx b/app/src/components/QROverlay/QRCode.tsx
index 655b78b..b7f6059 100644
--- a/app/src/components/QROverlay/QRCode.tsx
+++ b/app/src/components/QROverlay/QRCode.tsx
@@ -19,14 +19,18 @@ interface QRCodeProps {
   className?: string;
 }
 
+interface QRState {
+  svgString: string;
+  error: string | null;
+}
+
 export function QRCode({
   value,
   size = 200,
   errorCorrection = 'M',
   className = '',
 }: QRCodeProps) {
-  const [svgString, setSvgString] = useState<string>('');
-  const [error, setError] = useState<string | null>(null);
+  const [state, setState] = useState<QRState>({ svgString: '', error: null });
 
   useEffect(() => {
     let cancelled = false;
@@ -45,12 +49,11 @@ export function QRCode({
         });
 
         if (!cancelled) {
-          setSvgString(svg);
-          setError(null);
+          setState({ svgString: svg, error: null });
         }
       } catch (err) {
         if (!cancelled) {
-          setError(err instanceof Error ? err.message : 'Failed to generate QR code');
+          setState({ svgString: '', error: err instanceof Error ? err.message : 'Failed to generate QR code' });
         }
       }
     }
@@ -62,7 +65,7 @@ export function QRCode({
     };
   }, [value, size, errorCorrection]);
 
-  if (error) {
+  if (state.error) {
     return (
       <div
         className={`qr-code qr-code-error ${className}`}
@@ -75,7 +78,7 @@ export function QRCode({
     );
   }
 
-  if (!svgString) {
+  if (!state.svgString) {
     return (
       <div
         className={`qr-code qr-code-loading ${className}`}
@@ -92,7 +95,7 @@ export function QRCode({
       style={{ width: size, height: size }}
       role="img"
       aria-label={`QR code linking to ${value}`}
-      dangerouslySetInnerHTML={{ __html: svgString }}
+      dangerouslySetInnerHTML={{ __html: state.svgString }}
     />
   );
 }
diff --git a/app/src/components/SessionName.tsx b/app/src/components/SessionName.tsx
index 8e37d0a..cdd51dc 100644
--- a/app/src/components/SessionName.tsx
+++ b/app/src/components/SessionName.tsx
@@ -20,13 +20,6 @@ export function SessionName({ name, sessionId, onRename, disabled = false }: Ses
   const [isSaving, setIsSaving] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // Sync edit value when name prop changes
-  useEffect(() => {
-    if (!isEditing) {
-      setEditValue(name || '');
-    }
-  }, [name, isEditing]);
-
   // Focus input when entering edit mode
   useEffect(() => {
     if (isEditing && inputRef.current) {
@@ -42,9 +35,10 @@ export function SessionName({ name, sessionId, onRename, disabled = false }: Ses
 
   const handleClick = useCallback(() => {
     if (!disabled && !isSaving) {
+      setEditValue(name || '');
       setIsEditing(true);
     }
-  }, [disabled, isSaving]);
+  }, [disabled, isSaving, name]);
 
   const handleSave = useCallback(async () => {
     if (isSaving) return;
diff --git a/app/src/components/StepSequencer.tsx b/app/src/components/StepSequencer.tsx
index 2cfeff9..30bff5a 100644
--- a/app/src/components/StepSequencer.tsx
+++ b/app/src/components/StepSequencer.tsx
@@ -321,9 +321,7 @@ export function StepSequencer() {
   }, [dragState.targetTrackId, state.tracks, dispatch, multiplayer]);
 
   // Phase 31D: Count muted tracks for button display
-  const mutedTrackCount = useMemo(() => {
-    return state.tracks.filter(t => t.muted).length;
-  }, [state.tracks]);
+  const mutedTrackCount = state.tracks.filter(t => t.muted).length;
 
   // Phase 31F: Selection state and handler
   const handleSelectStep = useCallback((trackId: string, step: number, mode: 'toggle' | 'extend') => {
diff --git a/app/src/components/ToastNotification.tsx b/app/src/components/ToastNotification.tsx
index 4634d5b..d4944f6 100644
--- a/app/src/components/ToastNotification.tsx
+++ b/app/src/components/ToastNotification.tsx
@@ -88,6 +88,9 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string)
       <div
         className={`toast toast-url ${isExiting ? 'exiting' : ''}`}
         onClick={handleUrlTap}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleUrlTap(); }}
+        role="button"
+        tabIndex={0}
       >
         <div className="toast-url-header">
           <span className="toast-message">{toast.message}</span>
diff --git a/app/src/components/TrackRow.tsx b/app/src/components/TrackRow.tsx
index 2827f0e..a5a57d3 100644
--- a/app/src/components/TrackRow.tsx
+++ b/app/src/components/TrackRow.tsx
@@ -771,6 +771,7 @@ export const TrackRow = React.memo(function TrackRow({
       <div
         className={`mobile-edit-panel ${isMenuOpen ? 'expanded' : ''}`}
         onClick={() => setIsMenuOpen(!isMenuOpen)}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') setIsMenuOpen(!isMenuOpen); }}
         role="button"
         tabIndex={0}
       >
diff --git a/app/src/components/Transport.tsx b/app/src/components/Transport.tsx
index ba9787e..61886ae 100644
--- a/app/src/components/Transport.tsx
+++ b/app/src/components/Transport.tsx
@@ -304,8 +304,9 @@ export function Transport({
               />
               <div className="fx-sliders">
                 <div className="fx-param">
-                  <label>Mix</label>
+                  <label htmlFor="transport-reverb-mix">Mix</label>
                   <input
+                    id="transport-reverb-mix"
                     type="range"
                     min="0"
                     max="1"
@@ -317,8 +318,9 @@ export function Transport({
                   <span className="fx-value">{Math.round(effects.reverb.wet * 100)}%</span>
                 </div>
                 <div className="fx-param">
-                  <label>Decay</label>
+                  <label htmlFor="transport-reverb-decay">Decay</label>
                   <input
+                    id="transport-reverb-decay"
                     type="range"
                     min="0.1"
                     max="10"
@@ -338,8 +340,9 @@ export function Transport({
             <span className="fx-label">Delay</span>
             <div className="fx-controls">
               <div className="fx-param">
-                <label>Mix</label>
+                <label htmlFor="transport-delay-mix">Mix</label>
                 <input
+                  id="transport-delay-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -351,8 +354,9 @@ export function Transport({
                 <span className="fx-value">{Math.round(effects.delay.wet * 100)}%</span>
               </div>
               <div className="fx-param">
-                <label>Time</label>
+                <label htmlFor="transport-delay-time">Time</label>
                 <select
+                  id="transport-delay-time"
                   value={effects.delay.time}
                   onChange={(e) => updateEffect('delay', 'time', e.target.value)}
                   disabled={effectsDisabled}
@@ -363,8 +367,9 @@ export function Transport({
                 </select>
               </div>
               <div className="fx-param">
-                <label>Feedback</label>
+                <label htmlFor="transport-delay-feedback">Feedback</label>
                 <input
+                  id="transport-delay-feedback"
                   type="range"
                   min="0"
                   max="0.95"
@@ -383,8 +388,9 @@ export function Transport({
             <span className="fx-label">Chorus</span>
             <div className="fx-controls">
               <div className="fx-param">
-                <label>Mix</label>
+                <label htmlFor="transport-chorus-mix">Mix</label>
                 <input
+                  id="transport-chorus-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -396,8 +402,9 @@ export function Transport({
                 <span className="fx-value">{Math.round(effects.chorus.wet * 100)}%</span>
               </div>
               <div className="fx-param">
-                <label>Rate</label>
+                <label htmlFor="transport-chorus-rate">Rate</label>
                 <input
+                  id="transport-chorus-rate"
                   type="range"
                   min="0.1"
                   max="10"
@@ -409,8 +416,9 @@ export function Transport({
                 <span className="fx-value">{effects.chorus.frequency.toFixed(1)}Hz</span>
               </div>
               <div className="fx-param">
-                <label>Depth</label>
+                <label htmlFor="transport-chorus-depth">Depth</label>
                 <input
+                  id="transport-chorus-depth"
                   type="range"
                   min="0"
                   max="1"
@@ -429,8 +437,9 @@ export function Transport({
             <span className="fx-label">Distortion</span>
             <div className="fx-controls">
               <div className="fx-param">
-                <label>Mix</label>
+                <label htmlFor="transport-distortion-mix">Mix</label>
                 <input
+                  id="transport-distortion-mix"
                   type="range"
                   min="0"
                   max="1"
@@ -442,8 +451,9 @@ export function Transport({
                 <span className="fx-value">{Math.round(effects.distortion.wet * 100)}%</span>
               </div>
               <div className="fx-param">
-                <label>Drive</label>
+                <label htmlFor="transport-distortion-drive">Drive</label>
                 <input
+                  id="transport-distortion-drive"
                   type="range"
                   min="0"
                   max="1"
diff --git a/app/src/components/TransportBar.tsx b/app/src/components/TransportBar.tsx
index be5dc8c..b97dc95 100644
--- a/app/src/components/TransportBar.tsx
+++ b/app/src/components/TransportBar.tsx
@@ -125,6 +125,12 @@ export function TransportBar({
         onMouseUp={handleDragEnd}
         onMouseLeave={handleDragEnd}
         title="Drag up/down to adjust tempo"
+        role="slider"
+        aria-label="Tempo"
+        aria-valuemin={60}
+        aria-valuemax={180}
+        aria-valuenow={tempo}
+        tabIndex={0}
       >
         <span className="transport-label">BPM</span>
         <span className="transport-number">{tempo}</span>
@@ -142,6 +148,12 @@ export function TransportBar({
         onMouseUp={handleDragEnd}
         onMouseLeave={handleDragEnd}
         title="Drag up/down to adjust swing"
+        role="slider"
+        aria-label="Swing"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={swing}
+        tabIndex={0}
       >
         <span className="transport-label">Swing</span>
         <span className="transport-number">{swing}%</span>
diff --git a/app/src/components/Waveform.tsx b/app/src/components/Waveform.tsx
index a2a2ecc..f16e9b4 100644
--- a/app/src/components/Waveform.tsx
+++ b/app/src/components/Waveform.tsx
@@ -15,7 +15,9 @@ interface WaveformProps {
   height?: number;
 }
 
-export function Waveform({ buffer, slicePoints = [], onSlicePointsChange, onPlaySlice, height = 80 }: WaveformProps) {
+const EMPTY_SLICE_POINTS: number[] = [];
+
+export function Waveform({ buffer, slicePoints = EMPTY_SLICE_POINTS, onSlicePointsChange, onPlaySlice, height = 80 }: WaveformProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [hoveredSlice, setHoveredSlice] = useState<number | null>(null);
@@ -189,6 +191,8 @@ export function Waveform({ buffer, slicePoints = [], onSlicePointsChange, onPlay
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseLeave}
+      role="img"
+      aria-label="Audio waveform"
     >
       <canvas
         ref={canvasRef}
diff --git a/app/src/components/XYPad.tsx b/app/src/components/XYPad.tsx
index 9fae1c4..dde69bd 100644
--- a/app/src/components/XYPad.tsx
+++ b/app/src/components/XYPad.tsx
@@ -191,6 +191,9 @@ export function XYPad({
         onTouchEnd={handleEnd}
         role="slider"
         aria-label={`${xLabel} and ${yLabel} control`}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(x * 100)}
         aria-valuetext={`${xLabel}: ${Math.round(x * 100)}%, ${yLabel}: ${Math.round(y * 100)}%`}
         tabIndex={disabled ? -1 : 0}
       >