@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/components/loader-presets/LoaderPresets.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { createLoaderPresets, loaderToneColour, loaderToneNames, type LoaderTone } from './LoaderPresets'
+
+describe('LoaderPresets', () => {
+  it('always holds the default preset', () => {
+    expect(createLoaderPresets([]).ids()).toEqual(['default'])
+    expect(createLoaderPresets([]).resolve('default')?.tone).toBe('accent')
+  })
+
+  it('throws a descriptive error for duplicate ids', () => {
+    const p = { id: 'x', mark: null, tone: 'accent' as const }
+    expect(() => createLoaderPresets([p, p])).toThrow(/"x" is used twice/)
+  })
+
+  it('throws for a tone that is not a tone name', () => {
+    expect(() => createLoaderPresets([{ id: 'x', mark: null, tone: 'violet' as LoaderTone }])).toThrow(/not a tone name/)
+  })
+
+  it('maps every tone to a token reference, never a literal colour', () => {
+    for (const tone of loaderToneNames) expect(loaderToneColour(tone)).toMatch(/^var\(--ty-[\w-]+\)$/)
+  })
+})

package/src/components/loader-presets/LoaderPresets.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import { devWarning } from '../../internal/dev'
+import { BrandMark } from '../brand-mark/BrandMark'
+
+/**
+ * Tone names accepted by presets: the closed set of wave-4/tone-tint-resolver
+ * (accent, the four semantic tones, categorical-1…8).
+ */
+export const loaderToneNames = [
+  'accent',
+  'success',
+  'pending',
+  'error',
+  'neutral',
+  ...Array.from({ length: 8 }, (_, i) => `categorical-${i + 1}` as const),
+] as const
+export type LoaderTone = (typeof loaderToneNames)[number]
+
+/** Custom property holding the tone colour, read by the BrandLoader stylesheet. */
+export function loaderToneColour(tone: LoaderTone): string {
+  if (tone.startsWith('categorical-')) return `var(--ty-${tone})`
+  const semantic: Record<string, string> = {
+    accent: 'var(--ty-accent)',
+    success: 'var(--ty-success)',
+    pending: 'var(--ty-warning)',
+    error: 'var(--ty-danger)',
+    neutral: 'var(--ty-ink-3)',
+  }
+  return semantic[tone] ?? semantic.accent!
+}
+
+export interface LoaderPreset {
+  id: string
+  /** Product name shown under the mark; the brand name when omitted. */
+  name?: string
+  mark: ReactNode
+  tone: LoaderTone
+  /** Default loading phrase (already translated by the host). */
+  label?: string
+}
+
+export interface LoaderPresetRegistry {
+  resolve(id: string): LoaderPreset | undefined
+  ids(): string[]
+}
+
+/** The only preset shipped: the product mark and the accent tone. */
+export const defaultLoaderPreset: LoaderPreset = Object.freeze({
+  id: 'default',
+  mark: <BrandMark showWordmark={false} size="large" />,
+  tone: 'accent',
+})
+
+const isTone = (value: unknown): value is LoaderTone => (loaderToneNames as readonly unknown[]).includes(value)
+
+/** Validates presets (unique ids, known tones) and returns a registry that always holds `default`. */
+export function createLoaderPresets(presets: readonly LoaderPreset[]): LoaderPresetRegistry {
+  const byId: Record<string, LoaderPreset> = Object.create(null)
+  for (const p of presets) {
+    if (p.id in byId) throw new Error(`createLoaderPresets: preset id "${p.id}" is used twice.`)
+    if (!isTone(p.tone)) throw new Error(`createLoaderPresets: preset "${p.id}" has tone "${String(p.tone)}", which is not a tone name (${loaderToneNames.join(', ')}).`)
+    byId[p.id] = p
+  }
+  if (!('default' in byId)) byId.default = defaultLoaderPreset
+  return { resolve: (id) => byId[id], ids: () => Object.keys(byId) }
+}
+
+const RegistryContext = createContext<LoaderPresetRegistry | null>(null)
+
+export function LoaderPresetProvider({ registry, children }: { registry: LoaderPresetRegistry; children: ReactNode }) {
+  return <RegistryContext.Provider value={registry}>{children}</RegistryContext.Provider>
+}
+
+/** Resolves a preset id; unknown ids fall back to `default` (with a development warning). */
+export function useLoaderPreset(id = 'default'): LoaderPreset {
+  const registry = useContext(RegistryContext)
+  const found = registry ? registry.resolve(id) : id === 'default' ? defaultLoaderPreset : undefined
+  devWarning(!found, `useLoaderPreset: no preset "${id}"; using "default".`)
+  return found ?? registry?.resolve('default') ?? defaultLoaderPreset
+}

package/src/components/locale-picker/LocalePicker.css

@@ -0,0 +1,91 @@
+/* LocalePicker (spec: wave-2/locale-picker.md; design direction §2.3, §2.6, §2.10).
+   Surfaces come from Drawer and ModalDialog; this styles the list. */
+@layer tympan.components {
+  .ty-locale-picker {
+    display: inline-flex;
+  }
+  .ty-locale-picker__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+  }
+  .ty-locale-picker__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    outline: none;
+  }
+  .ty-locale-picker__list[data-layout='grid'] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .ty-locale-picker__option {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-3);
+    min-block-size: var(--ty-control-target);
+    padding-inline: var(--ty-space-3);
+    border: 1px solid transparent;
+    border-radius: var(--ty-radius-control);
+    color: var(--ty-ink-2);
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-locale-picker__option[data-hovered] {
+    background: var(--ty-surface-sunken);
+  }
+  .ty-locale-picker__option[data-selected] {
+    border-color: var(--ty-accent);
+    background: var(--ty-accent-soft);
+    color: var(--ty-on-accent-soft);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-locale-picker__option[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+  .ty-locale-picker__flag {
+    flex: none;
+    font-size: var(--ty-font-size-body-lg);
+  }
+  .ty-locale-picker__name {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .ty-locale-picker__code {
+    color: var(--ty-ink-3);
+    font-family: var(--ty-font-mono);
+    font-size: var(--ty-font-size-meta);
+  }
+  .ty-locale-picker__check {
+    inline-size: 16px;
+    block-size: 16px;
+    visibility: hidden;
+  }
+  .ty-locale-picker__check[data-shown] {
+    visibility: visible;
+  }
+  .ty-locale-picker__footer {
+    margin: 0;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+
+  @media (min-width: 640px) {
+    .ty-locale-picker__list[data-layout='grid'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-locale-picker__option[data-selected] {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .ty-locale-picker__option[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+  }
+}

package/src/components/locale-picker/LocalePicker.test.tsx

@@ -0,0 +1,99 @@
+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 { LocalePicker, type LocaleEntry } from './LocalePicker'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const locales: LocaleEntry[] = [
+  { code: 'pt-BR', nativeName: 'Português', shortCode: 'PT' },
+  { code: 'en', nativeName: 'English', shortCode: 'EN' },
+]
+
+describe('LocalePicker', () => {
+  it('lists the locales with the current one selected', async () => {
+    render(<LocalePicker locales={locales} value="pt-BR" onChange={() => {}} />)
+    const trigger = screen.getByRole('button', { name: 'Language: Português' })
+    expect(trigger).toHaveAttribute('aria-haspopup', 'dialog')
+    await userEvent.click(trigger)
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(2)
+    expect(screen.getByRole('option', { name: /Português/ })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('reports a new locale and closes with focus back on the trigger', async () => {
+    const onChange = vi.fn()
+    render(<LocalePicker locales={locales} value="pt-BR" onChange={onChange} />)
+    const trigger = screen.getByRole('button', { name: /Language/ })
+    await userEvent.click(trigger)
+    await userEvent.click(screen.getByRole('option', { name: /English/ }))
+    expect(onChange).toHaveBeenCalledWith('en')
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    await waitFor(() => expect(trigger).toHaveFocus())
+  })
+
+  it('marks each name with its own language', async () => {
+    render(<LocalePicker locales={locales} value="pt-BR" onChange={() => {}} />)
+    await userEvent.click(screen.getByRole('button', { name: /Language/ }))
+    expect(screen.getByText('English')).toHaveAttribute('lang', 'en')
+    expect(screen.getByText('Português')).toHaveAttribute('lang', 'pt-BR')
+  })
+
+  it('shows the list without a trigger when opened by the host', () => {
+    render(<LocalePicker locales={locales} value="en" onChange={() => {}} showTrigger={false} open onOpenChange={() => {}} presentation="dialog" />)
+    expect(screen.queryByRole('button', { name: /Language:/ })).toBeNull()
+    expect(screen.getByRole('listbox', { name: 'Available languages' })).toBeInTheDocument()
+    expect(screen.getByText(/Current language: English \(EN\)/)).toBeInTheDocument()
+  })
+
+  it('closes on Escape without reporting', async () => {
+    const onChange = vi.fn()
+    render(<LocalePicker locales={locales} value="pt-BR" onChange={onChange} />)
+    await userEvent.click(screen.getByRole('button', { name: /Language/ }))
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('selects with the keyboard', async () => {
+    const onChange = vi.fn()
+    render(<LocalePicker locales={locales} value="pt-BR" onChange={onChange} presentation="drawer" />)
+    await userEvent.click(screen.getByRole('button', { name: /Language/ }))
+    await waitFor(() => expect(screen.getByRole('option', { name: /Português/ })).toHaveFocus())
+    await userEvent.keyboard('{ArrowDown}{Enter}')
+    expect(onChange).toHaveBeenCalledWith('en')
+  })
+
+  it('uses system highlight for the selected option', () => {
+    const css = cssOf('components/locale-picker/LocalePicker.css')
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/Highlight/)
+    expect(css).toMatch(/min-block-size:\s*var\(--ty-control-target\)/)
+  })
+
+  it('has no axe violations, light and dark, open', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <LocalePicker locales={locales} value="pt-BR" onChange={() => {}} />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+    await userEvent.click(screen.getAllByRole('button', { name: /Language/ })[0]!)
+    await expectNoAxeViolations(document.body)
+  })
+})
+
+describe('LocalePicker in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<LocalePicker locales={[{ code: 'ar', nativeName: 'العربية' }, { code: 'he', nativeName: 'עברית' }]} value="ar" onChange={() => {}} />)
+    expect(rtlDom.screen.getByRole('button')).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})

package/src/components/locale-picker/LocalePicker.tsx

@@ -0,0 +1,128 @@
+import { Check, Languages } from 'lucide-react'
+import { useState } from 'react'
+import { ListBox, ListBoxItem, type Key } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useMessages } from '../../internal/provider'
+import { Button } from '../button/Button'
+import { Drawer } from '../drawer/Drawer'
+import { ModalDialog } from '../modal-dialog/ModalDialog'
+
+export interface LocaleEntry {
+  code: string
+  /** Name of the language in that language ("Português"). */
+  nativeName: string
+  shortCode?: string
+  /** Decorative flag (emoji or short text). */
+  flag?: string
+}
+
+export interface LocalePickerProps {
+  locales: LocaleEntry[]
+  value: string
+  /** Called with a different locale; the host applies it. */
+  onChange: (code: string) => void
+  presentation?: 'drawer' | 'dialog'
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title?: string
+  showTrigger?: boolean
+  className?: string
+}
+
+const shortOf = (l: LocaleEntry) => l.shortCode ?? l.code.split('-')[0]!.toUpperCase()
+
+/** The list of locales, each written in its own language. */
+function LocaleList(props: { locales: LocaleEntry[]; value: string; label: string; grid: boolean; onPick: (code: string) => void }) {
+  const pick = (keys: 'all' | Set<Key>) => {
+    if (keys === 'all') return
+    // Re-activating the current locale empties the selection: treat it as "keep".
+    const [key] = [...keys]
+    props.onPick(key != null ? String(key) : props.value)
+  }
+  return (
+    <ListBox
+      aria-label={props.label}
+      className="ty-locale-picker__list"
+      data-layout={props.grid ? 'grid' : 'list'}
+      layout={props.grid ? 'grid' : 'stack'}
+      items={props.locales.map((l) => ({ ...l, id: l.code }))}
+      selectionMode="single"
+      selectedKeys={[props.value]}
+      onSelectionChange={pick}
+      autoFocus
+    >
+      {(entry) => (
+        <ListBoxItem id={entry.code} textValue={entry.nativeName} className="ty-locale-picker__option">
+          {({ isSelected }) => (
+            <>
+              {entry.flag ? (
+                <span className="ty-locale-picker__flag" aria-hidden="true">
+                  {entry.flag}
+                </span>
+              ) : null}
+              <span className="ty-locale-picker__name" lang={entry.code}>
+                {entry.nativeName}
+              </span>
+              <span className="ty-locale-picker__code" aria-hidden="true">
+                {shortOf(entry)}
+              </span>
+              <Check className="ty-icon ty-locale-picker__check" aria-hidden="true" focusable="false" data-shown={isSelected || undefined} />
+            </>
+          )}
+        </ListBoxItem>
+      )}
+    </ListBox>
+  )
+}
+
+/** Interface language chooser (spec: wave-2/locale-picker.md). */
+export function LocalePicker(props: LocalePickerProps) {
+  const t = useMessages().localePicker
+  const title = props.title ?? t.title
+  const [innerOpen, setInnerOpen] = useState(false)
+  const open = props.open ?? innerOpen
+  const setOpen = (next: boolean) => {
+    if (props.open === undefined) setInnerOpen(next)
+    props.onOpenChange?.(next)
+  }
+  const current = props.locales.find((l) => l.code === props.value)
+  const currentName = current?.nativeName ?? props.value
+  const pick = (code: string) => {
+    if (code !== props.value) props.onChange(code)
+    setOpen(false)
+  }
+  const dialog = props.presentation === 'dialog'
+  const body = (
+    <div className="ty-locale-picker__body">
+      <LocaleList locales={props.locales} value={props.value} label={t.list} grid={dialog} onPick={pick} />
+      <p className="ty-locale-picker__footer">{t.current(currentName, current ? shortOf(current) : props.value)}</p>
+    </div>
+  )
+
+  return (
+    <span className={cx('ty-locale-picker', props.className)}>
+      {props.showTrigger === false ? null : (
+        <Button
+          variant="quiet"
+          leadingIcon={<Languages />}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          onPress={() => setOpen(true)}
+          className="ty-locale-picker__trigger"
+        >
+          <span className="ty-visually-hidden">{t.trigger(title, currentName)}</span>
+          <span aria-hidden="true">{current?.flag ?? (current ? shortOf(current) : props.value)}</span>
+        </Button>
+      )}
+      {dialog ? (
+        <ModalDialog isOpen={open} onOpenChange={setOpen} title={title} width="regular">
+          {body}
+        </ModalDialog>
+      ) : (
+        <Drawer open={open} onOpenChange={setOpen} title={title} placement="end" width="medium">
+          {body}
+        </Drawer>
+      )}
+    </span>
+  )
+}

package/src/components/long-press-menu/LongPressMenu.css

@@ -0,0 +1,97 @@
+/* LongPressMenu (spec: wave-2/long-press-menu.md; design direction §2.5, §2.7, §2.10). */
+@layer tympan.components {
+  .ty-long-press-menu {
+    display: inline-flex;
+  }
+  .ty-long-press-menu__trigger {
+    display: inline-flex;
+    min-block-size: var(--ty-control-target);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ty-radius-card);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+  .ty-long-press-menu__trigger[data-pressed] {
+    opacity: 0.85;
+  }
+  .ty-long-press-menu__trigger[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-long-press-menu__popover {
+    min-inline-size: 12rem;
+    padding: var(--ty-space-1);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-surface-raised);
+    box-shadow: var(--ty-shadow-floating);
+    backdrop-filter: blur(var(--ty-glass-blur-floating));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-floating));
+  }
+  .ty-long-press-menu__popover[data-entering] {
+    animation: ty-lpm-in var(--ty-dur-quick) var(--ty-ease);
+  }
+  @keyframes ty-lpm-in {
+    from {
+      opacity: 0;
+      scale: 0.97;
+    }
+  }
+  .ty-long-press-menu__menu {
+    outline: none;
+  }
+  .ty-long-press-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    min-block-size: var(--ty-control-target);
+    padding-inline: var(--ty-space-3);
+    border-radius: var(--ty-radius-control);
+    color: var(--ty-ink-2);
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-long-press-menu__item[data-focused] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+  .ty-long-press-menu__item[data-tone='danger'] {
+    color: var(--ty-danger);
+  }
+  .ty-long-press-menu__icon > svg {
+    inline-size: 18px;
+    block-size: 18px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ty-long-press-menu__popover[data-entering] {
+      animation: none;
+    }
+    .ty-long-press-menu__trigger[data-pressed] {
+      transform: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-long-press-menu__popover {
+      background: var(--ty-surface-raised-solid);
+      backdrop-filter: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-long-press-menu__popover {
+      border: 1px solid CanvasText;
+    }
+    .ty-long-press-menu__item[data-focused] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/src/components/long-press-menu/LongPressMenu.test.tsx

@@ -0,0 +1,106 @@
+import { act, fireEvent, 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 { renderWithProvider } from '../../../test/render'
+import { LongPressMenu } from './LongPressMenu'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const items = [
+  { label: 'Open in new tab', href: '/sources/new-tab' },
+  { label: 'Pin', onAction: vi.fn() },
+  { label: 'Remove', tone: 'danger' as const },
+]
+
+describe('LongPressMenu', () => {
+  it('runs onTap on a short tap and keeps the menu closed', async () => {
+    const onTap = vi.fn()
+    render(
+      <LongPressMenu label="Sources" items={items} onTap={onTap}>
+        Sources
+      </LongPressMenu>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Sources' }))
+    expect(onTap).toHaveBeenCalledTimes(1)
+    expect(screen.queryByRole('menu')).toBeNull()
+  })
+
+  it('opens the menu on a long press without the primary action', async () => {
+    const onTap = vi.fn()
+    render(
+      <LongPressMenu label="Sources" items={items} onTap={onTap}>
+        Sources
+      </LongPressMenu>,
+    )
+    const trigger = screen.getByRole('button', { name: 'Sources' })
+    const user = userEvent.setup()
+    await user.pointer({ keys: '[TouchA>]', target: trigger })
+    await act(() => new Promise((r) => setTimeout(r, 650)))
+    await user.pointer({ keys: '[/TouchA]', target: trigger })
+    expect(await screen.findByRole('menu')).toBeInTheDocument()
+    expect(onTap).not.toHaveBeenCalled()
+  })
+
+  it('opens with Shift+F10 with the first item focused, closes on Escape back to the trigger', async () => {
+    render(
+      <LongPressMenu label="Sources" items={items} onTap={() => {}}>
+        Sources
+      </LongPressMenu>,
+    )
+    const trigger = screen.getByRole('button', { name: 'Sources' })
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu')
+    expect(trigger).toHaveAccessibleDescription(/Shift\+F10/)
+    trigger.focus()
+    await userEvent.keyboard('{Shift>}{F10}{/Shift}')
+    await waitFor(() => expect(screen.getByRole('menuitem', { name: 'Open in new tab' })).toHaveFocus())
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('menu')).toBeNull())
+    await waitFor(() => expect(trigger).toHaveFocus())
+  })
+
+  it('navigates an item with href through the router adapter', async () => {
+    const navigate = vi.fn()
+    renderWithProvider(
+      <LongPressMenu label="Sources" items={items} tapOpensMenu>
+        Sources
+      </LongPressMenu>,
+      { navigate },
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Sources' }))
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Open in new tab' }))
+    expect(navigate).toHaveBeenCalledWith('/sources/new-tab', undefined)
+  })
+
+  it('suppresses the native context menu on right click and opens the menu', async () => {
+    render(
+      <LongPressMenu label="Sources" items={items} onTap={() => {}}>
+        Sources
+      </LongPressMenu>,
+    )
+    const notCancelled = fireEvent.contextMenu(screen.getByRole('button', { name: 'Sources' }))
+    expect(notCancelled).toBe(false)
+    expect(await screen.findByRole('menu')).toBeInTheDocument()
+  })
+
+  it('has no axe violations open and closed', async () => {
+    const { container } = render(
+      <LongPressMenu label="Sources" items={items} tapOpensMenu>
+        Sources
+      </LongPressMenu>,
+    )
+    await expectNoAxeViolations(container)
+    await userEvent.click(screen.getByRole('button', { name: 'Sources' }))
+    await screen.findByRole('menu')
+    await expectNoAxeViolations(document.body)
+  })
+})
+
+describe('LongPressMenu in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(<LongPressMenu label="المصادر" items={[{ label: 'تثبيت' }]} onTap={() => {}}><span>المصادر</span></LongPressMenu>)
+    expect(rtlDom.screen.getAllByText('المصادر').length).toBeGreaterThan(0)
+    await axeRtl(container)
+  })
+})