@talelk/newui-organisms 2.0.0 → 2.1.0

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

@@ -0,0 +1,49 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { MobileNav, MobileNavItem } from './MobileNav'
+
+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('MobileNav accessibility', () => {
+  it('has no axe violations for a tab bar of links and buttons', async () => {
+    const { container } = render(() => (
+      <MobileNav aria-label="Primary">
+        <MobileNavItem
+          label="Home"
+          icon="lucide-house"
+          active
+          aria-current="page"
+        />
+        <MobileNavItem label="Search" icon="lucide-search" route="/search" />
+        <MobileNavItem label="You" icon="lucide-user-round" />
+      </MobileNav>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with custom content in place of an icon', async () => {
+    const { container } = render(() => (
+      <MobileNav aria-label="Primary">
+        <MobileNavItem label="Home" active>
+          <span>AC</span>
+        </MobileNavItem>
+        <MobileNavItem label="More" icon="lucide-ellipsis" />
+      </MobileNav>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,49 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+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('Section accessibility', () => {
+  it('has no axe violations for the full region anatomy', async () => {
+    const { container } = render(() => (
+      <Section
+        id="expenses"
+        title="Pending expenses"
+        description="Waiting for approval"
+        actions={<button type="button">Export</button>}
+        toolbar={<div>Filters</div>}
+        footer={<span>18 records</span>}
+      >
+        <ul>
+          <li>Taxi to client</li>
+          <li>Team lunch</li>
+        </ul>
+      </Section>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations when named by label alone', async () => {
+    const { container } = render(() => (
+      <Section label="Recent activity" headingLevel={3} surface="card">
+        <p>Nothing today.</p>
+      </Section>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,63 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+describe('Section (browser, real CSS)', () => {
+  it('sits the footer under a real rule', () => {
+    const { container } = render(() => (
+      <Section title="Ledger" footer={<span>18 records</span>}>
+        <div>Body</div>
+      </Section>
+    ))
+    const footer = Array.from(container.querySelectorAll('div')).find(
+      (node) => node.textContent === '18 records',
+    ) as HTMLElement
+    const style = getComputedStyle(footer)
+    // "Pagination, totals or selection feedback, under a rule" — the rule is
+    // the contract; losing it strands the footer in the body.
+    expect(style.borderTopStyle).toBe('solid')
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+    expect(Number.parseFloat(style.paddingTop)).toBeGreaterThan(0)
+  })
+
+  it('paints the card surface and leaves the plain one bare', () => {
+    const card = render(() => (
+      <Section surface="card" title="Ledger">
+        <div>Body</div>
+      </Section>
+    ))
+    const cardBox = card.container.querySelector(
+      '[data-slot="section"]',
+    ) as HTMLElement
+    const cardStyle = getComputedStyle(cardBox)
+    expect(cardStyle.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(Number.parseFloat(cardStyle.borderRadius)).toBeGreaterThan(0)
+    expect(Number.parseFloat(cardStyle.paddingTop)).toBeGreaterThan(0)
+    card.unmount()
+
+    const plain = render(() => (
+      <Section title="Ledger">
+        <div>Body</div>
+      </Section>
+    ))
+    const plainBox = plain.container.querySelector(
+      '[data-slot="section"]',
+    ) as HTMLElement
+    expect(getComputedStyle(plainBox).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    expect(getComputedStyle(plainBox).paddingTop).toBe('0px')
+  })
+
+  it('renders the heading in its type scale', () => {
+    const { container } = render(() => (
+      <Section title="Pending expenses">
+        <div>Body</div>
+      </Section>
+    ))
+    const heading = container.querySelector('h2') as HTMLElement
+    // `text-section` — a dropped scale utility drops the heading into body text.
+    expect(
+      Number.parseFloat(getComputedStyle(heading).fontSize),
+    ).toBeGreaterThan(16)
+    expect(heading.getBoundingClientRect().height).toBeGreaterThan(0)
+  })
+})

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

@@ -0,0 +1,48 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+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('SelectionBar accessibility', () => {
+  it('has no axe violations with a primary action and clear', async () => {
+    const { container } = render(() => (
+      <SelectionBar
+        count={3}
+        summary="$14,650"
+        primary={{ label: 'Approve expenses', onClick: () => {} }}
+        onClear={() => {}}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with a secondary control and no summary', async () => {
+    const { container } = render(() => (
+      <SelectionBar
+        count={12}
+        primary={{
+          label: 'Archive',
+          onClick: () => {},
+          disabled: true,
+        }}
+        secondary={<button type="button">Merge</button>}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,57 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+describe('SelectionBar (browser, real CSS)', () => {
+  it('paints a raised card over the data', () => {
+    const { container } = render(() => <SelectionBar count={3} />)
+    const bar = container.querySelector(
+      '[data-slot="selection-bar"]',
+    ) as HTMLElement
+    const style = getComputedStyle(bar)
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    // `shadow-sm` is what lifts it off the table it covers.
+    expect(style.boxShadow).not.toBe('none')
+    expect(Number.parseFloat(style.borderRadius)).toBeGreaterThan(0)
+    expect(bar.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+  })
+
+  it('sets the count in the medium interface weight', () => {
+    const { container } = render(() => (
+      <SelectionBar count={3} summary="$14,650" />
+    ))
+    const count = Array.from(container.querySelectorAll('span')).find(
+      (node) => node.textContent === '3 selected',
+    ) as HTMLElement
+    expect(
+      Number.parseInt(getComputedStyle(count).fontWeight, 10),
+    ).toBeGreaterThanOrEqual(500)
+    // The summary is a quieter line: it must not match the count's colour.
+    const summary = Array.from(container.querySelectorAll('span')).find(
+      (node) => node.textContent === '$14,650',
+    ) as HTMLElement
+    expect(getComputedStyle(summary).color).not.toBe(
+      getComputedStyle(count).color,
+    )
+  })
+
+  it('pins a sticky bar above the bottom edge on the harness phone viewport', () => {
+    // This project renders at 414px — below the `sm` breakpoint, which is
+    // exactly where `placement="sticky"` becomes `max-sm:fixed`.
+    const { container } = render(() => (
+      <SelectionBar count={3} placement="sticky" />
+    ))
+    const bar = container.querySelector(
+      '[data-slot="selection-bar"]',
+    ) as HTMLElement
+    expect(getComputedStyle(bar).position).toBe('fixed')
+    expect(Number.parseFloat(getComputedStyle(bar).bottom)).toBeGreaterThan(0)
+
+    // The inline default stays in flow at the same width.
+    const inline = render(() => <SelectionBar count={3} />)
+    const inlineBar = inline.container.querySelector(
+      '[data-slot="selection-bar"]',
+    ) as HTMLElement
+    expect(getComputedStyle(inlineBar).position).not.toBe('fixed')
+  })
+})

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

@@ -0,0 +1,71 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import {
+  Sidebar,
+  SidebarCard,
+  SidebarHeader,
+  SidebarItem,
+  SidebarSearch,
+  SidebarSection,
+  SidebarTrigger,
+} from './Sidebar'
+
+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('Sidebar accessibility', () => {
+  it('has no axe violations for an expanded workspace sidebar', async () => {
+    const { container } = render(() => (
+      <Sidebar ariaLabel="Main">
+        <SidebarHeader title="Acme" subtitle="Production" />
+        <SidebarTrigger />
+        <SidebarSearch placeholder="Filter pages" />
+        <SidebarItem route="/inbox" icon="lucide-inbox" active>
+          Inbox
+        </SidebarItem>
+        <SidebarItem route="/drafts" icon="lucide-file-pen">
+          Drafts
+        </SidebarItem>
+        <SidebarSection label="Projects" collapsible>
+          <SidebarItem route="/website">Website</SidebarItem>
+          <SidebarItem route="/app">App</SidebarItem>
+        </SidebarSection>
+        <SidebarCard
+          title="Trial ends soon"
+          description="Upgrade to keep your workspace."
+          dismissible
+          action={{ label: 'Upgrade' }}
+        />
+      </Sidebar>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for the collapsed rail of named icons', async () => {
+    const { container } = render(() => (
+      <Sidebar collapsed ariaLabel="Main">
+        <SidebarHeader title="Acme" logo="https://example.com/logo.png" />
+        <SidebarItem label="Inbox" route="/inbox" icon="lucide-inbox" active>
+          Inbox
+        </SidebarItem>
+        <SidebarItem label="Drafts" route="/drafts" icon="lucide-file-pen">
+          Drafts
+        </SidebarItem>
+      </Sidebar>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,109 @@
+import { render, screen } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { VirtualList } from './VirtualList'
+
+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),
+  }))
+}
+
+const ROWS = Array.from({ length: 1000 }, (_, index) => ({
+  id: `ROW-${index + 1}`,
+  title: `Row ${index + 1}`,
+}))
+
+interface Row {
+  id: string
+  title: string
+}
+
+const EMPTY: Row[] = []
+
+/**
+ * jsdom has no layout, so the viewport reports a zero rect and the virtualiser
+ * renders nothing. The tests give every element a 440px box, which is the only
+ * measurement the list needs.
+ */
+class MeasuredObserver {
+  constructor(private readonly callback: ResizeObserverCallback) {}
+  observe(target: Element) {
+    const rect = target.getBoundingClientRect()
+    this.callback(
+      [
+        {
+          target,
+          contentRect: rect,
+          borderBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],
+          contentBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],
+        } as unknown as ResizeObserverEntry,
+      ],
+      this as unknown as ResizeObserver,
+    )
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+function withLayout() {
+  const rect = {
+    width: 600,
+    height: 440,
+    top: 0,
+    left: 0,
+    right: 600,
+    bottom: 440,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect
+  const spy = vi
+    .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+    .mockReturnValue(rect)
+  // The jsdom shim observes nothing; the virtualiser needs one measurement.
+  vi.stubGlobal('ResizeObserver', MeasuredObserver)
+  return spy
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  vi.restoreAllMocks()
+})
+
+describe('VirtualList accessibility', () => {
+  it('has no axe violations for a virtualised list of rows', async () => {
+    withLayout()
+    const { container } = render(() => (
+      <VirtualList label="Rows" items={ROWS} itemSize={72} height="440px">
+        {(row) => <span>{row.title}</span>}
+      </VirtualList>
+    ))
+    expect(screen.getAllByRole('listitem').length).toBeGreaterThan(0)
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for the empty state', async () => {
+    const { container } = render(() => (
+      <VirtualList
+        label="Rows"
+        items={EMPTY}
+        itemSize={72}
+        emptyTitle="No rows yet"
+        emptyDescription="Create the first one."
+      >
+        {(row) => <span>{row.title}</span>}
+      </VirtualList>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})