@duro-app/ui 4.4.0 → 5.0.0

package/src/components/Popover/PopoverLayers.stories.tsx

@@ -0,0 +1,234 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor, within} from 'storybook/test'
+import {userEvent} from '@testing-library/user-event'
+import {html} from 'react-strict-dom'
+import {Popover} from './Popover'
+import {Select} from '../Select/Select'
+import {Combobox} from '../Combobox/Combobox'
+import {Menu} from '../Menu/Menu'
+import {Stack} from '../Stack/Stack'
+
+const meta: Meta = {
+  title: 'Components/Popover/Layers',
+}
+
+export default meta
+type Story = StoryObj
+
+// Nested popups are portalled out of the canvas, so query the document.
+const page = () => within(document.body)
+
+const dialog = () => page().queryByRole('dialog', {name: 'Style'})
+
+function SelectItems() {
+  return (
+    <Select.Popup>
+      <Select.Item value="primary">
+        <Select.ItemText>Primary</Select.ItemText>
+      </Select.Item>
+      <Select.Item value="secondary">
+        <Select.ItemText>Secondary</Select.ItemText>
+      </Select.Item>
+    </Select.Popup>
+  )
+}
+
+function VariantSelect() {
+  return (
+    <Select.Root defaultValue="primary">
+      <Select.Trigger aria-label="Variant">
+        <Select.Value />
+        <Select.Icon />
+      </Select.Trigger>
+      <SelectItems />
+    </Select.Root>
+  )
+}
+
+function FruitCombobox() {
+  return (
+    <Combobox.Root>
+      <Combobox.Input placeholder="Search fruit...">
+        <Combobox.Trigger />
+      </Combobox.Input>
+      <Combobox.Popup>
+        <Combobox.Item value="apple">
+          <Combobox.ItemText>Apple</Combobox.ItemText>
+        </Combobox.Item>
+        <Combobox.Item value="banana">
+          <Combobox.ItemText>Banana</Combobox.ItemText>
+        </Combobox.Item>
+      </Combobox.Popup>
+    </Combobox.Root>
+  )
+}
+
+function Host({children}: {children: React.ReactNode}) {
+  return (
+    <Stack gap="md">
+      <Popover.Root>
+        <Popover.Trigger>Style</Popover.Trigger>
+        <Popover.Popup label="Style">{children}</Popover.Popup>
+      </Popover.Root>
+      <html.button type="button">Elsewhere</html.button>
+    </Stack>
+  )
+}
+
+export const SelectOutsideField: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await userEvent.click(page().getByRole('option', {name: 'Secondary'}))
+    await expect(trigger).toHaveTextContent('Secondary')
+    await expect(dialog()).toBeInTheDocument()
+  },
+}
+
+export const ComboboxOutsideField: Story = {
+  render: () => (
+    <Host>
+      <FruitCombobox />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const input = page().getByRole('combobox')
+    await userEvent.click(input)
+    await userEvent.click(await page().findByRole('option', {name: 'Banana'}))
+    await waitFor(() => expect(input).toHaveValue('Banana'))
+    await expect(dialog()).toBeInTheDocument()
+  },
+}
+
+export const SelectBackdropPress: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+    // The backdrop covers the viewport: a press at the corner lands on it.
+    const backdrop = document.elementFromPoint(2, 2) as HTMLElement
+    await userEvent.click(backdrop)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(dialog()).toBeInTheDocument()
+
+    // With the Select closed, an outside press closes the Popover.
+    await userEvent.click(canvas.getByRole('button', {name: 'Elsewhere'}))
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const SelectOutsidePopover: Story = {
+  render: () => (
+    <Stack gap="md">
+      <Popover.Root>
+        <Popover.Trigger>Style</Popover.Trigger>
+        <Popover.Popup label="Style">
+          <Popover.Close>Done</Popover.Close>
+        </Popover.Popup>
+      </Popover.Root>
+      <VariantSelect />
+    </Stack>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    await expect(dialog()).toBeInTheDocument()
+    // The Select is not inside the Popover: choosing from it is an outside press.
+    await userEvent.click(canvas.getByRole('combobox', {name: 'Variant'}))
+    await userEvent.click(page().getByRole('option', {name: 'Secondary'}))
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const EscapeInNestedSelect: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await userEvent.keyboard('{Escape}')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(dialog()).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const EscapeInNestedMenu: Story = {
+  render: () => (
+    <Host>
+      <Menu.Root>
+        <Menu.Trigger>Actions</Menu.Trigger>
+        <Menu.Popup>
+          <Menu.Item>Copy</Menu.Item>
+          <Menu.Item>Paste</Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    await userEvent.click(page().getByRole('button', {name: 'Actions'}))
+    await expect(await page().findByRole('menu')).toBeVisible()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(page().queryByRole('menu')).not.toBeInTheDocument())
+    await expect(dialog()).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const EscapeInNestedCombobox: Story = {
+  render: () => (
+    <Host>
+      <FruitCombobox />
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const input = page().getByRole('combobox')
+    await userEvent.click(input)
+    await expect(await page().findByRole('listbox')).toBeVisible()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(page().queryByRole('listbox')).not.toBeInTheDocument())
+    await expect(dialog()).toBeInTheDocument()
+    await userEvent.keyboard('{Escape}')
+    await expect(dialog()).not.toBeInTheDocument()
+  },
+}
+
+export const TabFromNestedSelect: Story = {
+  render: () => (
+    <Host>
+      <VariantSelect />
+      <html.button type="button">After</html.button>
+    </Host>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByRole('button', {name: 'Style'}))
+    const trigger = page().getByRole('combobox', {name: 'Variant'})
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    await userEvent.tab()
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await waitFor(() => expect(trigger).not.toHaveFocus())
+  },
+}

package/src/components/Popover/styles.css.ts

@@ -4,6 +4,7 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   trigger: {
@@ -21,7 +22,7 @@ export const styles = css.create({
       default: 'transparent',
       ':hover': colors.bgCardHover,
     },
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -35,7 +36,7 @@ export const styles = css.create({
     left: 0,
     boxSizing: 'border-box',
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,

package/src/components/RadioGroup/RadioGroup.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
 import {useFieldGroupLabelling} from '../Field/FieldContext'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 // --- Context ---
 
@@ -100,7 +101,7 @@ function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
         checked={isChecked}
         disabled={isDisabled}
         onChange={() => onSelect(value)}
-        style={styles.input}
+        style={[visuallyHidden.base, styles.input]}
       />
       <html.span
         style={[styles.circle, isChecked ? styles.circleChecked : styles.circleUnchecked]}

package/src/components/RadioGroup/styles.css.ts

@@ -3,6 +3,8 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -27,9 +29,9 @@ export const styles = css.create({
     cursor: 'not-allowed',
   },
   circle: {
-    width: 18,
-    height: 18,
-    borderWidth: 1,
+    width: sizes.indicator,
+    height: sizes.indicator,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderRadius: radii.full,
     display: 'inline-flex',
@@ -52,16 +54,13 @@ export const styles = css.create({
     borderColor: colors.accent,
   },
   dot: {
-    width: 8,
-    height: 8,
+    width: sizes.indicatorDot,
+    height: sizes.indicatorDot,
     borderRadius: radii.full,
     backgroundColor: colors.accent,
   },
+  // Layered on visuallyHidden.base: a native input is also made transparent.
   input: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
     opacity: 0,
-    overflow: 'hidden',
   },
 })

package/src/components/ScrollArea/ScrollArea.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required.',
+    'Custom scrollbar region with draggable thumb. Supports vertical and horizontal scrolling. Compound component — Root is required. Inside a Drawer, a drag in the viewport scrolls it; the drawer only takes a drag toward its edge from the scroll start.',
   whenToUse: [
     'Custom-styled scrollbars for content overflow areas',
     'Chat logs, code blocks, or long lists with constrained height',
@@ -15,7 +15,7 @@ export const meta: ComponentMeta = {
     required: ['Root', 'Viewport', 'Content', 'Scrollbar', 'Thumb'],
   },
   example: `<ScrollArea.Root>
-  <ScrollArea.Viewport maxHeight={300}>
+  <ScrollArea.Viewport maxHeight="listMaxH">
     <ScrollArea.Content>
       {/* Long content here */}
     </ScrollArea.Content>

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -5,6 +5,8 @@ import {ScrollArea} from './ScrollArea'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/ScrollArea',
@@ -15,8 +17,8 @@ type Story = StoryObj
 
 const demoStyles = css.create({
   container: {
-    width: 300,
-    borderWidth: 1,
+    width: sizes.gridColMd,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -26,7 +28,7 @@ const demoStyles = css.create({
     paddingBottom: spacing.ms,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.bgCard,
     fontSize: typography.fontSizeSm,
@@ -40,7 +42,7 @@ export const Default: Story = {
   render: () => (
     <html.div style={demoStyles.container}>
       <ScrollArea.Root>
-        <ScrollArea.Viewport maxHeight={300}>
+        <ScrollArea.Viewport maxHeight="listMaxH">
           <ScrollArea.Content>
             {items.map((item) => (
               <html.div key={item} style={demoStyles.item}>
@@ -66,7 +68,7 @@ export const ShortContent: Story = {
   render: () => (
     <html.div style={demoStyles.container}>
       <ScrollArea.Root>
-        <ScrollArea.Viewport maxHeight={300}>
+        <ScrollArea.Viewport maxHeight="listMaxH">
           <ScrollArea.Content>
             <html.div style={demoStyles.item}>Only one item</html.div>
             <html.div style={demoStyles.item}>Two items</html.div>

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,8 +1,9 @@
-import {type ReactNode, useRef, useCallback} from 'react'
+import {type ComponentProps, type ReactNode, useRef, useCallback} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {ScrollAreaContext, useScrollArea} from './ScrollAreaContext'
 import {useScrollAreaRoot} from './useScrollAreaRoot'
+import {resolveLength, type Length} from '../../shared/length'
 
 // --- Root ---
 
@@ -24,20 +25,30 @@ function Root({children}: RootProps) {
 
 interface ViewportProps {
   children: ReactNode
-  maxHeight?: number | string
+  maxHeight?: Length
+  /** Extra styles for the viewport (e.g. a pointer-aware max height). */
+  style?: ComponentProps<typeof html.div>['style']
+  /** A roving-focus group owns the keyboard: drop the viewport's own tab stop
+   *  and region role. */
+  rovingOwner?: boolean
 }
 
-function Viewport({children, maxHeight}: ViewportProps) {
+function Viewport({children, maxHeight, style, rovingOwner = false}: ViewportProps) {
   const {viewportRef, viewportId} = useScrollArea()
 
   return (
     <html.div
       ref={viewportRef}
       id={viewportId}
-      tabIndex={0}
-      role="region"
-      aria-label="Scrollable content"
-      style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight)]}
+      data-duro-scroll=""
+      tabIndex={rovingOwner ? undefined : 0}
+      role={rovingOwner ? undefined : 'region'}
+      aria-label={rovingOwner ? undefined : 'Scrollable content'}
+      style={[
+        styles.viewport,
+        maxHeight != null && styles.viewportMaxHeight(resolveLength(maxHeight)),
+        style,
+      ]}
     >
       {children}
     </html.div>

package/src/components/ScrollArea/styles.css.ts

@@ -1,7 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
@@ -34,21 +35,21 @@ export const styles = css.create({
     top: 0,
     right: 0,
     bottom: 0,
-    width: 8,
+    width: sizes.scrollbar,
     flexDirection: 'column',
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingRight: 2,
+    paddingTop: microSpacing.px2,
+    paddingBottom: microSpacing.px2,
+    paddingRight: microSpacing.px2,
   },
   scrollbarHorizontal: {
     left: 0,
     right: 0,
     bottom: 0,
-    height: 8,
+    height: sizes.scrollbar,
     flexDirection: 'row',
-    paddingLeft: 2,
-    paddingRight: 2,
-    paddingBottom: 2,
+    paddingLeft: microSpacing.px2,
+    paddingRight: microSpacing.px2,
+    paddingBottom: microSpacing.px2,
   },
   scrollbarHidden: {
     opacity: 0,

package/src/components/Select/Select.meta.ts

@@ -17,6 +17,12 @@ export const meta: ComponentMeta = {
     optional: ['Value', 'Icon', 'ItemText'],
   },
   relatedTo: [
+    {
+      component: 'Popover',
+      kind: 'composition',
+      relationship:
+        'Inside Popover.Popup a Select keeps the popover open while you choose; its backdrop press and Escape close only the list',
+    },
     {
       component: 'Menu',
       kind: 'contrast',

package/src/components/Select/Select.tsx

@@ -6,6 +6,7 @@ import {SelectContext, useSelect} from './SelectContext'
 import {useSelectRoot} from './useSelectRoot'
 import {useFieldContext} from '../Field/FieldContext'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {usePopoverLayer} from '../Popover/PopoverLayerContext'
 
 // --- Root ---
 interface RootProps {
@@ -141,10 +142,16 @@ function Popup({children}: {children: ReactNode}) {
     }
   }, [open, triggerRef])
 
+  const listboxRef = useRef<HTMLDivElement>(null)
+  const backdropRef = useRef<HTMLDivElement>(null)
+  usePopoverLayer(listboxRef, {active: open})
+  usePopoverLayer(backdropRef, {active: open})
+
   const node = (
     <>
-      {open && <html.div style={styles.backdrop} onClick={close} />}
+      {open && <html.div ref={backdropRef} style={styles.backdrop} onClick={close} />}
       <html.div
+        ref={listboxRef}
         id={listboxId}
         role="listbox"
         aria-hidden={!open}

package/src/components/Select/styles.css.ts

@@ -4,6 +4,8 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -23,7 +25,7 @@ export const styles = css.create({
     fontSize: typography.fontSizeSm,
     color: colors.text,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -64,15 +66,15 @@ export const styles = css.create({
     // ancestor with `overflow: hidden` / `transform` (notably inside a Dialog).
     position: 'fixed',
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
     boxShadow: shadows.md,
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
-    minWidth: 120,
-    maxHeight: 280,
+    minWidth: sizes.labelMinW,
+    maxHeight: sizes.listMaxH,
     overflowY: 'auto',
     zIndex: 1050,
     // Re-enable pointer events: the portal mount is pointer-events: none.

package/src/components/Select/useSelectRoot.ts

@@ -88,7 +88,12 @@ export function useSelectRoot({
     function handleKeyDown(e: KeyboardEvent) {
       const order = orderRef.current
       const items = itemsRef.current
-      if (order.length === 0) return
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        close()
+        return
+      }
+      if (order.length === 0 && e.key !== 'Tab') return
 
       switch (e.key) {
         case 'ArrowDown': {
@@ -132,7 +137,6 @@ export function useSelectRoot({
           })
           break
         }
-        case 'Escape':
         case 'Tab': {
           close()
           break

package/src/components/SideNav/styles.css.ts

@@ -1,8 +1,10 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -80,8 +82,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacing.sm,
-    paddingTop: '6px',
-    paddingBottom: '6px',
+    paddingTop: microSpacing.px6,
+    paddingBottom: microSpacing.px6,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
     fontFamily: typography.fontFamily,
@@ -104,7 +106,7 @@ export const styles = css.create({
     textAlign: 'left' as const,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -125,7 +127,7 @@ export const styles = css.create({
     position: 'absolute',
     left: 0,
     top: '50%',
-    width: '3px',
+    width: sizes.navMarkerW,
     height: 0,
     transform: 'translateY(-50%)',
     borderTopRightRadius: radii.full,
@@ -136,15 +138,15 @@ export const styles = css.create({
     transitionTimingFunction: easing.standard,
   },
   markerActive: {
-    height: '18px',
+    height: sizes.navMarkerH,
   },
   itemIcon: {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: '18px',
-    height: '18px',
+    width: sizes.indicator,
+    height: sizes.indicator,
   },
   itemLabel: {
     flexGrow: 1,

package/src/components/Spinner/Spinner.tsx

@@ -1,5 +1,6 @@
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg'
 
@@ -18,7 +19,7 @@ export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
   return (
     <html.div role="status" style={styles.root}>
       <html.div style={[styles.spinner, sizeMap[size]]} aria-hidden />
-      <html.span style={styles.srOnly}>{label}</html.span>
+      <html.span style={[visuallyHidden.base, styles.srOnly]}>{label}</html.span>
     </html.div>
   )
 }