@nixxie-cms/core 2.1.0 → 2.2.0

package/src/admin-ui/components/CommandPalette.tsx

@@ -8,7 +8,8 @@ import {
   useMemo,
 } from 'react'
 
-import { css } from '@keystar/ui/style'
+import { css, tokenSchema } from '@keystar/ui/style'
+import { useId } from '@react-aria/utils'
 
 import { useNixxie } from '../context'
 import { getHrefFromList } from './Navigation'
@@ -76,6 +77,8 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
   const [activeIndex, setActiveIndex] = useState(0)
   const inputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const listboxId = useId()
   const commands = useCommands()
 
   const filtered = useMemo(() => {
@@ -107,8 +110,27 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
     if (!isOpen) return
     setQuery('')
     setActiveIndex(0)
+
+    // FOCUS RESTORE: remember what was focused before the palette opened.
+    const previouslyFocused = document.activeElement as HTMLElement | null
+
+    // SCROLL LOCK: prevent the page behind the modal from scrolling.
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+
     const t = setTimeout(() => inputRef.current?.focus(), 10)
-    return () => clearTimeout(t)
+
+    return () => {
+      clearTimeout(t)
+      // Restore scroll position behaviour.
+      document.body.style.overflow = prevOverflow
+      // Restore focus to whatever held it before we opened.
+      try {
+        previouslyFocused?.focus?.()
+      } catch {
+        /* element may be gone from the DOM — ignore */
+      }
+    }
   }, [isOpen])
 
   useEffect(() => {
@@ -130,6 +152,49 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
     }
   }
 
+  // FOCUS TRAP + panel-level ESCAPE. Runs for any child of the panel so the
+  // modal closes regardless of which element currently holds focus, and Tab /
+  // Shift+Tab stay contained within the panel's focusable descendants.
+  function onPanelKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      onClose()
+      return
+    }
+    if (e.key !== 'Tab') return
+
+    const panel = panelRef.current
+    if (!panel) return
+
+    let focusables: HTMLElement[]
+    try {
+      focusables = Array.from(
+        panel.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      ).filter(el => el.offsetParent !== null || el === document.activeElement)
+    } catch {
+      return
+    }
+    if (focusables.length === 0) return
+
+    const first = focusables[0]
+    const last = focusables[focusables.length - 1]
+    const current = document.activeElement as HTMLElement | null
+
+    if (e.shiftKey) {
+      if (current === first || !panel.contains(current)) {
+        e.preventDefault()
+        last.focus()
+      }
+    } else {
+      if (current === last || !panel.contains(current)) {
+        e.preventDefault()
+        first.focus()
+      }
+    }
+  }
+
   function onKeyDown(e: KeyboardEvent) {
     if (e.key === 'ArrowDown') {
       e.preventDefault()
@@ -154,6 +219,12 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
     return map
   }, [flatList])
 
+  // Stable per-option id derived from the listbox id, used for both the rendered
+  // <li role="option"> ids and the input's aria-activedescendant.
+  const optionId = (cmdId: string) => `${listboxId}-opt-${cmdId}`
+  const activeCommand = flatList[activeIndex]
+  const activeOptionId = activeCommand ? optionId(activeCommand.id) : undefined
+
   if (!isOpen) return null
 
   return (
@@ -164,7 +235,7 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
         className={css({
           position: 'fixed',
           inset: 0,
-          backgroundColor: 'rgba(0,0,0,0.45)',
+          backgroundColor: tokenSchema.color.alias.blanket,
           zIndex: 200,
           backdropFilter: 'blur(3px)',
         })}
@@ -172,9 +243,11 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
 
       {/* Panel */}
       <div
+        ref={panelRef}
         role="dialog"
         aria-modal="true"
         aria-label="Command palette"
+        onKeyDown={onPanelKeyDown}
         className={css({
           position: 'fixed',
           top: '14vh',
@@ -185,7 +258,7 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
           maxHeight: '62vh',
           display: 'flex',
           flexDirection: 'column',
-          backgroundColor: '#ffffff',
+          backgroundColor: tokenSchema.color.background.canvas,
           borderRadius: 10,
           boxShadow: '0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
           zIndex: 201,
@@ -199,7 +272,7 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
             alignItems: 'center',
             gap: 10,
             padding: '12px 16px',
-            borderBottom: '1px solid #f0f0f0',
+            borderBottom: `1px solid ${tokenSchema.color.border.muted}`,
           })}
         >
           <svg
@@ -207,7 +280,8 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
             height="15"
             viewBox="0 0 15 15"
             fill="none"
-            style={{ flexShrink: 0, color: '#a3a3a3' }}
+            aria-hidden="true"
+            style={{ flexShrink: 0, color: tokenSchema.color.foreground.neutralSecondary }}
           >
             <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.4" />
             <line
@@ -226,15 +300,21 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
             onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
             onKeyDown={onKeyDown}
             placeholder="Search commands, lists, actions…"
+            role="combobox"
+            aria-label="Search commands"
+            aria-expanded={flatList.length > 0}
+            aria-controls={listboxId}
+            aria-autocomplete="list"
+            aria-activedescendant={activeOptionId}
             className={css({
               flex: 1,
               border: 'none',
               outline: 'none',
               fontSize: 14.5,
-              color: '#0a0a0a',
+              color: tokenSchema.color.foreground.neutralEmphasis,
               background: 'transparent',
               fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-              '&::placeholder': { color: '#b8b8b8' },
+              '&::placeholder': { color: tokenSchema.color.foreground.neutralSecondary },
             })}
           />
           <kbd
@@ -243,11 +323,11 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
               alignItems: 'center',
               gap: 2,
               padding: '2px 7px',
-              backgroundColor: '#f5f5f5',
-              border: '1px solid #e8e8e8',
+              backgroundColor: tokenSchema.color.background.surfaceSecondary,
+              border: `1px solid ${tokenSchema.color.border.muted}`,
               borderRadius: 5,
               fontSize: 11,
-              color: '#a3a3a3',
+              color: tokenSchema.color.foreground.neutralSecondary,
               fontFamily: 'inherit',
               flexShrink: 0,
             })}
@@ -259,7 +339,9 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
         {/* Results */}
         <ul
           ref={listRef}
+          id={listboxId}
           role="listbox"
+          aria-label="Commands"
           className={css({
             flex: 1,
             overflowY: 'auto',
@@ -267,7 +349,10 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
             margin: 0,
             listStyle: 'none',
             '&::-webkit-scrollbar': { width: 4 },
-            '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
+            '&::-webkit-scrollbar-thumb': {
+              background: tokenSchema.color.border.muted,
+              borderRadius: 4,
+            },
           })}
         >
           {grouped.size === 0 ? (
@@ -275,16 +360,20 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
               className={css({
                 padding: '28px 16px',
                 textAlign: 'center',
-                color: '#a3a3a3',
+                color: tokenSchema.color.foreground.neutralSecondary,
                 fontSize: 13.5,
               })}
             >
               No results for &ldquo;{query}&rdquo;
             </li>
           ) : (
-            Array.from(grouped.entries()).map(([category, items]) => (
-              <li key={category} role="none">
+            Array.from(grouped.entries()).map(([category, items], groupIdx) => {
+              const headerId = `${listboxId}-cat-${groupIdx}`
+              return (
+              <li key={category} role="presentation">
                 <p
+                  id={headerId}
+                  role="presentation"
                   className={css({
                     margin: 0,
                     padding: '8px 16px 3px',
@@ -292,18 +381,23 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                     fontWeight: 600,
                     letterSpacing: '0.10em',
                     textTransform: 'uppercase',
-                    color: '#b8b8b8',
+                    color: tokenSchema.color.foreground.neutralSecondary,
                   })}
                 >
                   {category}
                 </p>
-                <ul role="group" className={css({ listStyle: 'none', margin: 0, padding: 0 })}>
+                <ul
+                  role="group"
+                  aria-labelledby={headerId}
+                  className={css({ listStyle: 'none', margin: 0, padding: 0 })}
+                >
                   {items.map(cmd => {
                     const idx = cmdFlatIndex.get(cmd.id) ?? 0
                     const isActive = idx === activeIndex
                     return (
                       <li
                         key={cmd.id}
+                        id={optionId(cmd.id)}
                         role="option"
                         aria-selected={isActive}
                         data-active={isActive}
@@ -315,10 +409,14 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                           gap: 10,
                           padding: '7px 16px',
                           cursor: 'pointer',
-                          backgroundColor: isActive ? '#0a0a0a' : 'transparent',
+                          backgroundColor: isActive
+                            ? tokenSchema.color.scale.black
+                            : 'transparent',
                           transition: 'background 100ms',
                           '&:hover': {
-                            backgroundColor: isActive ? '#0a0a0a' : '#f5f5f5',
+                            backgroundColor: isActive
+                              ? tokenSchema.color.scale.black
+                              : tokenSchema.color.background.surfaceSecondary,
                           },
                         })}
                       >
@@ -331,10 +429,14 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                             width: 28,
                             height: 28,
                             borderRadius: 6,
-                            backgroundColor: isActive ? '#2a2a2a' : '#f0f0f0',
+                            backgroundColor: isActive
+                              ? '#2a2a2a'
+                              : tokenSchema.color.background.surfaceSecondary,
                             fontSize: 12,
                             fontWeight: 500,
-                            color: isActive ? '#ffffff' : '#636363',
+                            color: isActive
+                              ? tokenSchema.color.foreground.onEmphasis
+                              : tokenSchema.color.foreground.neutralSecondary,
                             flexShrink: 0,
                             transition: 'background 100ms, color 100ms',
                             fontFamily: 'monospace',
@@ -350,7 +452,9 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                               display: 'block',
                               fontSize: 13.5,
                               fontWeight: 500,
-                              color: isActive ? '#ffffff' : '#0a0a0a',
+                              color: isActive
+                                ? tokenSchema.color.foreground.onEmphasis
+                                : tokenSchema.color.foreground.neutralEmphasis,
                               whiteSpace: 'nowrap',
                               overflow: 'hidden',
                               textOverflow: 'ellipsis',
@@ -364,7 +468,9 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                               className={css({
                                 display: 'block',
                                 fontSize: 12,
-                                color: isActive ? 'rgba(255,255,255,0.5)' : '#a3a3a3',
+                                color: isActive
+                                  ? tokenSchema.color.foreground.inverseSecondary
+                                  : tokenSchema.color.foreground.neutralSecondary,
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
@@ -381,7 +487,7 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                           <kbd
                             className={css({
                               fontSize: 11,
-                              color: 'rgba(255,255,255,0.6)',
+                              color: tokenSchema.color.foreground.inverseSecondary,
                               background: '#2a2a2a',
                               border: '1px solid #3a3a3a',
                               borderRadius: 4,
@@ -398,7 +504,8 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
                   })}
                 </ul>
               </li>
-            ))
+              )
+            })
           )}
         </ul>
 
@@ -409,9 +516,9 @@ export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
             alignItems: 'center',
             gap: 14,
             padding: '8px 16px',
-            borderTop: '1px solid #f0f0f0',
+            borderTop: `1px solid ${tokenSchema.color.border.muted}`,
             fontSize: 11,
-            color: '#b8b8b8',
+            color: tokenSchema.color.foreground.neutralSecondary,
           })}
         >
           <span>

package/src/admin-ui/components/CreateButtonLink.tsx

@@ -1,46 +1,20 @@
-import { css } from '@keystar/ui/style'
-
-import type { CollectionMeta } from '../../types'
-
-export function CreateButtonLink(props: { children?: string; list: CollectionMeta }) {
-  const { list, children = `New ${list.singular}` } = props
-  return (
-    <a
-      href={`/${list.path}/create`}
-      aria-label={`New ${list.singular}`}
-      className={css({
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 6,
-        paddingInline: '13px',
-        paddingBlock: '7px',
-        borderRadius: 6,
-        border: '1px solid transparent',
-        backgroundColor: '#111827',
-        color: '#ffffff',
-        fontSize: 13,
-        fontWeight: 500,
-        fontFamily: 'inherit',
-        textDecoration: 'none',
-        cursor: 'pointer',
-        whiteSpace: 'nowrap',
-        flexShrink: 0,
-        letterSpacing: '-0.01em',
-        transition: 'background 130ms',
-
-        '&:hover': { backgroundColor: '#1f2937' },
-        '&:active': { backgroundColor: '#374151' },
-
-        '&:focus-visible': {
-          outline: '2px solid #111827',
-          outlineOffset: 2,
-        },
-      })}
-    >
-      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
-        <path d="M6 1.5v9M1.5 6h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-      </svg>
-      {children}
-    </a>
-  )
-}
+import { Button } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { plusIcon } from '@keystar/ui/icon/icons/plusIcon'
+import { Text } from '@keystar/ui/typography'
+
+import type { CollectionMeta } from '../../types'
+
+export function CreateButtonLink(props: { children?: string; list: CollectionMeta }) {
+  const { list, children = `New ${list.singular}` } = props
+  return (
+    <Button
+      href={`/${list.path}/create`}
+      aria-label={`New ${list.singular}`}
+      prominence="high"
+    >
+      <Icon src={plusIcon} />
+      <Text>{children}</Text>
+    </Button>
+  )
+}

package/src/admin-ui/components/GraphQLErrorNotice.tsx

@@ -34,45 +34,51 @@ export function GraphQLErrorNotice({
   })
   if (!errors.length) return null
 
+  // The Notice already sets role="alert" for the critical tone, but with
+  // aria-live="polite". Wrap it in an assertive live region (without a second
+  // role, to avoid a double role) so screen readers announce the failure
+  // immediately (WCAG 4.1.3 Status Messages).
   return (
-    <Notice tone="critical">
-      <Heading>Errors</Heading>
-      <Content>
-        <VStack elementType="ul" gap="large">
-          {[
-            ...(function* () {
-              let i = 0
-              for (const error of errors) {
-                const lines = error.message.split('\n')
-                for (const line of lines) {
-                  yield (
-                    <Text key={i++} elementType="li">
-                      {line}
-                    </Text>
-                  )
-                }
-
-                if (
-                  'result' in error &&
-                  typeof error.result === 'object' &&
-                  error.result !== null &&
-                  'errors' in error.result &&
-                  Array.isArray(error.result.errors)
-                ) {
-                  for (const { message } of error.result.errors) {
-                    if (typeof message !== 'string') continue
+    <div aria-live="assertive" aria-atomic="true">
+      <Notice tone="critical">
+        <Heading>Errors</Heading>
+        <Content>
+          <VStack elementType="ul" gap="large">
+            {[
+              ...(function* () {
+                let i = 0
+                for (const error of errors) {
+                  const lines = error.message.split('\n')
+                  for (const line of lines) {
                     yield (
                       <Text key={i++} elementType="li">
-                        {message}
+                        {line}
                       </Text>
                     )
                   }
+
+                  if (
+                    'result' in error &&
+                    typeof error.result === 'object' &&
+                    error.result !== null &&
+                    'errors' in error.result &&
+                    Array.isArray(error.result.errors)
+                  ) {
+                    for (const { message } of error.result.errors) {
+                      if (typeof message !== 'string') continue
+                      yield (
+                        <Text key={i++} elementType="li">
+                          {message}
+                        </Text>
+                      )
+                    }
+                  }
                 }
-              }
-            })(),
-          ]}
-        </VStack>
-      </Content>
-    </Notice>
+              })(),
+            ]}
+          </VStack>
+        </Content>
+      </Notice>
+    </div>
   )
 }

package/src/admin-ui/components/Logo.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-import { css } from '@keystar/ui/style'
+import { css, tokenSchema } from '@keystar/ui/style'
 
 import { useNixxie } from '../context'
 
@@ -22,7 +22,7 @@ function DefaultLogo() {
         outline: 0,
         flexShrink: 0,
         '&:focus-visible': {
-          outline: '2px solid #000',
+          outline: `2px solid ${tokenSchema.color.scale.black}`,
           outlineOffset: 3,
           borderRadius: 4,
         },
@@ -37,14 +37,14 @@ function DefaultLogo() {
           width: 28,
           height: 28,
           borderRadius: 6,
-          backgroundColor: '#000000',
+          backgroundColor: tokenSchema.color.scale.black,
           flexShrink: 0,
         })}
       >
         <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
           <path
             d="M2.5 11V3L11.5 11V3"
-            stroke="white"
+            stroke={tokenSchema.color.scale.white}
             strokeWidth="1.8"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -58,7 +58,7 @@ function DefaultLogo() {
           fontSize: 14,
           fontWeight: 600,
           letterSpacing: '-0.03em',
-          color: '#0a0a0a',
+          color: tokenSchema.color.foreground.neutralEmphasis,
           lineHeight: 1,
           fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
         })}