@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/image-picker/ImagePicker.css

@@ -0,0 +1,151 @@
+/* ImagePicker (spec: wave-2/image-picker.md; design direction §2.6, §2.10, §2.11). */
+@layer tympan.components {
+  .ty-image-picker {
+    --ty-image-size: calc(var(--ty-space-9) + var(--ty-space-4));
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ty-space-2);
+  }
+  .ty-image-picker[data-size='md'] {
+    --ty-image-size: var(--ty-space-8);
+  }
+  .ty-image-picker__drop {
+    border-radius: var(--ty-radius-card);
+    outline: none;
+  }
+  .ty-image-picker__drop[data-drop-target] {
+    outline: 2px dashed var(--ty-accent);
+    outline-offset: 4px;
+  }
+  .ty-image-picker__trigger {
+    position: relative;
+    display: inline-flex;
+    inline-size: var(--ty-image-size);
+    block-size: var(--ty-image-size);
+    min-inline-size: var(--ty-control-target);
+    min-block-size: var(--ty-control-target);
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-image-picker[data-shape='rounded'] .ty-image-picker__trigger,
+  .ty-image-picker[data-shape='rounded'] .ty-image-picker__frame {
+    border-radius: var(--ty-radius-card);
+  }
+  .ty-image-picker__trigger[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 3px;
+  }
+  .ty-image-picker__trigger[data-disabled] {
+    cursor: not-allowed;
+  }
+  .ty-image-picker[data-phase='idle'] .ty-image-picker__trigger[data-disabled] {
+    opacity: 0.55;
+  }
+  .ty-image-picker__frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: hidden;
+    border: 1px solid var(--ty-line-strong);
+    border-radius: 50%;
+    background: var(--ty-accent-soft);
+  }
+  .ty-image-picker__image {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  .ty-image-picker__initials {
+    color: var(--ty-on-accent-soft);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-h2);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  /* Upload badge: shows on hover and focus; always visible on touch. */
+  .ty-image-picker__badge {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ty-space-6);
+    block-size: var(--ty-space-6);
+    border: 1px solid var(--ty-line);
+    border-radius: 50%;
+    background: var(--ty-surface-raised-solid);
+    color: var(--ty-ink-2);
+    box-shadow: var(--ty-shadow-raised);
+    opacity: 0;
+    transition: opacity var(--ty-dur-instant) var(--ty-ease);
+  }
+  .ty-image-picker__trigger[data-hovered] .ty-image-picker__badge,
+  .ty-image-picker__trigger[data-focus-visible] .ty-image-picker__badge,
+  .ty-image-picker[data-phase='busy'] .ty-image-picker__badge,
+  .ty-image-picker[data-phase='done'] .ty-image-picker__badge {
+    opacity: 1;
+  }
+  .ty-image-picker__badge .ty-icon {
+    inline-size: 16px;
+    block-size: 16px;
+  }
+  .ty-image-picker__spin {
+    animation: ty-image-picker-spin 900ms linear infinite;
+  }
+  @keyframes ty-image-picker-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+  .ty-image-picker__hint,
+  .ty-image-picker__status {
+    margin: 0;
+    max-inline-size: 36ch;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-image-picker__status:empty {
+    display: none;
+  }
+  .ty-image-picker__status[data-tone='error'] {
+    color: var(--ty-danger);
+  }
+  .ty-image-picker__status[data-tone='done'] {
+    color: var(--ty-success);
+  }
+
+  @media (pointer: coarse) {
+    .ty-image-picker__badge {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-image-picker__spin {
+      animation: none;
+    }
+    .ty-image-picker__badge {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-image-picker__frame {
+      border: 1px solid CanvasText;
+    }
+    .ty-image-picker__trigger[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+    .ty-image-picker__badge {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/src/components/image-picker/ImagePicker.test.tsx

@@ -0,0 +1,133 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { ImagePicker } from './ImagePicker'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const MIB = 1024 * 1024
+const file = (name: string, type: string, bytes = 1024) => {
+  const f = new File(['x'], name, { type })
+  Object.defineProperty(f, 'size', { value: bytes })
+  return f
+}
+const input = (container: HTMLElement) => container.querySelector('input[type="file"]') as HTMLInputElement
+
+describe('ImagePicker', () => {
+  it('opens the native chooser from the trigger', async () => {
+    const { container } = render(<ImagePicker fallbackText="GB" upload={vi.fn()} />)
+    const click = vi.spyOn(input(container), 'click')
+    await userEvent.click(screen.getByRole('button', { name: 'Change picture' }))
+    expect(click).toHaveBeenCalledTimes(1)
+  })
+
+  it('rejects a disallowed type without uploading', async () => {
+    const upload = vi.fn()
+    const { container } = render(<ImagePicker upload={upload} />)
+    await userEvent.upload(input(container), file('a.gif', 'image/gif'), { applyAccept: false })
+    expect(screen.getByRole('status')).toHaveTextContent(/not accepted/)
+    expect(upload).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Change picture' })).toHaveAccessibleDescription(/not accepted/)
+  })
+
+  it('rejects a file above the limit', async () => {
+    const upload = vi.fn()
+    const { container } = render(<ImagePicker upload={upload} maxBytes={5 * MIB} />)
+    await userEvent.upload(input(container), file('big.png', 'image/png', 6 * MIB))
+    expect(screen.getByRole('status')).toHaveTextContent(/larger than 5 MB/)
+    expect(upload).not.toHaveBeenCalled()
+  })
+
+  it('uploads a valid file, reports the key once and keeps the new preview', async () => {
+    const onUploaded = vi.fn()
+    const created = vi.fn(() => 'blob:preview')
+    Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: created })
+    Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: vi.fn() })
+    const { container } = render(<ImagePicker upload={async () => ({ ok: true, key: 'k1' })} onUploaded={onUploaded} />)
+    await userEvent.upload(input(container), file('me.png', 'image/png'))
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Picture updated'))
+    expect(onUploaded).toHaveBeenCalledTimes(1)
+    expect(onUploaded).toHaveBeenCalledWith('k1')
+    expect(container.querySelector('img')).toHaveAttribute('src', 'blob:preview')
+  })
+
+  it('shows the host error and reverts the preview when the upload is refused', async () => {
+    Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: () => 'blob:new' })
+    const { container } = render(<ImagePicker value="/old.png" upload={async () => ({ ok: false, error: 'Quota reached' })} />)
+    await userEvent.upload(input(container), file('me.png', 'image/png'))
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Quota reached'))
+    expect(container.querySelector('img')).toHaveAttribute('src', '/old.png')
+  })
+
+  it('shows the thrown message', async () => {
+    const { container } = render(
+      <ImagePicker
+        upload={async () => {
+          throw new Error('Network down')
+        }}
+      />,
+    )
+    await userEvent.upload(input(container), file('me.png', 'image/png'))
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Network down'))
+  })
+
+  it('is busy and disabled while uploading', async () => {
+    let finish: (r: { ok: boolean }) => void = () => {}
+    const { container } = render(<ImagePicker upload={() => new Promise((r) => (finish = r))} />)
+    await userEvent.upload(input(container), file('me.png', 'image/png'))
+    const trigger = screen.getByRole('button', { name: 'Change picture' })
+    expect(trigger).toHaveAttribute('aria-busy', 'true')
+    expect(trigger).toBeDisabled()
+    finish({ ok: true })
+    await waitFor(() => expect(trigger).not.toHaveAttribute('aria-busy'))
+  })
+
+  it('is exposed as disabled', () => {
+    render(<ImagePicker upload={vi.fn()} disabled />)
+    expect(screen.getByRole('button', { name: 'Change picture' })).toBeDisabled()
+  })
+
+  it('validates the same file chosen twice in a row', async () => {
+    const upload = vi.fn()
+    const { container } = render(<ImagePicker upload={upload} />)
+    const gif = file('a.gif', 'image/gif')
+    await userEvent.upload(input(container), gif, { applyAccept: false })
+    expect(input(container).value).toBe('')
+    await userEvent.upload(input(container), gif, { applyAccept: false })
+    expect(screen.getByRole('status')).toHaveTextContent(/not accepted/)
+    expect(upload).not.toHaveBeenCalled()
+  })
+
+  it('stops the spinner under reduced motion and shows the badge on touch', () => {
+    const css = cssOf('components/image-picker/ImagePicker.css')
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/animation:\s*none/)
+    expect(mediaBlock(css, /\(pointer:\s*coarse\)/)).toMatch(/opacity:\s*1/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <ImagePicker fallbackText="GB" label={`Picture ${scheme}`} upload={vi.fn()} hint="JPEG, PNG or WebP up to 5 MiB." />
+            <ImagePicker shape="rounded" size="md" value="/logo.png" label={`Logo ${scheme}`} upload={vi.fn()} droppable />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('ImagePicker in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<ImagePicker fallbackText="نم" label="تغيير الصورة" upload={vi.fn()} />)
+    expect(rtlDom.screen.getByRole('button', { name: /تغيير الصورة/ })).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})

package/src/components/image-picker/ImagePicker.tsx

@@ -0,0 +1,167 @@
+import { Camera, Check, LoaderCircle } from 'lucide-react'
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import { Button as AriaButton, DropZone, useLocale, type DropZoneProps } from 'react-aria-components'
+
+type DropEvent = Parameters<NonNullable<DropZoneProps['onDrop']>>[0]
+import { cx } from '../../internal/cx'
+import { useDomAttributes } from '../../internal/dom'
+import { useMessages } from '../../internal/provider'
+
+export interface UploadResult {
+  ok: boolean
+  key?: string
+  error?: string
+}
+
+export interface ImagePickerProps {
+  value?: string | null
+  fallbackText?: string
+  label?: string
+  shape?: 'circle' | 'rounded'
+  size?: 'md' | 'lg'
+  accept?: string[]
+  maxBytes?: number
+  upload: (file: File) => Promise<UploadResult>
+  onUploaded?: (key: string) => void
+  hint?: ReactNode
+  messages?: Partial<{ wrongType: string; tooLarge: string; failed: string }>
+  /** Also accept a dropped file (the button path always exists). */
+  droppable?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+export const DEFAULT_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+const MIB = 1024 * 1024
+
+type Phase = { kind: 'idle' } | { kind: 'busy' } | { kind: 'done' } | { kind: 'error'; text: string }
+
+/** Size limit in the locale's unit wording and digits (binary multiples, shown with the SI unit names Intl knows). */
+function sizeText(bytes: number, locale: string): string {
+  const whole = bytes % MIB === 0
+  return new Intl.NumberFormat(locale, { style: 'unit', unit: whole ? 'megabyte' : 'kilobyte', unitDisplay: 'short', maximumFractionDigits: 0 }).format(
+    whole ? bytes / MIB : Math.round(bytes / 1024),
+  )
+}
+
+function previewOf(file: File): string | null {
+  try {
+    return typeof URL.createObjectURL === 'function' ? URL.createObjectURL(file) : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Picture chooser with local checks, instant preview and host upload
+ * (spec: wave-2/image-picker.md).
+ */
+export function ImagePicker(props: ImagePickerProps) {
+  const m = useMessages().imagePicker
+  const { locale } = useLocale()
+  const accept = props.accept ?? DEFAULT_IMAGE_TYPES
+  const maxBytes = props.maxBytes ?? 5 * MIB
+  const fileRef = useRef<HTMLInputElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const [phase, setPhase] = useState<Phase>({ kind: 'idle' })
+  const [preview, setPreview] = useState<string | null>(null)
+  const base = useId()
+  const hintId = props.hint != null ? `${base}-hint` : undefined
+  const statusId = `${base}-status`
+  const busy = phase.kind === 'busy'
+  const shown = preview ?? props.value ?? null
+
+  useEffect(() => () => {
+    if (preview?.startsWith('blob:')) URL.revokeObjectURL?.(preview)
+  }, [preview])
+
+  useDomAttributes(triggerRef, { 'aria-busy': busy ? 'true' : undefined })
+
+  const reject = (text: string) => setPhase({ kind: 'error', text })
+
+  const take = async (file: File) => {
+    if (!accept.includes(file.type)) return reject(props.messages?.wrongType ?? m.wrongType)
+    if (file.size > maxBytes) return reject(props.messages?.tooLarge ?? m.tooLarge(sizeText(maxBytes, locale)))
+    const before = preview
+    setPreview(previewOf(file))
+    setPhase({ kind: 'busy' })
+    try {
+      const result = await props.upload(file)
+      if (result.ok) {
+        setPhase({ kind: 'done' })
+        if (result.key != null) props.onUploaded?.(result.key)
+      } else {
+        setPreview(before)
+        reject(result.error || (props.messages?.failed ?? m.failed))
+      }
+    } catch (err) {
+      setPreview(before)
+      reject((err instanceof Error && err.message) || (props.messages?.failed ?? m.failed))
+    }
+  }
+
+  const statusText = phase.kind === 'error' ? phase.text : phase.kind === 'busy' ? m.uploading : phase.kind === 'done' ? m.updated : ''
+  const describedBy = [hintId, phase.kind === 'error' ? statusId : undefined].filter(Boolean).join(' ') || undefined
+
+  const trigger = (
+    <AriaButton
+      ref={triggerRef}
+      className="ty-image-picker__trigger"
+      aria-label={props.label ?? m.change}
+      aria-describedby={describedBy}
+      isDisabled={props.disabled || busy}
+      onPress={() => fileRef.current?.click()}
+    >
+      <span className="ty-image-picker__frame" aria-hidden="true">
+        {shown ? <img className="ty-image-picker__image" src={shown} alt="" /> : <span className="ty-image-picker__initials">{props.fallbackText}</span>}
+      </span>
+      <span className="ty-image-picker__badge" aria-hidden="true">
+        {busy ? <LoaderCircle className="ty-icon ty-image-picker__spin" /> : phase.kind === 'done' ? <Check className="ty-icon" /> : <Camera className="ty-icon" />}
+      </span>
+    </AriaButton>
+  )
+
+  const onDrop = async (e: DropEvent) => {
+    if (props.disabled || busy) return
+    for (const item of e.items) {
+      if (item.kind === 'file') {
+        await take(await item.getFile())
+        return
+      }
+    }
+  }
+
+  return (
+    <div className={cx('ty-image-picker', props.className)} data-shape={props.shape ?? 'circle'} data-size={props.size ?? 'lg'} data-phase={phase.kind}>
+      {props.droppable ? (
+        <DropZone className="ty-image-picker__drop" onDrop={onDrop} isDisabled={props.disabled} aria-label={props.label ?? m.change}>
+          {trigger}
+        </DropZone>
+      ) : (
+        trigger
+      )}
+      <input
+        ref={fileRef}
+        type="file"
+        className="ty-visually-hidden"
+        accept={accept.join(',')}
+        tabIndex={-1}
+        aria-hidden="true"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          // Reset so choosing the same file again still fires a change.
+          e.target.value = ''
+          if (file) void take(file)
+        }}
+      />
+      {props.hint != null ? (
+        <p id={hintId} className="ty-image-picker__hint">
+          {props.hint}
+        </p>
+      ) : null}
+      <p id={statusId} className="ty-image-picker__status" role="status" data-tone={phase.kind}>
+        {statusText}
+      </p>
+    </div>
+  )
+}

package/src/components/inline-notice/InlineNotice.css

@@ -0,0 +1,101 @@
+/* InlineNotice (spec: wave-1/inline-notice.md; design direction §2.2, §2.3). */
+@layer tympan.components {
+  .ty-notice {
+    --ty-notice-ink: var(--ty-info);
+    --ty-notice-fill: var(--ty-info-soft);
+    --ty-notice-text: var(--ty-on-info-soft);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ty-space-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: var(--ty-space-3) var(--ty-space-4);
+    border: 1px solid color-mix(in srgb, var(--ty-notice-ink) 35%, transparent);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-notice-fill);
+    color: var(--ty-notice-text);
+  }
+  .ty-notice[data-tone='danger'] {
+    --ty-notice-ink: var(--ty-danger);
+    --ty-notice-fill: var(--ty-danger-soft);
+    --ty-notice-text: var(--ty-on-danger-soft);
+  }
+  .ty-notice[data-tone='warning'] {
+    --ty-notice-ink: var(--ty-warning);
+    --ty-notice-fill: var(--ty-warning-soft);
+    --ty-notice-text: var(--ty-on-warning-soft);
+  }
+  .ty-notice[data-tone='success'] {
+    --ty-notice-ink: var(--ty-success);
+    --ty-notice-fill: var(--ty-success-soft);
+    --ty-notice-text: var(--ty-on-success-soft);
+  }
+  .ty-notice[data-align='centre'] {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .ty-notice__icon {
+    display: inline-flex;
+    flex: none;
+    padding-block-start: 2px;
+    color: var(--ty-notice-ink);
+  }
+  .ty-notice__icon > svg {
+    inline-size: 1.15em;
+    block-size: 1.15em;
+  }
+
+  .ty-notice__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+    max-inline-size: calc(var(--ty-measure-prose) * 1ch);
+  }
+  .ty-notice__title {
+    margin: 0;
+    color: inherit;
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-body);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-body);
+  }
+  .ty-notice__message {
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+  }
+  .ty-notice__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-2);
+    margin-block-start: var(--ty-space-1);
+  }
+  .ty-notice__dismiss {
+    flex: none;
+    margin-block: calc(var(--ty-space-1) * -1);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-notice {
+      background: color-mix(in srgb, var(--ty-notice-ink) 10%, var(--ty-surface-solid));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-notice {
+      animation: none;
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-notice {
+      border: 1px solid CanvasText;
+    }
+    .ty-notice__icon {
+      color: CanvasText;
+    }
+  }
+}

package/src/components/inline-notice/InlineNotice.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { InlineNotice } from './InlineNotice'
+
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+describe('InlineNotice', () => {
+  it('danger after a failed submit is an alert with the message', () => {
+    render(<InlineNotice tone="danger">The form has 2 errors.</InlineNotice>)
+    expect(screen.getByRole('alert')).toHaveTextContent('The form has 2 errors.')
+  })
+
+  it('success is a status', () => {
+    render(<InlineNotice tone="success">Saved.</InlineNotice>)
+    expect(screen.getByRole('status')).toHaveTextContent('Saved.')
+  })
+
+  it('urgency none sets no live role', () => {
+    render(
+      <InlineNotice tone="danger" urgency="none">
+        Old error
+      </InlineNotice>,
+    )
+    expect(screen.queryByRole('alert')).toBeNull()
+    expect(screen.queryByRole('status')).toBeNull()
+  })
+
+  it('title precedes the message and is not a heading by default', () => {
+    const { container } = render(
+      <InlineNotice title="Draft" urgency="none">
+        Not yet published.
+      </InlineNotice>,
+    )
+    const title = container.querySelector('.ty-notice__title')!
+    const message = container.querySelector('.ty-notice__message')!
+    expect(title.compareDocumentPosition(message) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(screen.queryByRole('heading')).toBeNull()
+  })
+
+  it('title can be configured as a heading', () => {
+    render(
+      <InlineNotice title="Draft" titleAs="h3">
+        x
+      </InlineNotice>,
+    )
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Draft')
+  })
+
+  it('dismiss fires onDismiss and focus moves to the next element', async () => {
+    const onDismiss = vi.fn()
+    function Host() {
+      const [open, setOpen] = useState(true)
+      return (
+        <>
+          {open ? (
+            <InlineNotice
+              dismissible
+              onDismiss={() => {
+                onDismiss()
+                setOpen(false)
+              }}
+            >
+              Hello
+            </InlineNotice>
+          ) : null}
+          <button type="button">Next field</button>
+        </>
+      )
+    }
+    render(<Host />)
+    await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+    await vi.waitFor(() => expect(screen.getByRole('button', { name: 'Next field' })).toHaveFocus())
+  })
+
+  it.each([
+    ['warning', 'Warning:'],
+    ['danger', 'Error:'],
+    ['info', 'Information:'],
+    ['success', 'Success:'],
+  ] as const)('announces the tone word for %s before the message', (tone, word) => {
+    const { container } = render(
+      <InlineNotice tone={tone} urgency="none">
+        Message
+      </InlineNotice>,
+    )
+    expect(container.querySelector('.ty-notice')?.textContent?.startsWith(word)).toBe(true)
+  })
+
+  it('keeps boundary and icon visible in forced colours', () => {
+    const forced = mediaBlock(cssOf('components/inline-notice/InlineNotice.css'), /\(forced-colors:\s*active\)/)
+    expect(forced).toMatch(/\.ty-notice\s*\{[^}]*border:\s*1px solid CanvasText/)
+    expect(forced).toMatch(/\.ty-notice__icon\s*\{[^}]*CanvasText/)
+  })
+
+  it('has no axe violations', async () => {
+    const { container } = render(
+      <>
+        <InlineNotice tone="danger" title="Could not save" dismissible>
+          Try again.
+        </InlineNotice>
+        <InlineNotice tone="info" urgency="none" actions={<a href="/help">Help</a>}>
+          Info
+        </InlineNotice>
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('InlineNotice in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<InlineNotice tone="warning" urgency="none">لم يتم فتح مصدرين.</InlineNotice>)
+    expect(rtlDom.screen.getByText('لم يتم فتح مصدرين.')).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})