@oxyhq/bloom 0.87.1 → 0.89.0

package/src/__tests__/aria-state-web.test.tsx

@@ -0,0 +1,466 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Every stateful Bloom control, checked against the DOM it actually produces.
+//
+// The bug this suite exists for: `Checkbox` announced no state on web. It set
+// `accessibilityState={{checked}}` — the React Native answer, and the one every
+// other control here used too — but react-native-web's `createDOMProps` never
+// reads `accessibilityState`. It reads the `aria-*` props. So the box was drawn
+// checked while assistive technology saw a `role="checkbox"` with no state at
+// all, and the same was true of tab strips, radio options, accordions, sliders
+// and toggles across the library.
+//
+// It survived because the existing suites assert on PROPS: `accessibilityState`
+// was set, so they passed, and no prop-level assertion can tell you what
+// react-native-web does with it afterwards. These tests render through the REAL
+// react-native-web into jsdom and read the emitted ATTRIBUTES, which is the only
+// place the difference is visible.
+//
+// The cross-platform contract, verified against both runtimes in node_modules:
+//   - react-native-web `createDOMProps` reads `aria-*`, ignores
+//     `accessibilityState` (it appears nowhere in that module).
+//   - React Native's `Pressable`/`View` fold `aria-busy|checked|disabled|
+//     expanded|selected` and `aria-value{min,max,now,text}` BACK into
+//     `accessibilityState`/`accessibilityValue`, with the `aria-*` value
+//     winning. So `aria-*` is the one spelling both platforms honour.
+//   - EXCEPT `aria-pressed`, which React Native has no concept of (its
+//     `AccessibilityState` is disabled/selected/checked/busy/expanded only).
+//     Toggles with `role="button"` therefore set BOTH: `accessibilityState`
+//     for native, `aria-pressed` for web. ARIA scopes these states by role —
+//     `aria-selected` would be invalid on a button, as `aria-pressed` would be
+//     on a tab — which is why the spelling differs per control rather than
+//     being one blanket substitution.
+//   - `aria-disabled` on a `Pressable` is a special case: react-native-web's
+//     `Pressable` appends its own from the `disabled` prop AFTER the caller's
+//     props, so a caller-supplied `aria-disabled` is overwritten there and the
+//     `disabled` PROP is the only spelling that works. On a plain `View` there
+//     is no such prop, so `aria-disabled` is the only one that works.
+
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+// The whole point is what react-native-web puts in the DOM, so this suite runs
+// against the REAL RNW. Under the repo-wide `react-native` mock every assertion
+// below would read a prop straight back off a stub element and pass whether or
+// not the fix is present — the exact vacuity that let this ship.
+jest.mock('react-native', () => jest.requireActual('react-native-web'));
+
+import { Text } from 'react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Checkbox } from '../checkbox/Checkbox';
+import { Switch } from '../switch/Switch';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../accordion';
+import { Collapsible } from '../collapsible';
+import { Chip } from '../chip';
+import { Item } from '../item';
+import { SegmentedControl, SegmentedControlItem } from '../segmented-control';
+import { Button } from '../button/Button';
+import { Slider } from '../slider';
+import { InputGroup } from '../input-group';
+import { SettingsListItem } from '../settings-list/SettingsList';
+import { FrostedIconButton } from '../frosted-icon-button';
+import { CompositionBar } from '../composition-bar';
+// Both Select forks by explicit filename: jest has no platform-extension
+// resolution, so a bare `'../select'` would only ever exercise the native one
+// and the web fork could drift back unnoticed.
+import {
+  Select as WebSelect,
+  SelectItem as WebSelectItem,
+  SelectItemText as WebSelectItemText,
+} from '../select/index.web';
+import {
+  Select as NativeSelect,
+  SelectItem as NativeSelectItem,
+  SelectItemText as NativeSelectItemText,
+} from '../select/index';
+import { TabBar, TabBarButton } from '../tab-bar';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(ui: React.ReactElement): HTMLElement {
+  act(() => {
+    root.render(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        {ui}
+      </BloomThemeProvider>,
+    );
+  });
+  return container;
+}
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+/** The DOM node react-native-web rendered for `testID`. */
+function byTestId(c: HTMLElement, id: string): HTMLElement {
+  const el = c.querySelector(`[data-testid="${id}"]`);
+  if (!(el instanceof HTMLElement)) {
+    throw new Error(`No element rendered for testID "${id}"`);
+  }
+  return el;
+}
+
+/** The first node carrying `role`, which is what a screen reader would find. */
+function byRole(c: HTMLElement, role: string): HTMLElement {
+  const el = c.querySelector(`[role="${role}"]`);
+  if (!(el instanceof HTMLElement)) {
+    throw new Error(
+      `No element with role="${role}" in DOM:\n${c.innerHTML.slice(0, 600)}`,
+    );
+  }
+  return el;
+}
+
+function allByRole(c: HTMLElement, role: string): HTMLElement[] {
+  return Array.from(c.querySelectorAll(`[role="${role}"]`)).filter(
+    (el): el is HTMLElement => el instanceof HTMLElement,
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+describe('Checkbox (the reported defect)', () => {
+  it('emits aria-checked="true" when checked', () => {
+    const c = mount(<Checkbox checked onCheckedChange={() => {}} label="Sync" testID="cb" />);
+    const el = byTestId(c, 'cb');
+    expect(el.getAttribute('role')).toBe('checkbox');
+    expect(el.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('emits aria-checked="false" when unchecked — absent is not the same as false', () => {
+    // An omitted attribute leaves the control stateless to assistive tech,
+    // which is what shipped. "false" is a positive statement of unchecked.
+    const c = mount(
+      <Checkbox checked={false} onCheckedChange={() => {}} label="Sync" testID="cb" />,
+    );
+    expect(byTestId(c, 'cb').getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('emits aria-checked="mixed" when indeterminate', () => {
+    const c = mount(
+      <Checkbox checked={false} indeterminate onCheckedChange={() => {}} label="S" testID="cb" />,
+    );
+    expect(byTestId(c, 'cb').getAttribute('aria-checked')).toBe('mixed');
+  });
+
+  it('emits aria-disabled when disabled', () => {
+    const c = mount(
+      <Checkbox checked onCheckedChange={() => {}} label="Sync" disabled testID="cb" />,
+    );
+    expect(byTestId(c, 'cb').getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('tracks a state change across a re-render', () => {
+    const c = mount(<Checkbox checked={false} onCheckedChange={() => {}} label="S" testID="cb" />);
+    expect(byTestId(c, 'cb').getAttribute('aria-checked')).toBe('false');
+    mount(<Checkbox checked onCheckedChange={() => {}} label="S" testID="cb" />);
+    expect(byTestId(c, 'cb').getAttribute('aria-checked')).toBe('true');
+  });
+});
+
+describe('Switch', () => {
+  it('emits role="switch" with aria-checked', () => {
+    const c = mount(<Switch value onValueChange={() => {}} testID="sw" />);
+    const el = byTestId(c, 'sw');
+    expect(el.getAttribute('role')).toBe('switch');
+    expect(el.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('emits aria-checked="false" when off', () => {
+    const c = mount(<Switch value={false} onValueChange={() => {}} testID="sw" />);
+    expect(byTestId(c, 'sw').getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('emits aria-disabled when disabled', () => {
+    // Regression: the switch guarded presses internally but never passed
+    // `disabled` to its Pressable, so web announced a disabled switch as
+    // operable. react-native-web overwrites a caller's `aria-disabled` on a
+    // Pressable, so the prop is the only route.
+    const c = mount(<Switch value onValueChange={() => {}} disabled testID="sw" />);
+    expect(byTestId(c, 'sw').getAttribute('aria-disabled')).toBe('true');
+  });
+});
+
+describe('Accordion / Collapsible', () => {
+  it('Accordion trigger emits aria-expanded reflecting the open item', () => {
+    const c = mount(
+      <Accordion type="single" value="a" onValueChange={() => {}}>
+        <AccordionItem value="a">
+          <AccordionTrigger>Open one</AccordionTrigger>
+          <AccordionContent>
+            <Text>body</Text>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>Closed one</AccordionTrigger>
+          <AccordionContent>
+            <Text>body</Text>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    const triggers = allByRole(c, 'button');
+    expect(triggers).toHaveLength(2);
+    expect(triggers[0]?.getAttribute('aria-expanded')).toBe('true');
+    expect(triggers[1]?.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('Collapsible header emits aria-expanded', () => {
+    const c = mount(
+      <Collapsible title="Details" defaultOpen>
+        <Text>body</Text>
+      </Collapsible>,
+    );
+    expect(byRole(c, 'button').getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('Collapsible header emits aria-expanded="false" when closed', () => {
+    const c = mount(
+      <Collapsible title="Details">
+        <Text>body</Text>
+      </Collapsible>,
+    );
+    expect(byRole(c, 'button').getAttribute('aria-expanded')).toBe('false');
+  });
+});
+
+describe('role="button" toggles use aria-pressed', () => {
+  // ARIA defines the toggle state of a button as `aria-pressed`; `aria-selected`
+  // is not valid on that role. React Native has no `aria-pressed`, so these
+  // components keep `accessibilityState={{selected}}` for native alongside it.
+  it('Chip emits aria-pressed when selected', () => {
+    const c = mount(
+      <Chip onPress={() => {}} selected testID="chip">
+        Filter
+      </Chip>,
+    );
+    expect(byTestId(c, 'chip').getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('Chip emits aria-pressed="false" when unselected', () => {
+    const c = mount(
+      <Chip onPress={() => {}} selected={false} testID="chip">
+        Filter
+      </Chip>,
+    );
+    expect(byTestId(c, 'chip').getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('FrostedIconButton emits aria-pressed, matching its .web fork', () => {
+    const c = mount(
+      <FrostedIconButton accessibilityLabel="Back" icon={<Text>x</Text>} active testID="fib" />,
+    );
+    expect(byTestId(c, 'fib').getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('CompositionBar marks the selected segment with aria-pressed', () => {
+    const c = mount(
+      <CompositionBar
+        categories={[
+          { key: 'a', name: 'Alpha', amount: 3, color: '#111111' },
+          { key: 'b', name: 'Beta', amount: 1, color: '#222222' },
+        ]}
+        selectedKey="b"
+        onSelect={() => {}}
+        hintLabel="Tap a segment"
+      />,
+    );
+    const segments = allByRole(c, 'button');
+    expect(segments).toHaveLength(2);
+    expect(segments[0]?.getAttribute('aria-pressed')).toBe('false');
+    expect(segments[1]?.getAttribute('aria-pressed')).toBe('true');
+  });
+});
+
+// `Item` puts `testID` on its inner content View, so these query the node that
+// actually carries the role — which is the one a screen reader reads.
+describe('Item selection is spelled per its role', () => {
+  it('a pressable row defaults to a button toggle: aria-pressed', () => {
+    const c = mount(<Item title="Row" onPress={() => {}} selected />);
+    expect(byRole(c, 'button').getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('role="option" gets aria-selected, which is what ARIA allows there', () => {
+    const c = mount(<Item title="Row" role="option" onPress={() => {}} selected />);
+    const el = byRole(c, 'option');
+    expect(el.getAttribute('aria-selected')).toBe('true');
+    // `aria-pressed` is not valid on `option` and must not be emitted too.
+    expect(el.hasAttribute('aria-pressed')).toBe(false);
+  });
+
+  it('a row with no selection state emits neither attribute', () => {
+    const c = mount(<Item title="Row" onPress={() => {}} />);
+    const el = byRole(c, 'button');
+    expect(el.hasAttribute('aria-pressed')).toBe(false);
+    expect(el.hasAttribute('aria-selected')).toBe(false);
+  });
+
+  it('a non-pressable disabled row emits aria-disabled', () => {
+    // This branch renders a View, which has no `disabled` prop for
+    // react-native-web to derive the attribute from.
+    const c = mount(<Item title="Row" disabled />);
+    expect(c.querySelector('[aria-disabled="true"]')).not.toBeNull();
+  });
+});
+
+describe('SegmentedControl spells the active state for its role', () => {
+  it('type="tabs" emits aria-selected on role="tab"', () => {
+    const c = mount(
+      <SegmentedControl label="View" type="tabs" value="one" onChange={() => {}}>
+        <SegmentedControlItem value="one" testID="seg-one">
+          <Text>One</Text>
+        </SegmentedControlItem>
+        <SegmentedControlItem value="two" testID="seg-two">
+          <Text>Two</Text>
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+    expect(byTestId(c, 'seg-one').getAttribute('role')).toBe('tab');
+    expect(byTestId(c, 'seg-one').getAttribute('aria-selected')).toBe('true');
+    expect(byTestId(c, 'seg-two').getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('type="radio" emits aria-checked on role="radio", not aria-selected', () => {
+    // ARIA gives `radio` a checked state; `aria-selected` is invalid there, so
+    // one blanket spelling for both modes would be wrong for this one.
+    const c = mount(
+      <SegmentedControl label="View" type="radio" value="two" onChange={() => {}}>
+        <SegmentedControlItem value="one" testID="seg-one">
+          <Text>One</Text>
+        </SegmentedControlItem>
+        <SegmentedControlItem value="two" testID="seg-two">
+          <Text>Two</Text>
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+    const two = byTestId(c, 'seg-two');
+    expect(two.getAttribute('role')).toBe('radio');
+    expect(two.getAttribute('aria-checked')).toBe('true');
+    expect(two.hasAttribute('aria-selected')).toBe(false);
+    expect(byTestId(c, 'seg-one').getAttribute('aria-checked')).toBe('false');
+  });
+});
+
+describe('Button', () => {
+  it('emits aria-busy while loading, matching Button.web', () => {
+    const c = mount(
+      <Button loading testID="btn">
+        Saving
+      </Button>,
+    );
+    expect(byTestId(c, 'btn').getAttribute('aria-busy')).toBe('true');
+  });
+
+  it('emits aria-disabled while loading, from the disabled prop', () => {
+    const c = mount(
+      <Button loading testID="btn">
+        Saving
+      </Button>,
+    );
+    expect(byTestId(c, 'btn').getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('emits no aria-busy when idle', () => {
+    const c = mount(<Button testID="btn">Save</Button>);
+    expect(byTestId(c, 'btn').hasAttribute('aria-busy')).toBe(false);
+  });
+});
+
+describe('Slider', () => {
+  it('emits the value as aria-value* — the object form reached web as nothing', () => {
+    // react-native-web has no handling for `accessibilityValue` at all, so the
+    // slider announced its role and no value whatsoever.
+    const c = mount(
+      <Slider value={40} min={0} max={100} onValueChange={() => {}} testID="sl" />,
+    );
+    const el = byTestId(c, 'sl');
+    expect(el.getAttribute('role')).toBe('slider');
+    expect(el.getAttribute('aria-valuenow')).toBe('40');
+    expect(el.getAttribute('aria-valuemin')).toBe('0');
+    expect(el.getAttribute('aria-valuemax')).toBe('100');
+  });
+
+  it('emits aria-disabled when disabled', () => {
+    const c = mount(
+      <Slider value={0} min={0} max={10} onValueChange={() => {}} disabled testID="sl" />,
+    );
+    expect(byTestId(c, 'sl').getAttribute('aria-disabled')).toBe('true');
+  });
+});
+
+// ARIA gives `role="radio"` a checked state, not a selected one. Both forks are
+// asserted from one place so the platforms cannot drift apart again.
+describe.each([
+  ['web', WebSelect, WebSelectItem, WebSelectItemText] as const,
+  ['native', NativeSelect, NativeSelectItem, NativeSelectItemText] as const,
+])('SelectItem (%s fork) through react-native-web', (_p, Select, SelectItem, SelectItemText) => {
+  it('emits aria-checked reflecting the current value', () => {
+    const c = mount(
+      <Select value="a">
+        <SelectItem value="a" label="Option A">
+          <SelectItemText>Option A</SelectItemText>
+        </SelectItem>
+        <SelectItem value="b" label="Option B">
+          <SelectItemText>Option B</SelectItemText>
+        </SelectItem>
+      </Select>,
+    );
+    const options = allByRole(c, 'radio');
+    expect(options).toHaveLength(2);
+    expect(options[0]?.getAttribute('aria-checked')).toBe('true');
+    expect(options[1]?.getAttribute('aria-checked')).toBe('false');
+  });
+});
+
+describe('TabBar', () => {
+  it('emits aria-selected on the focused tab', () => {
+    const items = [
+      { name: 'home', label: 'Home', icon: <Text>h</Text> },
+      { name: 'search', label: 'Search', icon: <Text>s</Text> },
+    ];
+    const c = mount(
+      <TabBar activeIndex={1}>
+        {items.map((item, index) => (
+          <TabBarButton key={item.name} item={item} index={index} />
+        ))}
+      </TabBar>,
+    );
+    const tabs = allByRole(c, 'tab');
+    expect(tabs).toHaveLength(2);
+    expect(tabs[0]?.getAttribute('aria-selected')).toBe('false');
+    expect(tabs[1]?.getAttribute('aria-selected')).toBe('true');
+  });
+});
+
+describe('View-based containers emit aria-disabled', () => {
+  it('InputGroup', () => {
+    const c = mount(
+      <InputGroup disabled testID="ig">
+        <Text>field</Text>
+      </InputGroup>,
+    );
+    expect(byTestId(c, 'ig').getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('SettingsListItem without onPress', () => {
+    const c = mount(<SettingsListItem title="Wi-Fi" disabled />);
+    // The row renders a View wrapping the content; the disabled state belongs
+    // on whichever node carries the a11y role.
+    expect(c.querySelector('[aria-disabled="true"]')).not.toBeNull();
+  });
+});

package/src/__tests__/design-tokens-json.test.ts

@@ -0,0 +1,112 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import {
+  bloomDesignTokens,
+  renderBloomTokensJson,
+  resolvedColorToHex,
+  type PresetGroup,
+} from '../design-tokens/tokens-json';
+import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
+import { CANONICAL_TOKENS, getResolvedTokens } from '../theme/token-registry';
+
+const TOKENS_PATH = join(__dirname, '..', 'design-tokens', 'tokens.json');
+
+describe('the shipped tokens.json is generated, not maintained', () => {
+  it('is byte-identical to a fresh render', () => {
+    // The whole guarantee: a token changed in the engine and not regenerated
+    // fails here rather than shipping a JSON that describes a palette Bloom no
+    // longer paints.
+    expect(readFileSync(TOKENS_PATH, 'utf8')).toBe(renderBloomTokensJson());
+  });
+
+  it('says so in its own $description', () => {
+    expect(bloomDesignTokens().$description).toContain('AUTO-GENERATED');
+  });
+});
+
+describe('tokens.json shape contract', () => {
+  /* Astro codegens C++ SkColor tables from these paths, so the shape is a
+   * published interface: new groups may be added, existing paths may not move. */
+  const tokens = bloomDesignTokens();
+
+  it('covers every preset Bloom ships, and nothing else', () => {
+    const presets = Object.keys(tokens.color).filter((key) => !key.startsWith('$'));
+    expect(presets.sort()).toEqual([...APP_COLOR_NAMES].sort());
+  });
+
+  it('carries both schemes and every canonical token, for every preset', () => {
+    for (const name of APP_COLOR_NAMES) {
+      const preset = tokens.color[name] as PresetGroup;
+      for (const scheme of ['light', 'dark'] as const) {
+        expect(Object.keys(preset[scheme]).sort()).toEqual([...CANONICAL_TOKENS].sort());
+      }
+    }
+  });
+
+  it('names tokens as the CSS custom property without the leading --', () => {
+    // What makes the mapping mechanical for a consumer. A token renamed on one
+    // side only would break it silently.
+    const preset = tokens.color.oxy as PresetGroup;
+    for (const token of Object.keys(preset.light)) {
+      expect(token.startsWith('--')).toBe(false);
+      expect(getResolvedTokens('oxy', 'light')[`--${token}`]).toBeDefined();
+    }
+  });
+
+  it('resolves every colour to an sRGB hex string', () => {
+    for (const name of APP_COLOR_NAMES) {
+      const preset = tokens.color[name] as PresetGroup;
+      for (const scheme of ['light', 'dark'] as const) {
+        for (const [token, entry] of Object.entries(preset[scheme])) {
+          expect(`${name}.${scheme}.${token} = ${String(entry.$value)}`).toMatch(
+            /= #[0-9a-f]{6}([0-9a-f]{2})?$/,
+          );
+        }
+      }
+    }
+  });
+
+  it('records each preset’s seed and variant', () => {
+    for (const name of APP_COLOR_NAMES) {
+      const preset = tokens.color[name] as PresetGroup;
+      expect(preset.$extensions['so.oxy.bloom']).toMatchObject({
+        seed: APP_COLOR_PRESETS[name].hex,
+        variant: APP_COLOR_PRESETS[name].variant,
+      });
+    }
+  });
+
+  it('emits the numeric scales as px dimensions', () => {
+    expect(tokens.spacing['space-8']).toEqual({ $value: '8px' });
+    expect(tokens.radius['radius-max']).toEqual({ $value: '9999px' });
+    expect(tokens.borderWidth['hairline']).toEqual({ $value: '0.5px' });
+    expect(tokens.typography['body']).toMatchObject({
+      fontSize: { $value: '15px' },
+      fontWeight: { $value: 400 },
+    });
+  });
+});
+
+describe('resolvedColorToHex', () => {
+  it('converts the engine’s two output forms', () => {
+    expect(resolvedColorToHex('rgb(255 239 253)')).toBe('#ffeffd');
+    expect(resolvedColorToHex('rgb(0 0 0)')).toBe('#000000');
+    // 0.13 × 255 = 33.15 → 33 → 0x21. An 8-bit alpha is exactly what an SkColor
+    // holds, so nothing is lost downstream.
+    expect(resolvedColorToHex('rgba(213, 86, 255, 0.13)')).toBe('#d556ff21');
+  });
+
+  it('drops a fully opaque alpha rather than emitting #rrggbbff', () => {
+    expect(resolvedColorToHex('rgba(1, 2, 3, 1)')).toBe('#010203');
+  });
+
+  /* The engine emitting a third form — an oklch(), a bare hex, a named colour —
+   * would otherwise reach a C++ colour table as an unparseable string. Failing
+   * at generation time is the only place anyone would notice. */
+  it('throws on anything that is not an rgb()/rgba() colour', () => {
+    expect(() => resolvedColorToHex('oklch(0.7 0.1 300)')).toThrow(/not an rgb/);
+    expect(() => resolvedColorToHex('#ffeffd')).toThrow(/not an rgb/);
+    expect(() => resolvedColorToHex('0.5rem')).toThrow(/not an rgb/);
+  });
+});

package/src/__tests__/exports-map-contract.test.ts

@@ -37,7 +37,11 @@ const pkg = JSON.parse(readFileSync(PKG_PATH, 'utf8')) as {
 const exportsMap = pkg.exports;
 
 /** Non-subpath entries that are legitimately plain strings (static assets). */
-const STRING_ENTRIES = ['./design-tokens/theme.css', './package.json'];
+const STRING_ENTRIES = [
+  './design-tokens/theme.css',
+  './design-tokens/tokens.json',
+  './package.json',
+];
 
 /**
  * Vacuity floor. `SUBPATHS` in the generator is 86 entries today; a traversal

package/src/__tests__/support/constructed-style-sheets.ts

@@ -0,0 +1,68 @@
+/**
+ * A spec-shaped stand-in for constructed stylesheets, for the jsdom suites.
+ *
+ * jsdom 26 ships the `CSSStyleSheet` CONSTRUCTOR but neither `replaceSync` nor
+ * `document.adoptedStyleSheets`, so every jsdom test takes Bloom's `<style>`
+ * fallback. That makes the whole CSP-safe path — the reason
+ * `styles/adopt-style-sheet.ts` exists — invisible to jest unless a test
+ * installs the API itself. Without this, a mutation that deleted the adoption
+ * branch entirely would leave the suite green.
+ *
+ * Not collected as a suite: jest's `testMatch` wants `*.test.ts` / `*.spec.ts`.
+ */
+
+export interface FakeStyleSheet {
+  /** The CSS most recently handed to `replaceSync`. */
+  cssText: string;
+  /** How many times the sheet has been re-parsed, so a test can prove it wasn't. */
+  replaceSyncCalls: number;
+  replaceSync(css: string): void;
+}
+
+export interface ConstructedStyleSheetsHarness {
+  /** The document's adopted sheets, read live (the code reassigns the array). */
+  adopted(): readonly FakeStyleSheet[];
+  /** Drop the API again, restoring jsdom's own `CSSStyleSheet`. */
+  uninstall(): void;
+}
+
+export function installConstructedStyleSheets(): ConstructedStyleSheetsHarness {
+  class FakeCSSStyleSheet implements FakeStyleSheet {
+    cssText = '';
+    replaceSyncCalls = 0;
+
+    replaceSync(css: string): void {
+      this.cssText = css;
+      this.replaceSyncCalls += 1;
+    }
+  }
+
+  const previousConstructor = Object.getOwnPropertyDescriptor(
+    globalThis,
+    'CSSStyleSheet',
+  );
+
+  Object.defineProperty(globalThis, 'CSSStyleSheet', {
+    value: FakeCSSStyleSheet,
+    writable: true,
+    configurable: true,
+  });
+  Object.defineProperty(document, 'adoptedStyleSheets', {
+    value: [],
+    writable: true,
+    configurable: true,
+  });
+
+  return {
+    adopted: () =>
+      document.adoptedStyleSheets as unknown as readonly FakeStyleSheet[],
+    uninstall: () => {
+      Reflect.deleteProperty(document, 'adoptedStyleSheets');
+      if (previousConstructor) {
+        Object.defineProperty(globalThis, 'CSSStyleSheet', previousConstructor);
+      } else {
+        Reflect.deleteProperty(globalThis, 'CSSStyleSheet');
+      }
+    },
+  };
+}

package/src/accordion/Accordion.tsx

@@ -176,7 +176,11 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
       onPressOut={disabled ? undefined : onPressOut}
       disabled={disabled}
       accessibilityRole="button"
-      accessibilityState={{ expanded: isExpanded, disabled }}
+      // `aria-expanded` rather than `accessibilityState`, which react-native-web
+      // drops entirely. React Native folds this back into `accessibilityState`,
+      // so it is the one spelling both platforms read. `disabled` travels on the
+      // `disabled` prop above.
+      aria-expanded={isExpanded}
     >
       {icon}
       <View style={{ flex: 1 }}>