@estiva-app/ui 0.12.8 → 0.12.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -33,6 +33,7 @@
     "test:a11y": "vitest run --project storybook-signal --project storybook-ship",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
+    "gates:status": "node scripts/gates-status.mjs",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {

package/src/ChipInput.mdx

@@ -55,6 +55,15 @@ import { ChipInput } from '@estiva-app/ui'
   arrow keys move through the suggestions, and a screen reader is told which
   one is highlighted. The list is as wide as the field and hangs below it,
   or above when there is no room.
+- **The field's name.** Inside a `Field`, the label names it — pass nothing.
+  Anywhere else, pass `aria-label`, or `aria-labelledby` pointing at a
+  visible label such as a "To:". With neither, the placeholder is the name,
+  and it stays the name after the first chip stops it being drawn.
+
+```tsx
+<span id="to-label">To:</span>
+<ChipInput aria-labelledby="to-label" value={chosen} onChange={setChosen} options={directory} />
+```
 
 ## Keys
 

package/src/ChipInput.stories.tsx

@@ -29,10 +29,6 @@ const meta = {
   title: 'Inputs/ChipInput',
   component: ChipInput,
   parameters: {
-    // axe label is off here: once a chip is in the field the input drops its placeholder
-    // and has no name of its own, and no prop lets the caller give it one. Settled at the
-    // Combobox port (PLAN.md stage 5).
-    a11y: { config: { rules: [{ id: 'label', enabled: false }] } },
     // The suggestion list portals to document.body at fixed coordinates —
     // render docs usage in an iframe so it lands where the field is.
     docs: { story: { inline: false, height: '320px' } },

package/src/ChipInput.test.tsx

@@ -13,7 +13,8 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
-import { ChipInput, type ChipInputOption } from './ChipInput'
+import { ChipInput, InputChip, type ChipInputOption } from './ChipInput'
+import { Field } from './Field'
 
 afterEach(cleanup)
 
@@ -23,7 +24,17 @@ const PEOPLE: ChipInputOption[] = [
   { id: 'alan', label: 'Alan Turing', description: 'Mathematician' },
 ]
 
-function Harness({ initial = [], excludeIds, onChange }: { initial?: ChipInputOption[]; excludeIds?: string[]; onChange?: (v: ChipInputOption[]) => void }) {
+function Harness({
+  initial = [],
+  excludeIds,
+  onChange,
+  naming,
+}: {
+  initial?: ChipInputOption[]
+  excludeIds?: string[]
+  onChange?: (v: ChipInputOption[]) => void
+  naming?: { 'aria-label'?: string; 'aria-labelledby'?: string }
+}) {
   const [value, setValue] = useState(initial)
   return (
     <ChipInput
@@ -35,6 +46,7 @@ function Harness({ initial = [], excludeIds, onChange }: { initial?: ChipInputOp
       options={PEOPLE}
       excludeIds={excludeIds}
       placeholder="Search people"
+      {...naming}
     />
   )
 }
@@ -139,4 +151,68 @@ describe('ChipInput', () => {
     await user.keyboard('{Escape}')
     expect(reachedOutside).toHaveBeenCalledTimes(1)
   })
+
+  describe('the field’s name (PLAN Finding 6)', () => {
+    /* Chrome names an empty field by its placeholder, and the first chip takes
+       the placeholder away. Measured in Chrome's accessibility tree before this
+       was fixed: with a chip in, the name was "". */
+    it('keeps the placeholder as its name once a chip takes the placeholder away', () => {
+      render(<Harness initial={[PEOPLE[0]]} />)
+      const input = screen.getByRole('combobox', { name: 'Search people' })
+      expect(input.getAttribute('placeholder')).toBe('')
+    })
+
+    it('adds no name of its own while the placeholder is still drawn', () => {
+      render(<Harness />)
+      expect(screen.getByRole('combobox').getAttribute('aria-label')).toBeNull()
+    })
+
+    it('takes a caller’s aria-label over the placeholder', () => {
+      render(<Harness initial={[PEOPLE[0]]} naming={{ 'aria-label': 'To' }} />)
+      expect(screen.getByRole('combobox', { name: 'To' })).toBeTruthy()
+    })
+
+    it('takes a caller’s aria-labelledby — a visible “To:”', () => {
+      render(
+        <div>
+          <span id="to">To:</span>
+          <Harness initial={[PEOPLE[0]]} naming={{ 'aria-labelledby': 'to' }} />
+        </div>,
+      )
+      expect(screen.getByRole('combobox', { name: 'To:' })).toBeTruthy()
+    })
+
+    /* The trap this pins: Base UI copies a caller's prop over its own even when
+       it is `undefined`, so an `aria-labelledby` passed through empty would wipe
+       the `Field`'s and the placeholder would name the field instead. */
+    it('inside a Field, is named by the Field’s label, chip or no chip', () => {
+      render(
+        <>
+          <Field label="Invite people">
+            <Harness />
+          </Field>
+          <Field label="Reviewers">
+            <Harness initial={[PEOPLE[0]]} />
+          </Field>
+        </>,
+      )
+      expect(screen.getByRole('combobox', { name: 'Invite people' })).toBeTruthy()
+      expect(screen.getByRole('combobox', { name: 'Reviewers' })).toBeTruthy()
+    })
+  })
+})
+
+describe('InputChip', () => {
+  it('its ✕ is a button named for the chip, and removes it', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    render(<InputChip label="Label" onRemove={onRemove} />)
+    await user.click(screen.getByRole('button', { name: 'Remove Label' }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  it('draws no ✕ without onRemove', () => {
+    render(<InputChip label="Label" />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
 })

package/src/ChipInput.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { Combobox } from '@base-ui/react/combobox'
 import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
@@ -45,8 +46,12 @@ export function InputChip({ label, leading, onRemove, className }: InputChipProp
     <div className={cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className)}>
       {leading && <span className="flex shrink-0 items-center">{leading}</span>}
       <span className={CHIP_LABEL}>{label}</span>
+      {/* Base UI's `Button`, as every button in the package is (D6). Base UI
+          has no chip of its own — its only chips are `Combobox.Chip` and
+          `ChipRemove`, which throw outside a combobox — so the ✕ is the one
+          part of a chip standing alone that it has a counterpart for. */}
       {onRemove && (
-        <button
+        <BaseButton
           type="button"
           onClick={(e) => {
             e.stopPropagation()
@@ -56,7 +61,7 @@ export function InputChip({ label, leading, onRemove, className }: InputChipProp
           aria-label={`Remove ${label}`}
         >
           <IconX size={10} stroke={1.5} />
-        </button>
+        </BaseButton>
       )}
     </div>
   )
@@ -112,6 +117,14 @@ export interface ChipInputProps<T extends ChipInputOption = ChipInputOption> {
   rowLeading?: (option: T) => ReactNode
   /** Set by a `Field` with `required`; a caller inside one owes nothing. */
   'aria-required'?: boolean | 'true' | 'false'
+  /**
+   * The field's name, for a caller that is not inside a `Field` — a `Field`'s
+   * label names it already. With neither this nor `aria-labelledby`, the
+   * placeholder is the name, and it stays the name once a chip is in.
+   */
+  'aria-label'?: string
+  /** The id of what names the field on the page — a visible "To:", say. */
+  'aria-labelledby'?: string
 }
 
 export function ChipInput<T extends ChipInputOption = ChipInputOption>({
@@ -158,6 +171,21 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
      the open state is this component's and not the part's. */
   const open = query.trim().length > 0
 
+  /* The field's name (PLAN Finding 6). With no chip, Chrome names the field
+     by its placeholder; the first chip takes the placeholder away, and the
+     field was left with no name at all (measured: ""). So the placeholder
+     stays on as the name once it is no longer drawn. A caller's own name
+     wins, and so does a `Field`'s label: Base UI points `aria-labelledby` at
+     it, and a label by reference outranks `aria-label`.
+     Only a name that exists is passed. Base UI copies a caller's prop over its
+     own even when the value is `undefined`, so an `aria-labelledby` written
+     out empty would wipe the `Field`'s. */
+  const ariaLabel = aria['aria-label'] ?? (value.length > 0 ? placeholder : undefined)
+  const naming = {
+    ...(ariaLabel !== undefined && { 'aria-label': ariaLabel }),
+    ...(aria['aria-labelledby'] !== undefined && { 'aria-labelledby': aria['aria-labelledby'] }),
+  }
+
   function removeLast() {
     if (value.length > 0) onChange(value.slice(0, -1))
   }
@@ -213,6 +241,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
           autoFocus={autoFocus}
           placeholder={value.length === 0 ? placeholder : ''}
           aria-required={aria['aria-required']}
+          {...naming}
           onKeyDown={onInputKeyDown}
           className="flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
         />