@furystack/shades-common-components 14.0.0 → 15.0.1

package/src/components/accordion/accordion.spec.tsx

@@ -52,6 +52,34 @@ describe('Accordion', () => {
     await flushUpdates()
     expect(accordion.hasAttribute('data-variant')).toBe(false)
   })
+
+  describe('spatial navigation', () => {
+    it('should set data-nav-section with auto-generated id', async () => {
+      const el = (
+        <div>
+          <Accordion />
+        </div>
+      )
+      const accordion = el.firstElementChild as JSX.Element
+      accordion.updateComponent()
+      await flushUpdates()
+      const navSection = accordion.getAttribute('data-nav-section')
+      expect(navSection).toBeTruthy()
+      expect(navSection).toMatch(/^accordion-\d+$/)
+    })
+
+    it('should use custom navSection when provided', async () => {
+      const el = (
+        <div>
+          <Accordion navSection="my-accordion" />
+        </div>
+      )
+      const accordion = el.firstElementChild as JSX.Element
+      accordion.updateComponent()
+      await flushUpdates()
+      expect(accordion.getAttribute('data-nav-section')).toBe('my-accordion')
+    })
+  })
 })
 
 describe('AccordionItem', () => {
@@ -239,7 +267,7 @@ describe('AccordionItem', () => {
     expect(content.style.height).not.toBe('0px')
   })
 
-  it('should have a role="button" on the header', async () => {
+  it('should render the header as a <button> element', async () => {
     const el = (
       <div>
         <AccordionItem title="Test" />
@@ -248,11 +276,12 @@ describe('AccordionItem', () => {
     const item = el.firstElementChild as JSX.Element
     item.updateComponent()
     await flushUpdates()
-    const header = item.querySelector('.accordion-header') as HTMLElement
-    expect(header.getAttribute('role')).toBe('button')
+    const header = item.querySelector('.accordion-header') as HTMLButtonElement
+    expect(header.tagName).toBe('BUTTON')
+    expect(header.type).toBe('button')
   })
 
-  it('should set tabIndex on the header when not disabled', async () => {
+  it('should not disable the header button when not disabled', async () => {
     const el = (
       <div>
         <AccordionItem title="Test" />
@@ -261,11 +290,11 @@ describe('AccordionItem', () => {
     const item = el.firstElementChild as JSX.Element
     item.updateComponent()
     await flushUpdates()
-    const header = item.querySelector('.accordion-header') as HTMLElement
-    expect(header.tabIndex).toBe(0)
+    const header = item.querySelector('.accordion-header') as HTMLButtonElement
+    expect(header.disabled).toBe(false)
   })
 
-  it('should set tabIndex to -1 on the header when disabled', async () => {
+  it('should disable the header button when disabled', async () => {
     const el = (
       <div>
         <AccordionItem title="Test" disabled />
@@ -274,8 +303,8 @@ describe('AccordionItem', () => {
     const item = el.firstElementChild as JSX.Element
     item.updateComponent()
     await flushUpdates()
-    const header = item.querySelector('.accordion-header') as HTMLElement
-    expect(header.tabIndex).toBe(-1)
+    const header = item.querySelector('.accordion-header') as HTMLButtonElement
+    expect(header.disabled).toBe(true)
   })
 
   it('should toggle data-expanded on header click', async () => {
@@ -299,7 +328,6 @@ describe('AccordionItem', () => {
     header.click()
     await flushUpdates()
 
-    // The attribute is set synchronously before the animation awaits
     expect(item.hasAttribute('data-expanded')).toBe(true)
   })
 
@@ -324,75 +352,6 @@ describe('AccordionItem', () => {
     header.click()
     await flushUpdates()
 
-    // The attribute is removed synchronously before the animation awaits
-    expect(item.hasAttribute('data-expanded')).toBe(false)
-  })
-
-  it('should toggle on Enter keydown', async () => {
-    const mockAnimation = { finished: Promise.resolve() }
-    Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation)
-
-    const el = (
-      <div>
-        <AccordionItem title="Keyboard Toggle">
-          <p>Content</p>
-        </AccordionItem>
-      </div>
-    )
-    const item = el.firstElementChild as JSX.Element
-    item.updateComponent()
-    await flushUpdates()
-
-    expect(item.hasAttribute('data-expanded')).toBe(false)
-
-    const header = item.querySelector('.accordion-header') as HTMLElement
-    header.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-    await flushUpdates()
-
-    expect(item.hasAttribute('data-expanded')).toBe(true)
-  })
-
-  it('should toggle on Space keydown', async () => {
-    const mockAnimation = { finished: Promise.resolve() }
-    Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation)
-
-    const el = (
-      <div>
-        <AccordionItem title="Space Toggle">
-          <p>Content</p>
-        </AccordionItem>
-      </div>
-    )
-    const item = el.firstElementChild as JSX.Element
-    item.updateComponent()
-    await flushUpdates()
-
-    expect(item.hasAttribute('data-expanded')).toBe(false)
-
-    const header = item.querySelector('.accordion-header') as HTMLElement
-    header.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
-    await flushUpdates()
-
-    expect(item.hasAttribute('data-expanded')).toBe(true)
-  })
-
-  it('should not toggle on unrelated keydown', async () => {
-    const el = (
-      <div>
-        <AccordionItem title="No Toggle">
-          <p>Content</p>
-        </AccordionItem>
-      </div>
-    )
-    const item = el.firstElementChild as JSX.Element
-    item.updateComponent()
-    await flushUpdates()
-
-    expect(item.hasAttribute('data-expanded')).toBe(false)
-
-    const header = item.querySelector('.accordion-header') as HTMLElement
-    header.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
-
     expect(item.hasAttribute('data-expanded')).toBe(false)
   })
 
@@ -415,4 +374,100 @@ describe('AccordionItem', () => {
 
     expect(item.hasAttribute('data-expanded')).toBe(false)
   })
+
+  describe('spatial navigation integration', () => {
+    it('should set inert on content when collapsed', async () => {
+      const el = (
+        <div>
+          <AccordionItem title="Collapsed">
+            <p>Content</p>
+          </AccordionItem>
+        </div>
+      )
+      const item = el.firstElementChild as JSX.Element
+      item.updateComponent()
+      await flushUpdates()
+      const content = item.querySelector('.accordion-content') as HTMLElement
+      expect(content.inert).toBe(true)
+    })
+
+    it('should not set inert on content when expanded', async () => {
+      const el = (
+        <div>
+          <AccordionItem title="Expanded" defaultExpanded>
+            <p>Content</p>
+          </AccordionItem>
+        </div>
+      )
+      const item = el.firstElementChild as JSX.Element
+      item.updateComponent()
+      await flushUpdates()
+      const content = item.querySelector('.accordion-content') as HTMLElement
+      expect(content.inert).toBe(false)
+    })
+
+    it('should set inert on content after collapsing', async () => {
+      const mockAnimation = { finished: Promise.resolve() }
+      Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation)
+
+      const el = (
+        <div>
+          <AccordionItem title="Toggleable" defaultExpanded>
+            <p>Content</p>
+          </AccordionItem>
+        </div>
+      )
+      const item = el.firstElementChild as JSX.Element
+      item.updateComponent()
+      await flushUpdates()
+
+      const content = item.querySelector('.accordion-content') as HTMLElement
+      expect(content.inert).toBe(false)
+
+      const header = item.querySelector('.accordion-header') as HTMLElement
+      header.click()
+      await flushUpdates()
+
+      expect(content.inert).toBe(true)
+    })
+
+    it('should remove inert on content after expanding', async () => {
+      const mockAnimation = { finished: Promise.resolve() }
+      Element.prototype.animate = vi.fn().mockReturnValue(mockAnimation)
+
+      const el = (
+        <div>
+          <AccordionItem title="Toggleable">
+            <p>Content</p>
+          </AccordionItem>
+        </div>
+      )
+      const item = el.firstElementChild as JSX.Element
+      item.updateComponent()
+      await flushUpdates()
+
+      const content = item.querySelector('.accordion-content') as HTMLElement
+      expect(content.inert).toBe(true)
+
+      const header = item.querySelector('.accordion-header') as HTMLElement
+      header.click()
+      await flushUpdates()
+
+      expect(content.inert).toBe(false)
+    })
+
+    it('should exclude disabled header from spatial navigation via native disabled attribute', async () => {
+      const el = (
+        <div>
+          <AccordionItem title="Disabled" disabled />
+        </div>
+      )
+      const item = el.firstElementChild as JSX.Element
+      item.updateComponent()
+      await flushUpdates()
+      const header = item.querySelector('.accordion-header') as HTMLButtonElement
+      expect(header.disabled).toBe(true)
+      expect(header.matches('button:not([disabled])')).toBe(false)
+    })
+  })
 })

package/src/components/accordion/accordion.tsx

@@ -1,12 +1,21 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 
+let nextAccordionId = 0
+
 /**
  * Props for the Accordion container component.
  */
 export type AccordionProps = {
   /** Visual variant of the accordion container */
   variant?: 'outlined' | 'elevation'
+  /**
+   * Section name for spatial navigation scoping.
+   * Sets `data-nav-section` on the accordion so that SpatialNavigationService
+   * constrains arrow-key navigation within the accordion group.
+   * Auto-generated per instance when not provided.
+   */
+  navSection?: string
 }
 
 /**
@@ -41,9 +50,12 @@ export const Accordion = Shade<AccordionProps>({
       background: cssVariableTheme.background.paper,
     },
   },
-  render: ({ props, useHostProps, children }) => {
+  render: ({ props, useHostProps, children, useState }) => {
+    const [navSectionId] = useState('navSectionId', String(nextAccordionId++))
+
     useHostProps({
       'data-variant': props.variant || undefined,
+      'data-nav-section': props.navSection ?? `accordion-${navSectionId}`,
     })
 
     return <>{children}</>

package/src/components/carousel.tsx

@@ -200,7 +200,7 @@ export const Carousel = Shade<CarouselProps>({
       'data-vertical': vertical ? '' : undefined,
       role: 'region',
       'aria-roledescription': 'carousel',
-      tabindex: '0',
+      tabIndex: 0,
       ...(style ? { style: style as Record<string, string> } : {}),
     })
 

package/src/components/chip.spec.tsx

@@ -140,6 +140,70 @@ describe('Chip', () => {
     expect(chip.hasAttribute('data-clickable')).toBe(true)
   })
 
+  it('should be focusable when clickable', async () => {
+    const el = (
+      <div>
+        <Chip clickable>Clickable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('should be focusable when onclick handler is provided', async () => {
+    const el = (
+      <div>
+        <Chip onclick={() => {}}>Click Handler</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('should not be focusable when clickable but disabled', async () => {
+    const el = (
+      <div>
+        <Chip clickable disabled>
+          Disabled Clickable
+        </Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.hasAttribute('tabindex')).toBe(false)
+  })
+
+  it('should not be focusable when not clickable', async () => {
+    const el = (
+      <div>
+        <Chip>Not Clickable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.hasAttribute('tabindex')).toBe(false)
+  })
+
+  it('should have a focusable delete button', async () => {
+    const onDelete = vi.fn()
+    const el = (
+      <div>
+        <Chip onDelete={onDelete}>Deletable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    const deleteBtn = chip.querySelector('.chip-delete') as HTMLElement
+    expect(deleteBtn.getAttribute('tabindex')).toBe('0')
+  })
+
   it('should set CSS custom properties for palette color', async () => {
     const el = (
       <div>

package/src/components/chip.tsx

@@ -152,11 +152,13 @@ export const Chip = Shade<ChipProps>({
     const { variant, color, size, disabled, clickable, onDelete, style, ...rest } = props
 
     const colors = color ? paletteFullColors[color] : defaultColors
+    const isClickable = clickable || rest.onclick
     useHostProps({
       'data-variant': variant || undefined,
       'data-size': size === 'small' ? 'small' : undefined,
       'data-disabled': disabled ? '' : undefined,
-      'data-clickable': clickable || rest.onclick ? '' : undefined,
+      'data-clickable': isClickable ? '' : undefined,
+      tabIndex: isClickable && !disabled ? 0 : undefined,
       style: {
         '--chip-color-main': colors.main,
         '--chip-color-main-contrast': colors.mainContrast,
@@ -174,6 +176,7 @@ export const Chip = Shade<ChipProps>({
           <span
             className="chip-delete"
             role="button"
+            tabIndex={0}
             onclick={(ev: MouseEvent) => {
               ev.stopPropagation()
               onDelete(ev)

package/src/components/command-palette/index.spec.tsx

@@ -121,12 +121,16 @@ describe('CommandPalette', () => {
   })
 
   describe('keyboard navigation', () => {
-    const triggerKeyup = (input: HTMLInputElement, key: string) => {
-      const event = new KeyboardEvent('keyup', { key, bubbles: true })
+    const triggerKeydown = (input: HTMLInputElement, key: string) => {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true })
       Object.defineProperty(event, 'target', { value: input, writable: false })
       input.dispatchEvent(event)
     }
 
+    const triggerInput = (input: HTMLInputElement) => {
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+
     const getSuggestionItems = (commandPalette: HTMLElement) => {
       const suggestionList = commandPalette.querySelector('shade-command-palette-suggestion-list') as HTMLElement
       return suggestionList?.querySelectorAll('.suggestion-item') || []
@@ -155,13 +159,13 @@ describe('CommandPalette', () => {
 
         // Open and trigger suggestions
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press ArrowDown
-        triggerKeyup(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -192,15 +196,15 @@ describe('CommandPalette', () => {
 
         // Open and trigger suggestions
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Navigate down then up
-        triggerKeyup(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
         await flushUpdates()
-        triggerKeyup(input, 'ArrowUp')
+        triggerKeydown(input, 'ArrowUp')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -226,15 +230,15 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press ArrowDown multiple times
-        triggerKeyup(input, 'ArrowDown')
-        triggerKeyup(input, 'ArrowDown')
-        triggerKeyup(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
+        triggerKeydown(input, 'ArrowDown')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -260,13 +264,13 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press ArrowUp when already at first item
-        triggerKeyup(input, 'ArrowUp')
+        triggerKeydown(input, 'ArrowUp')
         await flushUpdates()
 
         const suggestionItems = getSuggestionItems(commandPalette)
@@ -293,13 +297,13 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Press Enter
-        triggerKeyup(input, 'Enter')
+        triggerKeydown(input, 'Enter')
         await flushUpdates()
 
         expect(onSelected).toHaveBeenCalledTimes(1)
@@ -309,12 +313,16 @@ describe('CommandPalette', () => {
   })
 
   describe('selection', () => {
-    const triggerKeyup = (input: HTMLInputElement, key: string) => {
-      const event = new KeyboardEvent('keyup', { key, bubbles: true })
+    const triggerKeydown = (input: HTMLInputElement, key: string) => {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true })
       Object.defineProperty(event, 'target', { value: input, writable: false })
       input.dispatchEvent(event)
     }
 
+    const triggerInput = (input: HTMLInputElement) => {
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+
     const getSuggestionItems = (commandPalette: HTMLElement) => {
       const suggestionList = commandPalette.querySelector('shade-command-palette-suggestion-list') as HTMLElement
       return suggestionList?.querySelectorAll('.suggestion-item') || []
@@ -345,7 +353,7 @@ describe('CommandPalette', () => {
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -386,12 +394,13 @@ describe('CommandPalette', () => {
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
-        triggerKeyup(input, 'a')
+        triggerInput(input)
 
+        await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
 
         // Select via Enter
-        triggerKeyup(input, 'Enter')
+        triggerKeydown(input, 'Enter')
         await flushUpdates()
 
         expect(commandPalette.hasAttribute('data-opened')).toBe(false)
@@ -400,10 +409,8 @@ describe('CommandPalette', () => {
   })
 
   describe('command providers', () => {
-    const triggerKeyup = (input: HTMLInputElement, key: string) => {
-      const event = new KeyboardEvent('keyup', { key, bubbles: true })
-      Object.defineProperty(event, 'target', { value: input, writable: false })
-      input.dispatchEvent(event)
+    const triggerInput = (input: HTMLInputElement) => {
+      input.dispatchEvent(new Event('input', { bubbles: true }))
     }
 
     const getSuggestionItems = (commandPalette: HTMLElement) => {
@@ -430,7 +437,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'search'
-        triggerKeyup(input, 'h')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -459,7 +466,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'search'
-        triggerKeyup(input, 'h')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -493,7 +500,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'search'
-        triggerKeyup(input, 'h')
+        triggerInput(input)
 
         await vi.advanceTimersByTimeAsync(300)
         await flushUpdates()
@@ -585,9 +592,7 @@ describe('CommandPalette', () => {
         const input = commandPalette.querySelector('input') as HTMLInputElement
 
         input.value = 'test'
-        const event = new KeyboardEvent('keyup', { key: 't', bubbles: true })
-        Object.defineProperty(event, 'target', { value: input, writable: false })
-        input.dispatchEvent(event)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await vi.advanceTimersByTimeAsync(260)
         await flushUpdates()
@@ -602,6 +607,65 @@ describe('CommandPalette', () => {
     })
   })
 
+  describe('spatial navigation attributes', () => {
+    it('should have data-spatial-nav-target on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPalette commandProviders={[]} defaultPrefix=">" />,
+        })
+
+        await flushUpdates()
+
+        const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
+        expect(commandPalette.hasAttribute('data-spatial-nav-target')).toBe(true)
+      })
+    })
+
+    it('should have tabIndex of -1 on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPalette commandProviders={[]} defaultPrefix=">" />,
+        })
+
+        await flushUpdates()
+
+        const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
+        expect(commandPalette.tabIndex).toBe(-1)
+      })
+    })
+
+    it('should delegate focus to the inner input when the host is focused', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <CommandPalette commandProviders={[]} defaultPrefix=">" />,
+        })
+
+        await flushUpdates()
+
+        const commandPalette = document.querySelector('shade-command-palette') as HTMLElement
+        const input = commandPalette.querySelector('input') as HTMLInputElement
+
+        commandPalette.dispatchEvent(new FocusEvent('focus', { bubbles: false }))
+
+        await flushUpdates()
+
+        expect(document.activeElement).toBe(input)
+      })
+    })
+  })
+
   describe('click away', () => {
     it('should close when clicking outside the component', async () => {
       await usingAsync(new Injector(), async (injector) => {
@@ -681,9 +745,7 @@ describe('CommandPalette', () => {
 
         const input = commandPalette.querySelector('input') as HTMLInputElement
         input.value = 'test'
-        const event = new KeyboardEvent('keyup', { key: 't', bubbles: true })
-        Object.defineProperty(event, 'target', { value: input, writable: false })
-        input.dispatchEvent(event)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await flushUpdates()