@open-mercato/ui 0.6.8-develop.6924.1.a8d208fcdc → 0.6.8-develop.6930.1.1e5976efc3

package/src/backend/inputs/LookupSelect.tsx

@@ -86,6 +86,8 @@ export function LookupSelect({
   const [hasTyped, setHasTyped] = React.useState(defaultOpen)
   const [error, setError] = React.useState<string | null>(null)
   const [fetchKey, setFetchKey] = React.useState(0)
+  const [activeIndex, setActiveIndex] = React.useState(-1)
+  const listboxId = React.useId()
   const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)
   const setQueryRef = React.useRef(setQuery)
   const onReadyRef = React.useRef(onReady)
@@ -116,6 +118,73 @@ export function LookupSelect({
 
   const shouldSearch =
     defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)
+
+  React.useEffect(() => {
+    setActiveIndex(-1)
+  }, [items])
+
+  const optionDomId = React.useCallback(
+    (index: number) => `${listboxId}-option-${index}`,
+    [listboxId],
+  )
+
+  const isInteractiveItem = React.useCallback(
+    (item: LookupSelectItem) => !item.disabled || value === item.id,
+    [value],
+  )
+
+  const moveActiveIndex = React.useCallback((direction: 1 | -1) => {
+    setActiveIndex((current) => {
+      if (!items.length) return -1
+      let next = current
+      for (let step = 0; step < items.length; step += 1) {
+        next = (next + direction + items.length) % items.length
+        if (isInteractiveItem(items[next])) return next
+      }
+      return current
+    })
+  }, [isInteractiveItem, items])
+
+  React.useEffect(() => {
+    if (activeIndex < 0) return
+    const activeElement = typeof document !== 'undefined'
+      ? document.getElementById(optionDomId(activeIndex))
+      : null
+    if (typeof activeElement?.scrollIntoView === 'function') {
+      activeElement.scrollIntoView({ block: 'nearest' })
+    }
+  }, [activeIndex, optionDomId])
+
+  const listboxVisible = shouldSearch && !disabled
+  const handleInputKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!listboxVisible) return
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveActiveIndex(1)
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveActiveIndex(-1)
+      return
+    }
+    if (event.key === 'Enter') {
+      if (activeIndex < 0 || activeIndex >= items.length) return
+      const item = items[activeIndex]
+      if (!isInteractiveItem(item)) return
+      event.preventDefault()
+      onChange(item.id)
+      setActiveIndex(-1)
+      return
+    }
+    if (event.key === 'Escape') {
+      if (query.length === 0 && activeIndex < 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      setQuery('')
+      setActiveIndex(-1)
+    }
+  }, [activeIndex, items, isInteractiveItem, listboxVisible, moveActiveIndex, onChange, query])
   React.useEffect(() => {
     if (disabled) {
       setItems(options ?? [])
@@ -169,8 +238,14 @@ export function LookupSelect({
               setQuery(event.target.value)
               setHasTyped(true)
             }}
+            onKeyDown={handleInputKeyDown}
             placeholder={resolvedSearchPlaceholder}
             disabled={disabled}
+            role="combobox"
+            aria-expanded={listboxVisible}
+            aria-controls={listboxId}
+            aria-autocomplete="list"
+            aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}
           />
         </div>
         {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
@@ -186,21 +261,28 @@ export function LookupSelect({
           {!loading && !loadingProp && !items.length ? (
             <p className="text-xs text-muted-foreground">{resolvedEmptyLabel}</p>
           ) : null}
-          <div className="flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5">
-            {items.map((item) => {
+          <div
+            id={listboxId}
+            role="listbox"
+            className="flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5"
+          >
+            {items.map((item, index) => {
               const isSelected = value === item.id
               const isInteractive = !item.disabled || isSelected
+              const isActive = index === activeIndex
               return (
                 <div
                   key={item.id}
+                  id={optionDomId(index)}
                   className={cn(
                     'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',
                     isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',
                     isSelected
                       ? 'border-brand-violet bg-brand-violet/5 shadow-sm'
-                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm'
+                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm',
+                    isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null
                   )}
-                  role="button"
+                  role="option"
                   tabIndex={item.disabled ? -1 : 0}
                   onClick={() => {
                     if (!isInteractive) return
@@ -213,7 +295,7 @@ export function LookupSelect({
                       onChange(item.id)
                     }
                   }}
-                  aria-pressed={isSelected}
+                  aria-selected={isSelected}
                   aria-disabled={item.disabled && !isSelected ? true : undefined}
                   title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}
                 >

package/src/backend/inputs/__tests__/ComboboxInput.test.tsx

@@ -71,7 +71,7 @@ describe('ComboboxInput clearable behavior', () => {
       />
     )
 
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
     expect(input.value).toBe('Red')
 
     fireEvent.focus(input)
@@ -96,7 +96,7 @@ describe('ComboboxInput clearable behavior', () => {
       />
     )
 
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
     fireEvent.focus(input)
     fireEvent.change(input, { target: { value: '' } })
 
@@ -111,7 +111,7 @@ describe('ComboboxInput clearable behavior', () => {
     const onChange = jest.fn()
     render(<Harness initialValue="red" clearable onChange={onChange} />)
 
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
     expect(input.value).toBe('Red')
 
     const clearBtn = screen.getByRole('button', { name: /clear value/i })

package/src/backend/inputs/__tests__/LookupSelect.test.tsx

@@ -86,3 +86,80 @@ describe('LookupSelect onReady stability', () => {
     expect(input.value).toBe('Mercato Fashion Online')
   })
 })
+
+describe('LookupSelect keyboard accessibility', () => {
+  const ITEMS = [
+    { id: 'plot-1', title: 'Fazenda Norte' },
+    { id: 'plot-2', title: 'Fazenda Sul' },
+  ]
+
+  function renderWithResults(onChange: (next: string | null) => void) {
+    const utils = render(
+      <LookupSelect
+        value={null}
+        onChange={onChange}
+        fetchItems={async () => ITEMS}
+        minQuery={2}
+      />,
+    )
+    return utils
+  }
+
+  it('exposes combobox/listbox/option semantics once results render', async () => {
+    const { container } = renderWithResults(() => {})
+    const input = getInput(container)
+    expect(input).toHaveAttribute('role', 'combobox')
+    expect(input).toHaveAttribute('aria-autocomplete', 'list')
+
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    const options = await screen.findAllByRole('option')
+    expect(options).toHaveLength(2)
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    expect(input).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('selects the highlighted result with ArrowDown + Enter', async () => {
+    const onChange = jest.fn()
+    const { container } = renderWithResults(onChange)
+    const input = getInput(container)
+
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    await screen.findAllByRole('option')
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    expect(input).toHaveAttribute('aria-activedescendant')
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onChange).toHaveBeenCalledWith('plot-1')
+  })
+
+  it('moves the highlight with repeated arrows and wraps', async () => {
+    const onChange = jest.fn()
+    const { container } = renderWithResults(onChange)
+    const input = getInput(container)
+
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    await screen.findAllByRole('option')
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onChange).toHaveBeenCalledWith('plot-2')
+  })
+
+  it('clears the query with Escape instead of leaking it to the dialog', async () => {
+    const escapeSpy = jest.fn()
+    const { container } = render(
+      <div onKeyDown={escapeSpy}>
+        <LookupSelect value={null} onChange={() => {}} fetchItems={async () => ITEMS} minQuery={2} />
+      </div>,
+    )
+    const input = getInput(container)
+    fireEvent.change(input, { target: { value: 'Faz' } })
+    await screen.findAllByRole('option')
+
+    escapeSpy.mockClear()
+    fireEvent.keyDown(input, { key: 'Escape' })
+    expect(input.value).toBe('')
+    expect(escapeSpy).not.toHaveBeenCalled()
+  })
+})