fix(accessibility): show focus indicators app-wide

src/components/NewTaskPlaceholder.tsx

@@ -1,5 +1,5 @@
 import { onMount, onCleanup } from 'solid-js';
-import { toggleNewTaskDialog, createTerminal, store, unfocusPlaceholder } from '../store/store';
+import { toggleNewTaskDialog, createTerminal, unfocusPlaceholder } from '../store/store';
 import { registerFocusFn, unregisterFocusFn } from '../store/focus';
 import { theme } from '../lib/theme';
 import { mod } from '../lib/platform';
@@ -17,18 +17,6 @@ export function NewTaskPlaceholder() {
     });
   });
 
-  const isFocused = (btn: 'add-task' | 'add-terminal') =>
-    store.placeholderFocused && store.placeholderFocusedButton === btn;
-
-  const focusedBorder = (btn: 'add-task' | 'add-terminal') =>
-    isFocused(btn) ? `2px dashed ${theme.accent}` : `2px dashed ${theme.border}`;
-
-  const focusedColor = (btn: 'add-task' | 'add-terminal') =>
-    isFocused(btn) ? theme.accent : theme.fgSubtle;
-
-  const focusedBg = (btn: 'add-task' | 'add-terminal') =>
-    isFocused(btn) ? `color-mix(in srgb, ${theme.accent} 8%, transparent)` : undefined;
-
   return (
     <div
       style={{
@@ -63,9 +51,8 @@ export function NewTaskPlaceholder() {
           'justify-content': 'center',
           cursor: 'pointer',
           'border-radius': '12px',
-          border: focusedBorder('add-task'),
-          color: focusedColor('add-task'),
-          background: focusedBg('add-task'),
+          border: `2px dashed ${theme.border}`,
+          color: theme.fgSubtle,
           'font-size': '21px',
           'user-select': 'none',
         }}
@@ -96,9 +83,8 @@ export function NewTaskPlaceholder() {
           'justify-content': 'center',
           cursor: 'pointer',
           'border-radius': '10px',
-          border: focusedBorder('add-terminal'),
-          color: focusedColor('add-terminal'),
-          background: focusedBg('add-terminal'),
+          border: `2px dashed ${theme.border}`,
+          color: theme.fgSubtle,
           'font-size': '14px',
           'font-family': 'monospace',
           'user-select': 'none',

src/focus-visible-styles.test.ts

@@ -0,0 +1,43 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { describe, expect, it } from 'vitest';
+
+const css = readFileSync(resolve(__dirname, 'styles.css'), 'utf8');
+const placeholder = readFileSync(resolve(__dirname, 'components/NewTaskPlaceholder.tsx'), 'utf8');
+
+const globalFocusSelectors = [
+  'button',
+  'input',
+  'select',
+  'textarea',
+  'a[href]',
+  "[tabindex]:not([tabindex='-1'])",
+  "[role='button']",
+  "[role='switch']",
+  "[role='checkbox']",
+  "[role='link']",
+  "[role='menuitem']",
+  "[role='menuitemradio']",
+  "[role='menuitemcheckbox']",
+  "[role='tab']",
+  "[role='option']",
+  "[role='combobox']",
+  "[role='radio']",
+];
+
+describe('global focus-visible styles', () => {
+  it('uses a low-specificity app-wide default that components can override', () => {
+    const rule = css.match(/(?:^|\n):where\(([\s\S]*?)\):focus-visible\s*\{([^}]*)\}/);
+
+    expect(rule).not.toBeNull();
+    expect(rule?.[1].split(',').map((selector) => selector.trim())).toEqual(globalFocusSelectors);
+    expect(rule?.[2]).toMatch(/outline:\s*2px solid var\(--accent\)/);
+    expect(css).not.toMatch(/(?:^|\n):is\([\s\S]*?\):focus-visible/);
+  });
+
+  it('uses the DOM focus indicator as the placeholder focus state', () => {
+    expect(css).not.toMatch(/\.new-task-placeholder:focus-visible\s*\{[^}]*outline:\s*none/);
+    expect(placeholder).not.toContain('store.placeholderFocused');
+    expect(placeholder).not.toMatch(/focused(?:Border|Color|Bg)/);
+  });
+});

src/styles.css

@@ -69,31 +69,28 @@ body.font-smoothing {
   text-rendering: geometricPrecision;
 }
 
-/* Visible keyboard focus indicators inside dialogs.
-   Scoped to .dialog-panel (a class hook) so it works through Solid <Portal>
-   mounting, where descendant selectors rooted at the app shell would not
-   match. The selector list mirrors the spec's interactive-role enumeration
-   so icon buttons, toggles, and ARIA widgets all pick up the indicator. */
-.dialog-panel
-  :is(
-    button,
-    input,
-    select,
-    textarea,
-    a[href],
-    [tabindex]:not([tabindex='-1']),
-    [role='button'],
-    [role='switch'],
-    [role='checkbox'],
-    [role='link'],
-    [role='menuitem'],
-    [role='menuitemradio'],
-    [role='menuitemcheckbox'],
-    [role='tab'],
-    [role='option'],
-    [role='combobox'],
-    [role='radio']
-  ):focus-visible {
+/* Visible keyboard focus indicators for interactive controls. The selector
+   includes native elements and ARIA widgets so keyboard focus remains visible
+   across the app, including content mounted through Solid <Portal>. */
+:where(
+  button,
+  input,
+  select,
+  textarea,
+  a[href],
+  [tabindex]:not([tabindex='-1']),
+  [role='button'],
+  [role='switch'],
+  [role='checkbox'],
+  [role='link'],
+  [role='menuitem'],
+  [role='menuitemradio'],
+  [role='menuitemcheckbox'],
+  [role='tab'],
+  [role='option'],
+  [role='combobox'],
+  [role='radio']
+):focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
@@ -1510,10 +1507,6 @@ textarea::placeholder {
     background 0.15s ease;
 }
 
-.new-task-placeholder:focus-visible {
-  outline: none;
-}
-
 .new-task-placeholder:hover {
   border-color: var(--accent) !important;
   color: var(--accent) !important;