@zylem/ui 0.8.14 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.8.14",
+  "version": "0.9.0",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {

package/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,7 @@
 import { Accordion as KAccordion } from '@kobalte/core';
 import { For } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { headingTag, type HeadingLevel } from '../shared/Heading';
 
 export interface AccordionItemConfig {
   id: string;
@@ -16,6 +17,8 @@ export interface AccordionProps {
   onChange?: (value: string[]) => void;
   defaultValue?: string[];
   class?: string;
+  /** Heading level of each section header (default 3). */
+  headingLevel?: HeadingLevel;
   /** Extra class applied to each content region (e.g. scroll helpers). */
   contentClass?: string;
   /**
@@ -47,7 +50,7 @@ export function Accordion(props: AccordionProps) {
       <For each={props.items}>
         {(item) => (
           <KAccordion.Item value={item.id} class="accordion-item">
-            <KAccordion.Header class="accordion-header">
+            <KAccordion.Header as={headingTag(props.headingLevel ?? 3)} class="accordion-header">
               <KAccordion.Trigger class="accordion-trigger">
                 {item.title}
               </KAccordion.Trigger>

package/src/components/BuildLabel/BuildLabel.tsx

@@ -28,7 +28,6 @@ export function BuildLabel(props: BuildLabelProps) {
     <div
       id={BUILD_LABEL_ID}
       class="zylem-build-label"
-      aria-label="Build version"
       title={title()}
     >
       {label()}

package/src/components/BuildLabel/mount-build-label.ts

@@ -62,7 +62,6 @@ export function mountBuildLabel(
   const el = document.createElement('div');
   el.id = BUILD_LABEL_ID;
   el.className = 'zylem-build-label';
-  el.setAttribute('aria-label', 'Build version');
   el.textContent = formatBuildLabel(resolveBuildVersion(model));
   const title = packagesTitle(model.packages);
   if (title) el.title = title;

package/src/components/Callout/Callout.tsx

@@ -26,7 +26,7 @@ export function Callout(props: CalloutProps) {
       <Show when={props.title}>
         <span class="zylem-callout-title">{props.title}</span>
       </Show>
-      <span class="zylem-callout-message">{props.children}</span>
+      <div class="zylem-callout-message">{props.children}</div>
     </div>
   );
 }

package/src/components/Card/Card.css.ts

@@ -64,6 +64,7 @@ globalStyle('.zylem-card-media > img', {
 });
 
 globalStyle('.zylem-card-title', {
+  margin: 0,
   fontSize: vars.typography.fontSize,
   fontWeight: 700,
   color: '#F4FAFF',

package/src/components/Card/Card.tsx

@@ -1,13 +1,19 @@
 import { Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 
 export interface CardProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
   title?: JSX.Element;
+  /** Heading level of the title (default 3). */
+  headingLevel?: HeadingLevel;
   description?: JSX.Element;
   /** Artwork above the title: a thumbnail, preview swatch, or icon well. */
   media?: JSX.Element;
-  /** Renders hover glow + pointer cursor and click affordances. */
+  /**
+   * Renders hover glow + pointer cursor and click affordances. The card
+   * becomes a button, so it must not contain other controls.
+   */
   interactive?: boolean;
   selected?: boolean;
   /** Rendered after the description: tags, actions, metadata. */
@@ -22,6 +28,7 @@ export interface CardProps
 export function Card(props: CardProps) {
   const [local, rest] = splitProps(props, [
     'title',
+    'headingLevel',
     'description',
     'media',
     'interactive',
@@ -66,7 +73,9 @@ export function Card(props: CardProps) {
         <div class="zylem-card-media">{local.media}</div>
       </Show>
       <Show when={local.title}>
-        <div class="zylem-card-title">{local.title}</div>
+        <Heading level={local.headingLevel ?? 3} class="zylem-card-title">
+          {local.title}
+        </Heading>
       </Show>
       <Show when={local.description}>
         <div class="zylem-card-description">{local.description}</div>

package/src/components/Checkbox/Checkbox.tsx

@@ -4,6 +4,8 @@ import { Show } from 'solid-js';
 
 export interface CheckboxProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -25,10 +27,10 @@ export function Checkbox(props: CheckboxProps) {
       disabled={props.disabled}
       name={props.name}
     >
-      <KCheckbox.Input class="zylem-checkbox-input" />
+      <KCheckbox.Input class="zylem-checkbox-input" aria-label={props['aria-label']} />
       <KCheckbox.Control class="zylem-checkbox-control">
         <KCheckbox.Indicator>
-          <Check class="zylem-checkbox-icon" />
+          <Check class="zylem-checkbox-icon" aria-hidden="true" />
         </KCheckbox.Indicator>
       </KCheckbox.Control>
       <Show when={props.label}>

package/src/components/ColorPalette/ColorPalette.tsx

@@ -50,7 +50,7 @@ export interface ColorPaletteProps {
 export function ColorPalette(props: ColorPaletteProps) {
   return (
     <div
-      role="listbox"
+      role="group"
       aria-label="Palette"
       class={props.class ? `zylem-palette ${props.class}` : 'zylem-palette'}
     >

package/src/components/Console/Console.tsx

@@ -9,6 +9,8 @@ export interface ConsoleProps {
   onInput?: (value: string) => void;
   onClear?: () => void;
   readOnly?: boolean;
+  /** Accessible name of the text field (default "Console"). */
+  label?: string;
   class?: string;
   /** Extra action buttons rendered next to Clear. */
   actions?: JSX.Element;
@@ -30,6 +32,7 @@ export function Console(props: ConsoleProps) {
       <div class="zylem-console-wrapper">
         <textarea
           class="zylem-console zylem-scroll"
+          aria-label={props.label ?? 'Console'}
           value={props.value}
           spellcheck={false}
           readOnly={props.readOnly || !props.onInput}

package/src/components/Dialog/Dialog.css.ts

@@ -1,7 +1,8 @@
 import { globalStyle, keyframes } from '@vanilla-extract/css';
+import { LAYER_PORTAL_CLASS } from '../../layers/resolve-mount';
 import { vars } from '../../theme.css';
 
-const overlayEnter = keyframes({
+const backdropEnter = keyframes({
   from: { opacity: 0 },
   to: { opacity: 1 },
 });
@@ -11,26 +12,56 @@ const contentEnter = keyframes({
   to: { opacity: 1, transform: 'translateY(0) scale(1)' },
 });
 
-globalStyle('.zylem-dialog-overlay', {
+// The <dialog> is a transparent sheet over the whole viewport; the card inside
+// is the visible window. Undoes the UA's `dialog:modal` box (centered,
+// max-sized, scrolling) but never sets `display`, which would override the UA
+// rule that hides a closed dialog.
+globalStyle('.zylem-dialog', {
   position: 'fixed',
   inset: 0,
-  zIndex: vars.layers.modal,
+  width: '100%',
+  height: '100%',
+  maxWidth: 'none',
+  maxHeight: 'none',
+  margin: 0,
+  padding: 0,
+  border: 0,
+  background: 'transparent',
+  color: 'inherit',
+  font: 'inherit',
+  overflow: 'visible',
+  outline: 'none',
+});
+
+globalStyle('.zylem-dialog::backdrop', {
   background: 'rgba(5, 10, 18, 0.6)',
   backdropFilter: 'blur(3px)',
-  animation: `${overlayEnter} 0.15s ${vars.motion.easeOut}`,
+  animation: `${backdropEnter} 0.15s ${vars.motion.easeOut}`,
+});
+
+globalStyle('html:has(.zylem-dialog[open])', {
+  overflow: 'hidden',
 });
 
 globalStyle('.zylem-dialog-positioner', {
-  position: 'fixed',
-  inset: 0,
-  // One above the backdrop it shares a tier with.
-  zIndex: `calc(${vars.layers.modal} + 1)`,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '100%',
   padding: vars.spacing.lg,
 });
 
+// The scope's portal container, where overlays opened from the dialog mount.
+// Out of flow so it takes no part in centering the card, at the dialog's
+// origin, which is the viewport's.
+globalStyle(`.zylem-dialog-positioner > .${LAYER_PORTAL_CLASS}`, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+});
+
 globalStyle('.zylem-dialog-content', {
   display: 'flex',
   flexDirection: 'column',
@@ -124,20 +155,13 @@ globalStyle('.zylem-dialog-body', {
   lineHeight: 1.45,
 });
 
-// In fullscreen the body and its layer scope become flex columns so content
-// can lay out against the dialog's height (and own its scrolling).
+// In fullscreen the body becomes a flex column so content can lay out against
+// the dialog's height (and own its scrolling).
 globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-body', {
   display: 'flex',
   flexDirection: 'column',
 });
 
-globalStyle('.zylem-dialog-content[data-size="fullscreen"] .zylem-dialog-scope', {
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  minHeight: 0,
-});
-
 globalStyle('.zylem-dialog-footer', {
   flex: 'none',
   display: 'flex',

package/src/components/Dialog/Dialog.tsx

@@ -1,7 +1,7 @@
-import { Dialog as KDialog } from '@kobalte/core';
-import { Show } from 'solid-js';
+import { createUniqueId, onCleanup, onMount, Show } from 'solid-js';
 import type { JSX } from 'solid-js';
-import { createDismissGuard, LayerScope, useLayer } from '../../layers';
+import { Portal } from 'solid-js/web';
+import { LAYER_PORTAL_CLASS, LayerScope, useLayer } from '../../layers';
 import { Button } from '../Button/Button';
 import { WindowControls } from '../WindowControls/WindowControls';
 
@@ -16,7 +16,7 @@ export interface DialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   title?: JSX.Element;
-  /** Secondary line under the title. */
+  /** Secondary line under the title. Describes the dialog unless `aria-describedby` says otherwise. */
   subtitle?: JSX.Element;
   /** Content between the titles and the close control, e.g. a search field. */
   headerExtra?: JSX.Element;
@@ -28,72 +28,147 @@ export interface DialogProps {
   class?: string;
   /** Extra class on the body, e.g. to hand scrolling to the content's columns. */
   bodyClass?: string;
+  /** `alertdialog` for an urgent question the user has to answer, such as a confirmation. */
+  role?: 'dialog' | 'alertdialog';
+  /** Names the dialog when it has no `title`. */
+  'aria-label'?: string;
+  /** Id of the element that describes the dialog. */
+  'aria-describedby'?: string;
 }
 
 /**
  * HyperGlass dialog: glass window with a glossy title bar and jewel close
  * control, centered over a dimmed backdrop.
  *
- * The body is a {@link LayerScope}, so overlays opened from inside the dialog
- * stack against the dialog's own content rather than against the page. A tooltip
- * on a dialog field floats over the dialog, but a menu belonging to the page
- * behind still wins — which is what keeps a dialog from leaking overlays across
- * the rest of the app.
+ * A native `<dialog>` opened with `showModal()`: it renders in the top layer,
+ * above everything else on the page, which is inert while it is open. Escape
+ * and a click outside the card ask to close it, and closing hands focus back
+ * to whatever had it before.
+ *
+ * The card shares a {@link LayerScope} with the scope's portal container, so
+ * overlays opened from the dialog render inside the `<dialog>` (outside it they
+ * would be inert) but beside the card rather than in it, where the card's
+ * clipping would cut them off.
  */
 export function Dialog(props: DialogProps) {
   const layer = useLayer('modal');
-  const dismiss = createDismissGuard();
 
   return (
-    <KDialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+    <>
       {/*
         A dialog is controlled and renders no trigger, so it has nothing in the
         page to resolve its tree from. This marker sits where the dialog was
         declared, which is enough to find an enclosing shadow root.
       */}
       <span ref={layer.anchorRef} style={{ display: 'none' }} aria-hidden="true" />
-      <Show when={layer.mount()} keyed>
+      <Show when={props.open && layer.mount()} keyed>
         {(mount) => (
-          <KDialog.Portal mount={mount}>
-            <KDialog.Overlay class="zylem-dialog-overlay" />
-            <div class="zylem-dialog-positioner">
-              <KDialog.Content
-                ref={dismiss.ref}
-                class={props.class ? `zylem-dialog-content ${props.class}` : 'zylem-dialog-content'}
-                data-size={props.size}
-                onInteractOutside={dismiss.onInteractOutside}
-              >
-                <div class="zylem-dialog-header">
-                  <Show when={props.title || props.subtitle}>
-                    <div class="zylem-dialog-titles">
-                      <Show when={props.title}>
-                        <KDialog.Title class="zylem-dialog-title">{props.title}</KDialog.Title>
-                      </Show>
-                      <Show when={props.subtitle}>
-                        <p class="zylem-dialog-subtitle">{props.subtitle}</p>
-                      </Show>
-                    </div>
-                  </Show>
-                  <Show when={props.headerExtra}>
-                    <div class="zylem-dialog-header-extra">{props.headerExtra}</div>
-                  </Show>
-                  <WindowControls onClose={() => props.onOpenChange?.(false)} />
-                </div>
-                <KDialog.Description
-                  as="div"
-                  class={props.bodyClass ? `zylem-dialog-body ${props.bodyClass}` : 'zylem-dialog-body'}
-                >
-                  <LayerScope class="zylem-dialog-scope">{props.children}</LayerScope>
-                </KDialog.Description>
-                <Show when={props.footer}>
-                  <div class="zylem-dialog-footer">{props.footer}</div>
-                </Show>
-              </KDialog.Content>
-            </div>
-          </KDialog.Portal>
+          <Portal mount={mount}>
+            <DialogWindow {...props} />
+          </Portal>
         )}
       </Show>
-    </KDialog.Root>
+    </>
+  );
+}
+
+/** Overlays a click outside the card dismisses on its own, without closing the dialog too. */
+const DISMISSABLE_OVERLAY = '[role="menu"], [role="listbox"], [role="dialog"]';
+
+/** The `<dialog>` itself, mounted for as long as the dialog is open. */
+function DialogWindow(props: DialogProps) {
+  const titleId = createUniqueId();
+  const subtitleId = createUniqueId();
+  let dialog!: HTMLDialogElement;
+  let disposed = false;
+  let pressedBackdrop = false;
+
+  const close = () => props.onOpenChange?.(false);
+  // Outside the card means on the dialog itself or on the positioner filling it.
+  const isBackdrop = (target: EventTarget | null | undefined) =>
+    target === dialog || target === dialog.firstElementChild;
+  const hasOpenOverlay = () =>
+    dialog
+      .querySelector(`.zylem-dialog-positioner > .${LAYER_PORTAL_CLASS}`)
+      ?.querySelector(DISMISSABLE_OVERLAY) != null;
+
+  onMount(() => {
+    // jsdom has no `showModal()`.
+    if (typeof dialog.showModal === 'function') dialog.showModal();
+    else dialog.setAttribute('open', '');
+
+    // Kobalte dismisses an open overlay from a capture listener on `document`,
+    // so this has to run first, on `window`, to still see it open.
+    const onPointerDown = (event: PointerEvent) => {
+      pressedBackdrop = isBackdrop(event.composedPath()[0]) && !hasOpenOverlay();
+    };
+    window.addEventListener('pointerdown', onPointerDown, true);
+    onCleanup(() => window.removeEventListener('pointerdown', onPointerDown, true));
+  });
+
+  onCleanup(() => {
+    disposed = true;
+    // Runs before the portal detaches the element: only a dialog closed while
+    // still in the document returns focus to whatever opened it.
+    if (dialog.open) dialog.close();
+  });
+
+  return (
+    <dialog
+      ref={dialog}
+      class="zylem-dialog"
+      role={props.role}
+      aria-labelledby={props.title ? titleId : undefined}
+      aria-label={props['aria-label']}
+      aria-describedby={props['aria-describedby'] ?? (props.subtitle ? subtitleId : undefined)}
+      onCancel={(event) => {
+        // `open` stays the source of truth: the host closes the dialog.
+        event.preventDefault();
+        close();
+      }}
+      onClose={() => {
+        // The browser closed it anyway, e.g. a second Escape it would not let be prevented.
+        if (!disposed) close();
+      }}
+      onClick={(event) => {
+        if (pressedBackdrop && isBackdrop(event.target)) close();
+        pressedBackdrop = false;
+      }}
+    >
+      <LayerScope class="zylem-dialog-positioner">
+        <div
+          class={props.class ? `zylem-dialog-content ${props.class}` : 'zylem-dialog-content'}
+          data-size={props.size}
+        >
+          <div class="zylem-dialog-header">
+            <Show when={props.title || props.subtitle}>
+              <div class="zylem-dialog-titles">
+                <Show when={props.title}>
+                  <h2 id={titleId} class="zylem-dialog-title">
+                    {props.title}
+                  </h2>
+                </Show>
+                <Show when={props.subtitle}>
+                  <p id={subtitleId} class="zylem-dialog-subtitle">
+                    {props.subtitle}
+                  </p>
+                </Show>
+              </div>
+            </Show>
+            <Show when={props.headerExtra}>
+              <div class="zylem-dialog-header-extra">{props.headerExtra}</div>
+            </Show>
+            <WindowControls onClose={close} closeLabel="Close dialog" />
+          </div>
+          <div class={props.bodyClass ? `zylem-dialog-body ${props.bodyClass}` : 'zylem-dialog-body'}>
+            {props.children}
+          </div>
+          <Show when={props.footer}>
+            <div class="zylem-dialog-footer">{props.footer}</div>
+          </Show>
+        </div>
+      </LayerScope>
+    </dialog>
   );
 }
 
@@ -110,21 +185,27 @@ export interface ConfirmDialogProps {
 
 /**
  * Confirmation dialog built on Dialog — a drop-in replacement for
- * `window.confirm()` flows.
+ * `window.confirm()` flows. An `alertdialog` described by its message; it
+ * opens with focus on Confirm, or on Cancel when the action is destructive.
  */
 export function ConfirmDialog(props: ConfirmDialogProps) {
+  const messageId = createUniqueId();
+
   return (
     <Dialog
       open={props.open}
       onOpenChange={props.onOpenChange}
+      role="alertdialog"
+      aria-describedby={messageId}
       title={props.title ?? 'Confirm'}
       footer={
         <>
-          <Button variant="ghost" onClick={() => props.onOpenChange(false)}>
+          <Button variant="ghost" autofocus={props.danger} onClick={() => props.onOpenChange(false)}>
             {props.cancelLabel ?? 'Cancel'}
           </Button>
           <Button
             variant={props.danger ? 'danger' : 'primary'}
+            autofocus={!props.danger}
             onClick={() => {
               props.onConfirm();
               props.onOpenChange(false);
@@ -135,7 +216,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
         </>
       }
     >
-      {props.message}
+      <div id={messageId}>{props.message}</div>
     </Dialog>
   );
 }

package/src/components/FrameStrip/FrameStrip.tsx

@@ -28,7 +28,7 @@ export function FrameStrip(props: FrameStripProps) {
           <span class="zylem-frame-strip-title">{local.title}</span>
         </Show>
       </div>
-      <div class="zylem-frame-strip-row zylem-scroll" role="listbox" aria-label={local.label ?? 'Frames'}>
+      <div class="zylem-frame-strip-row zylem-scroll" role="group" aria-label={local.label ?? 'Frames'}>
         {local.children}
       </div>
     </div>
@@ -51,10 +51,9 @@ export function FrameThumb(props: FrameThumbProps) {
   return (
     <button
       type="button"
-      role="option"
       class={props.class ? `zylem-frame-thumb ${props.class}` : 'zylem-frame-thumb'}
       data-selected={props.selected ? '' : undefined}
-      aria-selected={props.selected ? 'true' : 'false'}
+      aria-pressed={props.selected ? 'true' : 'false'}
       aria-label={props.label ?? `Frame ${props.index}`}
       onClick={props.onClick}
     >

package/src/components/ItemPicker/ItemPicker.tsx

@@ -1,11 +1,14 @@
-import { For, Show, createMemo, createSignal, type JSX } from 'solid-js';
+import { For, Show, createMemo, createSignal, createUniqueId, type JSX } from 'solid-js';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { filterItems, groupItems, type PickerItem } from './filter-items';
 
 export interface ItemPickerProps<T extends PickerItem = PickerItem> {
   items: T[];
   onSelect: (item: T) => void;
-  /** Marked as the current choice. */
+  /**
+   * Marked as the current choice. Given at all (`null` for none), the items
+   * become toggles that expose it as `aria-pressed`.
+   */
   selectedId?: string | null | undefined;
   /** Hide the search field for a list short enough not to need one. */
   searchable?: boolean | undefined;
@@ -34,6 +37,9 @@ export function ItemPicker<T extends PickerItem>(props: ItemPickerProps<T>) {
 
   const searchable = () => props.searchable !== false;
   const groups = createMemo(() => groupItems(filterItems(props.items, query())));
+  /** Items are toggles only when the caller tracks a choice (`null` is "none yet"). */
+  const pressed = (item: T) =>
+    props.selectedId === undefined ? undefined : props.selectedId === item.id;
 
   return (
     <div class={props.class ? `zylem-picker ${props.class}` : 'zylem-picker'}>
@@ -68,37 +74,44 @@ export function ItemPicker<T extends PickerItem>(props: ItemPickerProps<T>) {
         >
           <div class="zylem-picker__groups zylem-scroll">
             <For each={groups()}>
-              {(group) => (
-                <div class="zylem-picker__group">
-                  <h4 class="zylem-picker__group-title">{group.group}</h4>
-                  <For each={group.items}>
-                    {(item) => (
-                      <button
-                        type="button"
-                        class="zylem-picker__item"
-                        disabled={item.disabled}
-                        data-selected={
-                          props.selectedId === item.id ? '' : undefined
-                        }
-                        title={item.description}
-                        onClick={() => props.onSelect(item)}
-                      >
-                        <Show when={item.icon}>
-                          {(icon) => (
-                            <span
-                              class="zylem-picker__item-glyph"
-                              // Markup from the caller's own registry, in the
-                              // caller's own realm; not a new trust boundary.
-                              innerHTML={icon()}
-                            />
-                          )}
-                        </Show>
-                        <span class="zylem-picker__item-label">{item.label}</span>
-                      </button>
-                    )}
-                  </For>
-                </div>
-              )}
+              {(group) => {
+                const titleId = createUniqueId();
+                return (
+                  <div class="zylem-picker__group" role="group" aria-labelledby={titleId}>
+                    <div id={titleId} class="zylem-picker__group-title">
+                      {group.group}
+                    </div>
+                    <For each={group.items}>
+                      {(item) => (
+                        <button
+                          type="button"
+                          class="zylem-picker__item"
+                          disabled={item.disabled}
+                          data-selected={
+                            props.selectedId === item.id ? '' : undefined
+                          }
+                          aria-pressed={pressed(item)}
+                          title={item.description}
+                          onClick={() => props.onSelect(item)}
+                        >
+                          <Show when={item.icon}>
+                            {(icon) => (
+                              <span
+                                class="zylem-picker__item-glyph"
+                                aria-hidden="true"
+                                // Markup from the caller's own registry, in the
+                                // caller's own realm; not a new trust boundary.
+                                innerHTML={icon()}
+                              />
+                            )}
+                          </Show>
+                          <span class="zylem-picker__item-label">{item.label}</span>
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                );
+              }}
             </For>
           </div>
         </Show>

package/src/components/MenuButton/MenuButton.tsx

@@ -140,6 +140,7 @@ export function MenuButton(props: MenuButtonProps) {
               <KPopover.Content
                 ref={dismiss.ref}
                 class="zylem-menu-button__panel"
+                aria-label={props.label}
                 onInteractOutside={dismiss.onInteractOutside}
               >
                 {props.menu(() => setOpen(false))}