@open-mercato/ui 0.6.8-develop.6998.1.d2bc46c56c → 0.6.8-develop.7003.1.24fef49d48

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -5,6 +5,7 @@
 import type { LucideIcon } from 'lucide-react';
 import {
   Activity,
+  AlarmClock,
   AlertCircle,
   AlertOctagon,
   AlertTriangle,
@@ -44,6 +45,7 @@ import {
   Clock3,
   Coins,
   Copy,
+  CopyX,
   CreditCard,
   Crown,
   Database,
@@ -67,6 +69,7 @@ import {
   GitPullRequestArrow,
   Globe,
   GraduationCap,
+  Hammer,
   Hand,
   Handshake,
   Headphones,
@@ -82,6 +85,7 @@ import {
   LineChart,
   Link,
   List,
+  ListX,
   Loader,
   Loader2,
   Lock,
@@ -92,6 +96,7 @@ import {
   MapPinned,
   Megaphone,
   MessageCircle,
+  MessageSquareReply,
   MinusCircle,
   Notebook,
   Package,
@@ -109,6 +114,7 @@ import {
   ReceiptText,
   RefreshCcw,
   RefreshCw,
+  Repeat2,
   Reply,
   RotateCcw,
   Ruler,
@@ -156,10 +162,12 @@ import {
   Wrench,
   X,
   XCircle,
+  ZapOff,
 } from 'lucide-react';
 
 export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'activity': Activity,
+  'alarm-clock': AlarmClock,
   'alert-circle': AlertCircle,
   'alert-octagon': AlertOctagon,
   'alert-triangle': AlertTriangle,
@@ -199,6 +207,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'clock-3': Clock3,
   'coins': Coins,
   'copy': Copy,
+  'copy-x': CopyX,
   'credit-card': CreditCard,
   'crown': Crown,
   'database': Database,
@@ -222,6 +231,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'git-pull-request-arrow': GitPullRequestArrow,
   'globe': Globe,
   'graduation-cap': GraduationCap,
+  'hammer': Hammer,
   'hand': Hand,
   'handshake': Handshake,
   'headphones': Headphones,
@@ -237,6 +247,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'line-chart': LineChart,
   'link': Link,
   'list': List,
+  'list-x': ListX,
   'loader': Loader,
   'loader-2': Loader2,
   'lock': Lock,
@@ -247,6 +258,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'map-pinned': MapPinned,
   'megaphone': Megaphone,
   'message-circle': MessageCircle,
+  'message-square-reply': MessageSquareReply,
   'minus-circle': MinusCircle,
   'notebook': Notebook,
   'package': Package,
@@ -264,6 +276,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'receipt-text': ReceiptText,
   'refresh-ccw': RefreshCcw,
   'refresh-cw': RefreshCw,
+  'repeat-2': Repeat2,
   'reply': Reply,
   'rotate-ccw': RotateCcw,
   'ruler': Ruler,
@@ -311,4 +324,5 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'wrench': Wrench,
   'x': X,
   'x-circle': XCircle,
+  'zap-off': ZapOff,
 };

package/src/backend/inputs/ComboboxInput.tsx

@@ -82,6 +82,7 @@ export function ComboboxInput({
   const t = useT()
   const resolvedPlaceholder = placeholder ?? t('ui.inputs.comboboxInput.placeholder', 'Type to search...')
   const loadingLabel = t('ui.inputs.comboboxInput.loading', 'Loading suggestions…')
+  const noMatchesLabel = t('ui.inputs.comboboxInput.noMatches', 'No matches found')
   const resolvedClearLabel = clearLabel ?? t('ui.inputs.comboboxInput.clear', 'Clear value')
   const blurCloseDelayMs = 250
   const blurCloseMaxDelayMs = 1000
@@ -392,7 +393,9 @@ export function ComboboxInput({
   }, [optionDomId, selectedIndex, showSuggestions])
 
   const showClearButton = clearable && !disabled && (value !== '' || input !== '')
-  const listboxVisible = showSuggestions && !disabled && (loading || filteredSuggestions.length > 0)
+  const listboxVisible = showSuggestions
+    && !disabled
+    && (loading || filteredSuggestions.length > 0 || (touched && input.trim().length > 0))
 
   return (
     <div className="relative w-full">
@@ -416,7 +419,7 @@ export function ComboboxInput({
         disabled={disabled}
         role="combobox"
         aria-expanded={listboxVisible}
-        aria-controls={listboxId}
+        aria-controls={listboxVisible && !loading && filteredSuggestions.length > 0 ? listboxId : undefined}
         aria-autocomplete="list"
         aria-activedescendant={listboxVisible && selectedIndex >= 0 ? optionDomId(selectedIndex) : undefined}
         onFocus={() => {
@@ -467,9 +470,13 @@ export function ComboboxInput({
       ) : null}
 
       {listboxVisible && (
-        <div className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto">
+        <div
+          className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto"
+        >
           {loading && touched ? (
-            <div className="px-2 py-1.5 text-xs text-muted-foreground">{loadingLabel}</div>
+            <div className="px-2 py-1.5 text-xs text-muted-foreground" role="status">{loadingLabel}</div>
+          ) : touched && !filteredSuggestions.length ? (
+            <div className="px-2 py-1.5 text-xs text-muted-foreground" role="status">{noMatchesLabel}</div>
           ) : (
             <div id={listboxId} role="listbox" className="flex flex-col gap-1">
               {filteredSuggestions.map((option, index) => (

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

@@ -5,7 +5,7 @@ jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
 }))
 
 import * as React from 'react'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { ComboboxInput } from '../ComboboxInput'
 
 type HarnessProps = Partial<React.ComponentProps<typeof ComboboxInput>> & {
@@ -397,3 +397,23 @@ describe('ComboboxInput — eager label resolution', () => {
     await waitFor(() => expect(getInput(container).value).toBe('Label-b'))
   })
 })
+
+describe('ComboboxInput accessibility', () => {
+  it('exposes status text separately and reserves listbox for options', () => {
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'missing' } })
+
+    expect(screen.getByText(/no matches/i)).toHaveAttribute('role', 'status')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    expect(input).not.toHaveAttribute('aria-controls')
+
+    fireEvent.change(input, { target: { value: 're' } })
+
+    const listbox = screen.getByRole('listbox')
+    expect(within(listbox).getAllByRole('option')).toHaveLength(2)
+    expect(input).toHaveAttribute('aria-controls', listbox.id)
+  })
+})