@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/primitives/__tests__/date-picker.test.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DatePicker } from '../date-picker'
+import { DatePicker as LegacyDatePicker } from '../../backend/inputs/DatePicker'
+import { DateTimePicker as LegacyDateTimePicker } from '../../backend/inputs/DateTimePicker'
+
+function renderWithI18n(ui: React.ReactElement) {
+  return render(<I18nProvider locale="en" dict={{}}>{ui}</I18nProvider>)
+}
+
+function getTrigger(): HTMLElement {
+  const trigger = document.querySelector('[data-slot="date-picker-trigger"]')
+  if (!trigger) throw new Error('DatePicker trigger not found')
+  return trigger as HTMLElement
+}
+
+async function openPopover() {
+  await act(async () => {
+    fireEvent.click(getTrigger())
+  })
+}
+
+describe('DatePicker primitive', () => {
+  it('renders the placeholder when value is null', () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} placeholder="Pick a date" />)
+    expect(screen.getByText('Pick a date')).toBeInTheDocument()
+  })
+
+  it('renders the formatted value when value is provided', () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 4, 9)} onChange={() => {}} />)
+    expect(screen.getByText('May 9, 2026')).toBeInTheDocument()
+  })
+
+  it('uses a custom display format when supplied', () => {
+    renderWithI18n(
+      <DatePicker value={new Date(2026, 4, 9)} onChange={() => {}} displayFormat="yyyy-MM-dd" />,
+    )
+    expect(screen.getByText('2026-05-09')).toBeInTheDocument()
+  })
+
+  it('opens the popover and renders the calendar grid on trigger click', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} placeholder="Pick" />)
+    await openPopover()
+    expect(screen.getByRole('grid')).toBeInTheDocument()
+  })
+
+  it('renders Apply and Cancel buttons in the default footer', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('renders Today and Clear links when footer="today-clear"', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} footer="today-clear" />)
+    await openPopover()
+    expect(screen.getByRole('button', { name: 'Today' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('hides the Today button when showTodayButton=false', async () => {
+    renderWithI18n(
+      <DatePicker
+        value={null}
+        onChange={() => {}}
+        footer="today-clear"
+        showTodayButton={false}
+      />,
+    )
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Today' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('hides the Clear button when showClearButton=false', async () => {
+    renderWithI18n(
+      <DatePicker
+        value={null}
+        onChange={() => {}}
+        footer="today-clear"
+        showClearButton={false}
+      />,
+    )
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Today' })).toBeInTheDocument()
+  })
+
+  it('renders no footer when footer="none"', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} footer="none" />)
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Today' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument()
+  })
+
+  it('blocks open when disabled', () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} disabled />)
+    const trigger = getTrigger()
+    expect(trigger).toBeDisabled()
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument()
+  })
+
+  it('commits today and closes when Today is clicked', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DatePicker value={null} onChange={onChange} footer="today-clear" />)
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Today' }))
+    })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const committed = onChange.mock.calls[0][0] as Date
+    expect(committed).toBeInstanceOf(Date)
+    expect(committed.getHours()).toBe(0)
+    expect(committed.getMinutes()).toBe(0)
+  })
+
+  it('commits null when Clear is clicked', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(
+      <DatePicker value={new Date(2026, 4, 9)} onChange={onChange} footer="today-clear" />,
+    )
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    })
+    expect(onChange).toHaveBeenCalledWith(null)
+  })
+
+  it('does not commit when Cancel is clicked in apply-cancel mode', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DatePicker value={null} onChange={onChange} />)
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('renders the time input when withTime=true', async () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 4, 9, 10, 30)} onChange={() => {}} withTime />)
+    expect(screen.getByText('May 9, 2026 10:30')).toBeInTheDocument()
+    await openPopover()
+    expect(screen.getByLabelText('Hour')).toBeInTheDocument()
+    expect(screen.getByLabelText('Minute')).toBeInTheDocument()
+  })
+
+  it('forwards aria-label to the trigger', () => {
+    renderWithI18n(
+      <DatePicker value={null} onChange={() => {}} aria-label="Birthday" />,
+    )
+    expect(screen.getByRole('button', { name: 'Birthday' })).toBeInTheDocument()
+  })
+
+  it('selected day cell paints primary fill and forces button transparent (regression)', async () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 4, 9)} onChange={() => {}} footer="none" />)
+    await openPopover()
+    // react-day-picker v9 applies `selected` className to the day `<td>` cell, not
+    // the inner `<button>`. The button defaults (hover/focus-visible bg) would
+    // otherwise paint over the cell's primary fill, so we force the button to
+    // render transparent on selected cells.
+    const selectedCells = Array.from(document.querySelectorAll('td.\\!bg-primary')) as HTMLElement[]
+    expect(selectedCells.length).toBeGreaterThan(0)
+    const cellClassName = selectedCells[0].className
+    expect(cellClassName).toMatch(/!bg-primary/)
+    // The td-level rule that neutralises the button's bg/hover/focus paint.
+    expect(cellClassName).toMatch(/\[&_button\]:!bg-transparent/)
+    expect(cellClassName).toMatch(/\[&_button:hover\]:!bg-transparent/)
+    expect(cellClassName).toMatch(/\[&_button:focus-visible\]:!bg-transparent/)
+    // No `ring-2` overlay on the default day_button class (replaced by bg-accent
+    // on focus-visible so selected days don't get a ring-on-top). Target a day cell
+    // button specifically (not month-nav buttons which still use ring styling).
+    const dayCellButton = selectedCells[0].querySelector('button')
+    if (dayCellButton) {
+      expect(dayCellButton.className).not.toMatch(/focus-visible:ring-2/)
+    }
+  })
+})
+
+describe('DatePicker backwards-compat shims', () => {
+  it('backend/inputs/DatePicker defaults to the Figma-aligned Apply/Cancel footer', async () => {
+    renderWithI18n(<LegacyDatePicker value={null} onChange={() => {}} />)
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('backend/inputs/DatePicker still honours explicit footer="today-clear"', async () => {
+    renderWithI18n(<LegacyDatePicker value={null} onChange={() => {}} footer="today-clear" />)
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByRole('button', { name: 'Today' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('backend/inputs/DateTimePicker renders the time input', async () => {
+    renderWithI18n(
+      <LegacyDateTimePicker value={new Date(2026, 4, 9, 10, 30)} onChange={() => {}} />,
+    )
+    expect(screen.getByText('May 9, 2026 10:30')).toBeInTheDocument()
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByLabelText('Hour')).toBeInTheDocument()
+    expect(screen.getByLabelText('Minute')).toBeInTheDocument()
+  })
+
+  it('backend/inputs/DateTimePicker defaults to the Figma-aligned Apply/Cancel footer', async () => {
+    renderWithI18n(<LegacyDateTimePicker value={null} onChange={() => {}} />)
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+})

package/src/primitives/__tests__/date-range-picker.test.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DateRangePicker } from '../date-range-picker'
+import { defaultDateRangePresets } from '../date-picker-helpers'
+
+function renderWithI18n(ui: React.ReactElement) {
+  return render(<I18nProvider locale="en" dict={{}}>{ui}</I18nProvider>)
+}
+
+function getTrigger(): HTMLElement {
+  const trigger = document.querySelector('[data-slot="date-range-picker-trigger"]')
+  if (!trigger) throw new Error('DateRangePicker trigger not found')
+  return trigger as HTMLElement
+}
+
+async function openPopover() {
+  await act(async () => {
+    fireEvent.click(getTrigger())
+  })
+}
+
+describe('DateRangePicker primitive', () => {
+  it('renders the placeholder when value is null', () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} placeholder="Pick a range" />)
+    expect(screen.getByText('Pick a range')).toBeInTheDocument()
+  })
+
+  it('renders the formatted range when value is provided', () => {
+    renderWithI18n(
+      <DateRangePicker
+        value={{ start: new Date(2026, 4, 1), end: new Date(2026, 4, 9) }}
+        onChange={() => {}}
+      />,
+    )
+    expect(screen.getByText('May 1, 2026 – May 9, 2026')).toBeInTheDocument()
+  })
+
+  it('opens the popover and renders two month grids by default', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getAllByRole('grid')).toHaveLength(2)
+  })
+
+  it('renders one month grid when numberOfMonths={1}', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} numberOfMonths={1} />)
+    await openPopover()
+    expect(screen.getAllByRole('grid')).toHaveLength(1)
+  })
+
+  it('renders the preset sidebar with default 8 presets (Figma 446:7412)', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    const sidebar = document.querySelector('[data-slot="date-range-presets"]')
+    expect(sidebar).toBeInTheDocument()
+    const buttons = sidebar!.querySelectorAll('button')
+    expect(buttons.length).toBe(8)
+  })
+
+  it('hides the preset sidebar when showPresets={false}', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} showPresets={false} />)
+    await openPopover()
+    expect(document.querySelector('[data-slot="date-range-presets"]')).toBeNull()
+  })
+
+  it('renders Apply and Cancel buttons in the footer by default', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('does not render footer when withFooter={false}', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} withFooter={false} />)
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument()
+  })
+
+  it('Cancel reverts the draft and does not call onChange', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DateRangePicker value={null} onChange={onChange} />)
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('clicking a preset stages a draft range matching the preset', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DateRangePicker value={null} onChange={onChange} />)
+    await openPopover()
+    const sidebar = document.querySelector('[data-slot="date-range-presets"]')
+    expect(sidebar).toBeInTheDocument()
+    const todayPreset = Array.from(sidebar!.querySelectorAll('button'))
+      .find((btn) => btn.textContent?.trim() === 'today')
+      || Array.from(sidebar!.querySelectorAll('button'))[0]
+    expect(todayPreset).toBeDefined()
+    await act(async () => {
+      fireEvent.click(todayPreset!)
+    })
+    // withFooter=true means draft is staged, not committed yet
+    expect(onChange).not.toHaveBeenCalled()
+    // Apply commits the staged preset range
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+    })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const committed = onChange.mock.calls[0][0]
+    expect(committed).toMatchObject({ start: expect.any(Date), end: expect.any(Date) })
+  })
+
+  it('blocks open when disabled', () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} disabled />)
+    const trigger = getTrigger()
+    expect(trigger).toBeDisabled()
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument()
+  })
+
+  it('forwards aria-label to the trigger', () => {
+    renderWithI18n(
+      <DateRangePicker value={null} onChange={() => {}} aria-label="Date filter" />,
+    )
+    expect(screen.getByRole('button', { name: 'Date filter' })).toBeInTheDocument()
+  })
+})
+
+describe('defaultDateRangePresets()', () => {
+  it('returns 8 presets (Figma 446:7412)', () => {
+    const presets = defaultDateRangePresets()
+    expect(presets).toHaveLength(8)
+  })
+
+  it('exposes preset id, labelKey, and a callable range function', () => {
+    const presets = defaultDateRangePresets()
+    for (const preset of presets) {
+      expect(typeof preset.id).toBe('string')
+      expect(typeof preset.labelKey).toBe('string')
+      expect(preset.labelKey).toMatch(/^ui\.dateRangePicker\.presets\./)
+      expect(typeof preset.range).toBe('function')
+      const range = preset.range()
+      expect(range.start).toBeInstanceOf(Date)
+      expect(range.end).toBeInstanceOf(Date)
+      expect(range.end.getTime()).toBeGreaterThanOrEqual(range.start.getTime())
+    }
+  })
+
+  it('includes the canonical Figma preset ids', () => {
+    const presets = defaultDateRangePresets()
+    const ids = presets.map((p) => p.id)
+    expect(ids).toEqual([
+      'today',
+      'last_7_days',
+      'last_30_days',
+      'last_3_months',
+      'last_12_months',
+      'month_to_date',
+      'year_to_date',
+      'all_time',
+    ])
+  })
+
+  it('today preset returns a range that contains the current date', () => {
+    const presets = defaultDateRangePresets()
+    const today = presets.find((p) => p.id === 'today')
+    expect(today).toBeDefined()
+    const range = today!.range()
+    const now = Date.now()
+    expect(range.start.getTime()).toBeLessThanOrEqual(now)
+    expect(range.end.getTime()).toBeGreaterThanOrEqual(now)
+  })
+})

package/src/primitives/__tests__/digit-input.test.tsx

@@ -0,0 +1,168 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { DigitInput } from '../digit-input'
+
+describe('DigitInput primitive', () => {
+  it('renders 6 cells by default', () => {
+    const { container } = render(<DigitInput />)
+    const cells = container.querySelectorAll('[data-slot="digit-input-cell"]')
+    expect(cells).toHaveLength(6)
+  })
+
+  it('honors the length prop', () => {
+    const { container } = render(<DigitInput length={4} />)
+    const cells = container.querySelectorAll('[data-slot="digit-input-cell"]')
+    expect(cells).toHaveLength(4)
+  })
+
+  it('renders the value distributed across cells', () => {
+    const { container } = render(<DigitInput value="12" length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    expect(cells[0].value).toBe('1')
+    expect(cells[1].value).toBe('2')
+    expect(cells[2].value).toBe('')
+    expect(cells[3].value).toBe('')
+  })
+
+  it('focuses the next cell after typing a digit', () => {
+    const { container } = render(<DigitInput length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[0].focus()
+    fireEvent.change(cells[0], { target: { value: '7' } })
+    expect(document.activeElement).toBe(cells[1])
+  })
+
+  it('commits typed digit via onChange', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: '5' } })
+    expect(onChange).toHaveBeenCalledWith('5')
+  })
+
+  it('rejects non-digit characters when inputMode is numeric (default)', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: 'a' } })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('accepts non-digit characters when inputMode="text"', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} inputMode="text" onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: 'X' } })
+    expect(onChange).toHaveBeenCalledWith('X')
+  })
+
+  it('Backspace on an empty cell focuses the previous cell and clears its value', () => {
+    const onChange = jest.fn()
+    const { container } = render(
+      <DigitInput value="12" length={4} onChange={onChange} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[2].focus()
+    fireEvent.keyDown(cells[2], { key: 'Backspace' })
+    expect(document.activeElement).toBe(cells[1])
+    expect(onChange).toHaveBeenCalledWith('1')
+  })
+
+  it('ArrowLeft moves focus to the previous cell', () => {
+    const { container } = render(<DigitInput length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[2].focus()
+    fireEvent.keyDown(cells[2], { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(cells[1])
+  })
+
+  it('ArrowRight moves focus to the next cell', () => {
+    const { container } = render(<DigitInput length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[1].focus()
+    fireEvent.keyDown(cells[1], { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(cells[2])
+  })
+
+  it('distributes a pasted string across cells and fires onComplete when filled', () => {
+    const onChange = jest.fn()
+    const onComplete = jest.fn()
+    const { container } = render(
+      <DigitInput length={4} onChange={onChange} onComplete={onComplete} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.paste(cells[0], {
+      clipboardData: { getData: () => '5678' },
+    })
+    expect(onChange).toHaveBeenCalledWith('5678')
+    expect(onComplete).toHaveBeenCalledWith('5678')
+  })
+
+  it('filters non-digit characters out of pasted strings in numeric mode', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.paste(cells[0], {
+      clipboardData: { getData: () => '1a2b3c4d' },
+    })
+    expect(onChange).toHaveBeenCalledWith('1234')
+  })
+
+  it('renders each cell as type="password" when mask is true', () => {
+    const { container } = render(
+      <DigitInput value="12" length={2} mask onChange={() => {}} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells.forEach((cell) => expect(cell.type).toBe('password'))
+  })
+
+  it('disables every cell when disabled prop is set', () => {
+    const { container } = render(<DigitInput length={4} disabled onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells.forEach((cell) => expect(cell).toBeDisabled())
+  })
+
+  it('uncontrolled mode keeps internal state and emits onChange', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: '1' } })
+    fireEvent.change(cells[1], { target: { value: '2' } })
+    expect(onChange).toHaveBeenLastCalledWith('12')
+    expect(cells[0].value).toBe('1')
+    expect(cells[1].value).toBe('2')
+  })
+
+  it('aria-invalid propagates to the group wrapper and to each cell', () => {
+    const { container } = render(
+      <DigitInput length={2} value="12" onChange={() => {}} aria-invalid />,
+    )
+    const wrapper = container.querySelector('[data-slot="digit-input"]')
+    expect(wrapper).toHaveAttribute('aria-invalid', 'true')
+    const cells = container.querySelectorAll('[data-slot="digit-input-cell"]')
+    cells.forEach((cell) => expect(cell).toHaveAttribute('aria-invalid', 'true'))
+  })
+
+  it('uses a provided aria-label for the group and cell labels', () => {
+    render(<DigitInput length={3} aria-label="Two factor code" onChange={() => {}} />)
+    expect(screen.getByRole('group', { name: 'Two factor code' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Two factor code digit 1')).toBeInTheDocument()
+    expect(screen.getByLabelText('Two factor code digit 2')).toBeInTheDocument()
+    expect(screen.getByLabelText('Two factor code digit 3')).toBeInTheDocument()
+  })
+
+  it('forwards id and name only to the first cell', () => {
+    const { container } = render(
+      <DigitInput length={3} id="otp" name="code" onChange={() => {}} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    expect(cells[0].id).toBe('otp')
+    expect(cells[0].name).toBe('code')
+    expect(cells[1].id).toBe('')
+    expect(cells[1].name).toBe('')
+  })
+})