@talelk/newui-organisms 1.0.0 → 2.1.0

package/src/organisms/DetailHeader/DetailHeader.a11y.test.tsx

@@ -0,0 +1,53 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { DetailHeader } from './DetailHeader'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('DetailHeader accessibility', () => {
+  it('has no axe violations for a record header', async () => {
+    const { container } = render(() => (
+      <DetailHeader
+        breadcrumbs={[
+          { label: 'Files', route: '/files' },
+          { label: 'Reports', route: '/files/reports' },
+          { label: 'Q3' },
+        ]}
+        title="Q3 report.pdf"
+        subtitle="1.2 MB · updated 2h ago"
+        status={{ label: 'Shared', theme: 'blue' }}
+        actions={[
+          { label: 'Share', onClick: () => {} },
+          { label: 'Download', onClick: () => {} },
+        ]}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with a lower heading level', async () => {
+    const { container } = render(() => (
+      <DetailHeader
+        title="INV-1042"
+        headingLevel={2}
+        subtitle="Unpaid · due Oct 30"
+        actions={[{ label: 'Edit', onClick: () => {} }]}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/DetailHeader/DetailHeader.browser.test.tsx

@@ -0,0 +1,50 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { DetailHeader } from './DetailHeader'
+
+describe('DetailHeader (browser, real CSS)', () => {
+  it('sets the title in the metric scale above the muted subtitle', () => {
+    const { container } = render(() => (
+      <DetailHeader title="Q3 report.pdf" subtitle="1.2 MB · updated 2h ago" />
+    ))
+    const title = container.querySelector('h1') as HTMLElement
+    const subtitle = container.querySelector('p') as HTMLElement
+    // `text-metric` is 1.75rem — the largest type on a record page.
+    expect(Number.parseFloat(getComputedStyle(title).fontSize)).toBeGreaterThan(
+      24,
+    )
+    expect(Number.parseFloat(getComputedStyle(subtitle).fontSize)).toBeLessThan(
+      Number.parseFloat(getComputedStyle(title).fontSize),
+    )
+  })
+
+  it('keeps the action buttons real, with the primary one painted', () => {
+    const { container } = render(() => (
+      <DetailHeader
+        title="Report"
+        actions={[{ label: 'Share' }, { label: 'Download' }]}
+      />
+    ))
+    const buttons = Array.from(container.querySelectorAll('button'))
+    const primary = buttons.at(-1) as HTMLElement
+    expect(primary.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+    // `variant="solid"` must paint — a transparent primary is an invisible CTA.
+    expect(getComputedStyle(primary).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+  })
+
+  it('draws the status pill as a rounded chip', () => {
+    const { container } = render(() => (
+      <DetailHeader
+        title="Report"
+        status={{ label: 'Shared', theme: 'blue' }}
+      />
+    ))
+    const badge = container.querySelector('[data-slot="badge"]') as HTMLElement
+    const style = getComputedStyle(badge)
+    expect(style.borderRadius).not.toBe('0px')
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(badge.getBoundingClientRect().height).toBeGreaterThan(0)
+  })
+})

package/src/organisms/DetailHeader/DetailHeader.tsx

@@ -1,6 +1,7 @@
 import { Badge, Button, type ButtonTheme } from '@talelk/newui-atoms'
 import { type BreadcrumbItem, Breadcrumbs } from '@talelk/newui-molecules'
 import { For, type JSX, Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 
 export interface DetailAction {
   label: string
@@ -11,6 +12,8 @@ export interface DetailHeaderProps {
   /** The trail above the title. Omitted → no breadcrumbs. */
   breadcrumbs?: BreadcrumbItem[]
   title: JSX.Element
+  /** Semantic level of the title. @default 1 */
+  headingLevel?: 1 | 2 | 3 | 4
   /** Muted line under the title — a record id, an owner, a timestamp. */
   subtitle?: JSX.Element
   /** Status pill beside the title. */
@@ -49,7 +52,12 @@ export function DetailHeader(props: DetailHeaderProps): JSX.Element {
       <div class="flex flex-wrap items-start justify-between gap-card-gap">
         <div class="flex min-w-0 flex-col gap-1">
           <div class="flex min-w-0 items-center gap-control-gap">
-            <h1 class="truncate text-metric text-ink-gray-9">{props.title}</h1>
+            <Dynamic
+              component={`h${props.headingLevel ?? 1}`}
+              class="min-w-0 text-metric text-ink-gray-9 [overflow-wrap:anywhere]"
+            >
+              {props.title}
+            </Dynamic>
             <Show when={props.status}>
               {(status) => (
                 <Badge

package/src/organisms/FilterBar/FilterBar.a11y.test.tsx

@@ -0,0 +1,58 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { FilterBar } from './FilterBar'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('FilterBar accessibility', () => {
+  it('has no axe violations for a fully loaded bar', async () => {
+    const { container } = render(() => (
+      <FilterBar
+        query={{ placeholder: 'Search expenses', value: 'taxi' }}
+        selects={[
+          {
+            label: 'Owner',
+            value: 'me',
+            options: [
+              { label: 'Anyone', value: 'any' },
+              { label: 'Me', value: 'me' },
+            ],
+          },
+        ]}
+        tabs={{
+          label: 'View',
+          value: 'list',
+          options: [
+            { label: 'List', value: 'list' },
+            { label: 'Board', value: 'board' },
+          ],
+        }}
+        chips={[{ label: 'Status: Open', onRemove: () => {} }]}
+        resultCount={24}
+        onClearAll={() => {}}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for a bare bar with only a search box', async () => {
+    const { container } = render(() => (
+      <FilterBar surface="bare" query={{ placeholder: 'Search tickets' }} />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/FilterBar/FilterBar.browser.test.tsx

@@ -0,0 +1,46 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { FilterBar } from './FilterBar'
+
+describe('FilterBar (browser, real CSS)', () => {
+  it('puts the controls on one painted card surface, or none when bare', () => {
+    const card = render(() => <FilterBar query={{ placeholder: 'Search' }} />)
+    const bar = card.container.querySelector(
+      '[data-slot="filter-bar"]',
+    ) as HTMLElement
+    const style = getComputedStyle(bar)
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+    expect(Number.parseFloat(style.borderRadius)).toBeGreaterThan(0)
+    expect(style.paddingTop).not.toBe('0px')
+    card.unmount()
+
+    const bare = render(() => (
+      <FilterBar surface="bare" query={{ placeholder: 'Search' }} />
+    ))
+    const bareBar = bare.container.querySelector(
+      '[data-slot="filter-bar"]',
+    ) as HTMLElement
+    // `bare` is composed into a Section, so it must not paint its own card.
+    expect(getComputedStyle(bareBar).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    expect(getComputedStyle(bareBar).paddingTop).toBe('0px')
+  })
+
+  it('paints the / hint on the search box', () => {
+    const { container } = render(() => (
+      <FilterBar query={{ placeholder: 'Search tickets' }} />
+    ))
+    const hint = container.querySelector('kbd') as HTMLElement
+    expect(hint.getBoundingClientRect().width).toBeGreaterThan(0)
+    expect(getComputedStyle(hint).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('states the result count in tabular figures', () => {
+    const { container } = render(() => <FilterBar resultCount={24} />)
+    const count = container.querySelector(
+      '[data-slot="filter-bar-meta"] span',
+    ) as HTMLElement
+    // `tabular-nums` keeps 24 and 8 aligned as filters change the number.
+    expect(getComputedStyle(count).fontVariantNumeric).toContain('tabular-nums')
+  })
+})

package/src/organisms/FilterBar/FilterBar.test.tsx

@@ -135,6 +135,7 @@ describe('FilterBar', () => {
     render(() => (
       <FilterBar
         tabs={{
+          label: 'View',
           value: 'list',
           onValueChange,
           options: [
@@ -145,7 +146,7 @@ describe('FilterBar', () => {
       />
     ))
 
-    await userEvent.click(screen.getByRole('tab', { name: 'Board' }))
+    await userEvent.click(screen.getByRole('radio', { name: 'Board' }))
     expect(onValueChange).toHaveBeenCalledWith('board')
   })
 })

package/src/organisms/FilterBar/FilterBar.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, TextInput } from '@talelk/newui-atoms'
+import { Button, cn, Icon, TextInput } from '@talelk/newui-atoms'
 import { Select, type SelectOption, TabButtons } from '@talelk/newui-molecules'
 import { For, type JSX, onCleanup, onMount, Show } from 'solid-js'
 
@@ -35,6 +35,8 @@ export interface FilterBarProps {
   selects?: FilterSelect[]
   /** A segmented control on the trailing edge — the view switcher. */
   tabs?: {
+    /** Accessible name for the radiogroup. */
+    label: string
     options: FilterOption[]
     value?: string
     onValueChange?: (value: string) => void
@@ -51,6 +53,8 @@ export interface FilterBarProps {
   resultCount?: number
   /** Anything else on the trailing edge, after the tabs. */
   children?: JSX.Element
+  /** `bare` removes the card surface for a toolbar composed into a Section. */
+  surface?: 'card' | 'bare'
   class?: string
 }
 
@@ -106,6 +110,8 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
     (props.chips?.length ?? 0) +
     (props.selects ?? []).filter((select) => Boolean(select.value)).length +
     (props.query?.value ? 1 : 0)
+  const hasLeading = () =>
+    Boolean(props.query) || (props.selects?.length ?? 0) > 0
   const showClearAll = () => props.onClearAll !== undefined && activeCount() > 0
   const showMetaRow = () =>
     (props.chips?.length ?? 0) > 0 ||
@@ -115,9 +121,16 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
   return (
     <div
       data-slot="filter-bar"
-      class={`flex max-w-full flex-col gap-control-gap rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-control-pad ${props.class ?? ''}`}
+      data-surface={props.surface ?? 'card'}
+      class={cn(
+        'flex max-w-full flex-col gap-control-gap',
+        (props.surface ?? 'card') === 'card'
+          ? 'rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-control-pad'
+          : 'p-0',
+        props.class,
+      )}
     >
-      <div class="grid max-w-full grid-cols-1 items-center gap-control-gap sm:grid-cols-2 xl:flex xl:flex-wrap">
+      <div class="grid max-w-full grid-cols-1 items-center gap-control-gap min-[360px]:grid-cols-2 xl:flex xl:flex-wrap">
         <Show when={props.query}>
           {(query) => (
             <span
@@ -163,10 +176,16 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
           )}
         </For>
 
-        <div class="col-span-full flex min-w-0 max-w-full flex-wrap items-center gap-control-gap sm:justify-end xl:ms-auto">
+        <div
+          class={cn(
+            'col-span-full flex min-w-0 max-w-full flex-wrap items-center gap-control-gap',
+            hasLeading() ? 'sm:justify-end xl:ms-auto' : 'sm:justify-start',
+          )}
+        >
           <Show when={props.tabs}>
             {(tabs) => (
               <TabButtons
+                label={tabs().label}
                 options={tabs().options}
                 value={tabs().value}
                 onValueChange={tabs().onValueChange}
@@ -203,7 +222,7 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
                     <button
                       type="button"
                       aria-label={`Remove filter: ${chip.label}`}
-                      class="grid size-4 place-items-center rounded-full text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring motion-reduce:transition-none"
+                      class="grid size-6 place-items-center rounded-full text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring motion-reduce:transition-none"
                       onClick={() => onRemove()()}
                     >
                       <Icon icon="lucide-x" class="size-3" />

package/src/organisms/KanbanBoard/KanbanBoard.a11y.test.tsx

@@ -0,0 +1,75 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { KanbanBoard, type KanbanColumn } from './KanbanBoard'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+interface Deal {
+  id: string
+  name: string
+}
+
+const deals: Deal[] = [
+  { id: 'D-1', name: 'Globex' },
+  { id: 'D-2', name: 'Stark' },
+  { id: 'D-3', name: 'Wayne' },
+]
+
+function stages(): KanbanColumn<Deal>[] {
+  return [
+    { id: 'open', name: 'Open', theme: 'gray', items: deals },
+    { id: 'won', name: 'Won', theme: 'green', items: [] },
+  ]
+}
+
+const card = (deal: Deal) => <span>{deal.name}</span>
+
+describe('KanbanBoard accessibility', () => {
+  it('has no axe violations for a board with cards and an empty column', async () => {
+    const { container } = render(() => (
+      <KanbanBoard
+        columns={stages()}
+        label="Deals"
+        itemLabel={(deal) => deal.name}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with a column summary, action and empty copy', async () => {
+    const { container } = render(() => (
+      <KanbanBoard
+        label="Deals"
+        columns={[
+          {
+            id: 'open',
+            name: 'Open',
+            items: [],
+            summary: <span>$210,000</span>,
+            action: { label: 'Add deal', onClick: () => {} },
+          },
+        ]}
+        emptyColumn={() => <span>Nothing open.</span>}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/KanbanBoard/KanbanBoard.browser.test.tsx

@@ -0,0 +1,84 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { KanbanBoard, type KanbanColumn } from './KanbanBoard'
+
+interface Deal {
+  id: string
+  name: string
+}
+
+const deals: Deal[] = [
+  { id: 'D-1', name: 'Globex' },
+  { id: 'D-2', name: 'Stark' },
+]
+
+function stages(): KanbanColumn<Deal>[] {
+  return [
+    { id: 'open', name: 'Open', theme: 'gray', items: deals },
+    { id: 'won', name: 'Won', theme: 'green', items: [] },
+  ]
+}
+
+const card = (deal: Deal) => <span>{deal.name}</span>
+
+describe('KanbanBoard (browser, real CSS)', () => {
+  it('reserves a real column width on a tinted, bordered surface', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const column = container.querySelector(
+      '[data-kanban-column="open"]',
+    ) as HTMLElement
+    // `w-72` (288px) below `min-[1440px]` — the board is a panner, columns do
+    // not shrink to fit.
+    const width = column.getBoundingClientRect().width
+    expect(width).toBeGreaterThanOrEqual(256)
+    expect(width).toBeLessThanOrEqual(300)
+    const style = getComputedStyle(column)
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('paints the status dot in the column theme', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const dot = container.querySelector(
+      '[data-kanban-column="open"] span[aria-hidden="true"]',
+    ) as HTMLElement
+    const rect = dot.getBoundingClientRect()
+    expect(rect.width).toBeGreaterThan(0)
+    expect(getComputedStyle(dot).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('gives each card the grab cursor and a real box', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const cardBox = container.querySelector(
+      '[data-kanban-id="D-1"] > [data-slot="card"]',
+    ) as HTMLElement
+    expect(cardBox.getBoundingClientRect().height).toBeGreaterThan(0)
+    expect(getComputedStyle(cardBox).cursor).toBe('grab')
+  })
+
+  it('draws the empty column as a dashed drop hint', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const empty = container.querySelector(
+      '[data-kanban-column="won"] ul li',
+    ) as HTMLElement
+    const style = getComputedStyle(empty)
+    expect(style.borderTopStyle).toBe('dashed')
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+  })
+})