@boostdev/design-system-components 2.8.0 → 2.11.0

package/src/components/interaction/Button/Button.module.css

@@ -46,19 +46,20 @@
     white-space: nowrap;
     line-height: 1;
 
-    /* Identity tokens — override --button_color + --button_on-color to re-theme */
-    --button_color:        var(--bds-color_interactive);
-    --button_on-color:     var(--bds-color_on-interactive);
-
-    /* Text-safe variant of --button_color for use on page background (outline text/border) */
-    --button_color--on-bg: var(--bds-color_interactive_on-bg);
-
     /* Layered cascade: the consumer-facing overrides (--button_bg, --button_text,
        --button_border) are read OUTERMOST so an ancestor-set value always wins
        over variant + hover defaults. Variants and hover write to the inner
-       --button_*--variant slot, never to the public tokens. */
-    background-color: var(--button_bg, var(--button_bg--variant, var(--button_color)));
-    color:            var(--button_text, var(--button_text--variant, var(--button_on-color)));
+       --button_*--variant slot, never to the public tokens.
+
+       Identity tokens (--button_color, --button_on-color, --button_color--on-bg —
+       "override --button_color + --button_on-color to re-theme") are intentionally
+       NOT declared on this rule. They only ever appear as var() fallbacks (here and
+       in the variant/hover rules below), so an ancestor can set them and the value
+       inherits through untouched instead of being shadowed by a same-element
+       declaration. --button_color--on-bg is the text-safe variant of --button_color
+       for use on page background (outline text/border). */
+    background-color: var(--button_bg, var(--button_bg--variant, var(--button_color, var(--bds-color_interactive))));
+    color:            var(--button_text, var(--button_text--variant, var(--button_on-color, var(--bds-color_on-interactive))));
     --bdc_color:      var(--button_border, var(--button_border--variant, transparent));
 
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
@@ -74,8 +75,8 @@
   .button.--outline,
   .button.--ghost /* @deprecated — use variant="outline" */ {
     --button_bg--variant:     var(--button_bg--outline, transparent);
-    --button_text--variant:   var(--button_text--outline, var(--button_color--on-bg));
-    --button_border--variant: var(--button_border--outline, var(--button_color--on-bg));
+    --button_text--variant:   var(--button_text--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
+    --button_border--variant: var(--button_border--outline, var(--button_color--on-bg, var(--bds-color_interactive_on-bg)));
   }
 
   .button.--size_small {
@@ -180,9 +181,17 @@
   @media (hover: hover) and (pointer: fine) {
     .button.--outline:hover,
     .button.--ghost:hover {
-      --button_bg--variant:     var(--button_bg--outline-hover, var(--button_color));
-      --button_text--variant:   var(--button_text--outline-hover, var(--button_on-color));
+      --button_bg--variant:     var(--button_bg--outline-hover, var(--button_color, var(--bds-color_interactive)));
+      --button_text--variant:   var(--button_text--outline-hover, var(--button_on-color, var(--bds-color_on-interactive)));
       --button_border--variant: var(--button_border--outline-hover, transparent);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button.--hasPulse,
+    .button:hover .iconStart svg,
+    .button:hover .iconEnd svg {
+      animation: none;
+    }
+  }
 }

package/src/components/interaction/Button/Button.spec.tsx

@@ -63,4 +63,24 @@ describe('Button', () => {
     render(<Button>Click</Button>);
     expect(screen.getByRole('button').className).not.toContain('--iconOnly');
   });
+
+  it('keeps the disabled anchor non-tabbable even if a consumer passes tabIndex', () => {
+    const { container } = render(
+      <Button href="/path" disabled tabIndex={0}>
+        Disabled link
+      </Button>
+    );
+    const link = container.querySelector('a');
+    expect(link).toHaveAttribute('tabindex', '-1');
+    expect(link).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('keeps aria-disabled=true on a disabled anchor even if a consumer passes aria-disabled', () => {
+    const { container } = render(
+      <Button href="/path" disabled aria-disabled={false}>
+        Disabled link
+      </Button>
+    );
+    expect(container.querySelector('a')).toHaveAttribute('aria-disabled', 'true');
+  });
 });

package/src/components/interaction/Button/Button.tsx

@@ -99,6 +99,7 @@ export function Button({
   if (href) {
     return (
       <a
+        {...rest}
         className={classNames}
         href={disabled ? undefined : href}
         target={target}
@@ -106,7 +107,6 @@ export function Button({
         aria-disabled={disabled}
         tabIndex={disabled ? -1 : undefined}
         onClick={handleAnchorClick}
-        {...rest}
       >
         {content}
       </a>
@@ -115,11 +115,11 @@ export function Button({
 
   return (
     <button
+      {...rest}
       type={type}
       className={classNames}
       disabled={disabled}
       onClick={handleButtonClick}
-      {...rest}
     >
       {content}
     </button>

package/src/components/interaction/Command/Command.mdx

@@ -32,6 +32,8 @@ Keyboard-first command palette for searching and executing actions. Commonly tri
 <tr><td>`--command_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text and icon colour</td></tr>
 <tr><td>`--command_shadow`</td><td>`var(--bds-shadow_xl)`</td><td>Panel box shadow</td></tr>
 <tr><td>`--command_border`</td><td>`none`</td><td>Panel border</td></tr>
+<tr><td>`--command_radius`</td><td>`var(--bds-border_radius--m)`</td><td>Panel corner radius</td></tr>
+<tr><td>`--command_kbd-radius`</td><td>`var(--bds-border_radius--xs)`</td><td>Corner radius of the `Esc` hint and shortcut `<kbd>` chips</td></tr>
 <tr><td>`--command_item-bg--active`</td><td>`var(--bds-color_bg--subtle)`</td><td>Active/highlighted item background</td></tr>
 </tbody>
 </table>
@@ -39,8 +41,9 @@ Keyboard-first command palette for searching and executing actions. Commonly tri
 
 ## Accessibility
 
-- Input has `role="combobox"` with `aria-controls` pointing to the results list
+- Input has `role="combobox"`, a constant `aria-label="Search commands"` (independent of the `placeholder`), and `aria-controls` pointing to the results list
 - Results list uses `role="listbox"` with `role="option"` items
 - `aria-activedescendant` tracks the highlighted option
-- Keyboard: `↑`/`↓` to navigate, `Enter` to execute, `Escape` to dismiss
+- Keyboard: `↑`/`↓` to navigate, `Enter` to execute the highlighted result (no-op when there are no results), `Escape` to dismiss
+- A permanently mounted `aria-live="polite"` region announces the no-results state so screen readers reliably pick up the change
 - Body scroll is locked while open (`overflow: hidden`) and restored on close or unmount

package/src/components/interaction/Command/Command.module.css

@@ -2,7 +2,7 @@
   .dialog {
     padding: 0;
     border: none;
-    border-radius: var(--bds-border_radius--m);
+    border-radius: var(--command_radius, var(--bds-border_radius--m));
     background: transparent;
     inline-size: min(40rem, 90vw);
     max-block-size: 70vh;
@@ -20,13 +20,13 @@
     flex-direction: column;
     background-color: var(--command_color, var(--bds-color_bg));
     color: var(--command_on-color, var(--bds-color_on-bg));
-    border-radius: var(--bds-border_radius--m);
     overflow: hidden;
     max-block-size: 70vh;
     border: var(--command_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
 
+    border-radius: var(--command_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
   }
 
@@ -49,7 +49,6 @@
   .search {
     flex: 1;
     border: none;
-    outline: none;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     color: var(--bds-color_on-bg);
@@ -57,6 +56,11 @@
     min-inline-size: 0;
   }
 
+  .search:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+
   .search::placeholder {
     color: var(--bds-color_on-bg);
   }
@@ -64,8 +68,8 @@
   .escHint {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
-    border-radius: var(--bds-border_radius--xs);
-    padding: 0.1em 0.4em;
+    border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
+    padding: var(--bds-space_xxxs) var(--bds-space_xxs);
     flex-shrink: 0;
 
     --bdc_color: currentcolor;
@@ -123,8 +127,8 @@
   .shortcut {
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
-    border-radius: var(--bds-border_radius--xs);
-    padding: 0.1em 0.4em;
+    border-radius: var(--command_kbd-radius, var(--bds-border_radius--xs));
+    padding: var(--bds-space_xxxs) var(--bds-space_xxs);
 
     --bdc_color: currentcolor;
 
@@ -138,4 +142,16 @@
     color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
   }
+
+  /* Visually hidden but still exposed to assistive tech — used for the
+     permanently mounted no-results live region announcement. */
+  .srOnly {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 }

package/src/components/interaction/Command/Command.spec.tsx

@@ -59,6 +59,41 @@ describe('Command', () => {
     expect(screen.getByText('Save current file')).toBeInTheDocument();
   });
 
+  it('exposes an accessible name on the search input independent of the placeholder', () => {
+    render(<Command isOpen items={items} onClose={() => {}} placeholder="Type to search…" />);
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Search commands');
+  });
+
+  it('does not close on Enter when there are no matching results', async () => {
+    const onClose = vi.fn();
+    render(<Command isOpen items={items} onClose={onClose} />);
+    const input = screen.getByRole('combobox');
+    await userEvent.type(input, 'zzz');
+    expect(screen.getByText(/no results/i)).toBeInTheDocument();
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('selects and closes on Enter when a result is highlighted', () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+    const testItems: CommandItem[] = [{ id: 'x', label: 'Action', onSelect }];
+    render(<Command isOpen items={testItems} onClose={onClose} />);
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('announces the no-results state via a persistent live region', async () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    const liveRegion = document.querySelector('[aria-live="polite"]')!;
+    expect(liveRegion).toBeInTheDocument();
+    expect(liveRegion).toHaveTextContent('');
+
+    await userEvent.type(screen.getByRole('combobox'), 'zzz');
+    expect(liveRegion).toHaveTextContent(/nothing matches/i);
+  });
+
   it('dialog has an id for invoker targeting', () => {
     render(<Command isOpen items={items} onClose={() => {}} />);
     expect(document.querySelector('dialog')).toHaveAttribute('id');

package/src/components/interaction/Command/Command.tsx

@@ -17,7 +17,7 @@ export interface CommandItem {
   onSelect: () => void;
 }
 
-interface CommandProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
+export interface CommandProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
   isOpen: boolean;
   onOpen?: () => void;
   onClose: () => void;
@@ -125,8 +125,11 @@ export function Command({
       setActiveIndex(i => Math.max(i - 1, 0));
     } else if (e.key === 'Enter') {
       e.preventDefault();
-      filtered[activeIndex]?.onSelect();
-      onClose();
+      const item = filtered[activeIndex];
+      if (item) {
+        item.onSelect();
+        onClose();
+      }
     } else if (e.key === 'Escape') {
       onClose();
     }
@@ -157,6 +160,7 @@ export function Command({
             ref={inputRef}
             type="search"
             role="combobox"
+            aria-label="Search commands"
             aria-expanded={filtered.length > 0}
             aria-controls={listboxId}
             aria-autocomplete="list"
@@ -169,6 +173,13 @@ export function Command({
           <kbd className={css.escHint}>Esc</kbd>
         </div>
 
+        {/* Permanently mounted so screen readers reliably announce the
+            transition into/out of the no-results state; only its text
+            content toggles rather than the region itself mounting/unmounting. */}
+        <div className={css.srOnly} aria-live="polite">
+          {filtered.length === 0 ? `Nothing matches “${query}”` : ''}
+        </div>
+
         {filtered.length > 0 ? (
           <ul id={listboxId} role="listbox" className={css.list} aria-label="Commands">
             {Array.from(groups.entries()).map(([group, groupItems]) => (
@@ -199,7 +210,7 @@ export function Command({
             ))}
           </ul>
         ) : (
-          <div className={css.empty} aria-live="polite">No results for &ldquo;{query}&rdquo;</div>
+          <div className={css.empty}>No results for &ldquo;{query}&rdquo;</div>
         )}
       </div>
     </dialog>

package/src/components/interaction/Command/index.ts

@@ -1,2 +1,2 @@
 export { Command } from './Command';
-export type { CommandItem } from './Command';
+export type { CommandItem, CommandProps } from './Command';

package/src/components/interaction/Dialog/Dialog.mdx

@@ -35,9 +35,9 @@ Modal overlay using the native `<dialog>` element. Traps focus inside the dialog
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--dialog_color`</td><td>`var(--bds-grey--subtle)`</td><td>Dialog background</td></tr>
-<tr><td>`--dialog_on-color`</td><td>`var(--bds-on-grey--subtle)`</td><td>Dialog text colour</td></tr>
-<tr><td>`--dialog_backdrop-color`</td><td>`rgb(0 0 0 / 50%)`</td><td>Backdrop overlay colour</td></tr>
+<tr><td>`--dialog_color`</td><td>`var(--bds-color_grey--subtle)`</td><td>Dialog background</td></tr>
+<tr><td>`--dialog_on-color`</td><td>`var(--bds-color_on-grey--subtle)`</td><td>Dialog text colour</td></tr>
+<tr><td>`--color_backdrop`</td><td>`rgb(0 0 0 / 50%)`</td><td>Backdrop overlay colour (shared hook token, not `--dialog_*`-prefixed)</td></tr>
 </tbody>
 </table>
 
@@ -47,7 +47,7 @@ Modal overlay using the native `<dialog>` element. Traps focus inside the dialog
 - Opens via `showModal()` — provides native focus trapping and `Escape` key to close
 - Backdrop click calls `onClose`
 - Body scroll is locked while open (`overflow: hidden`)
-- `onClose` is also called on `Escape` via the native `cancel` event
+- `Escape` closes the dialog via the native `cancel` event; when `onClose` is provided (controlled usage) it is called so the parent can sync `isOpen`
 
 ## Accessibility
 

package/src/components/interaction/Dialog/Dialog.module.css

@@ -5,6 +5,8 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
 
+    display: flex;
+    flex-direction: column;
     border-radius: var(--dialog_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
     background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
@@ -12,9 +14,18 @@
     padding: var(--bds-space_l);
     max-inline-size: 90svw;
     max-block-size: 90svh;
+
+    /* visible (not hidden) so the close button, offset outside the box via
+       inset-*: -1em, is never clipped; .dialogContent scrolls internally. */
     overflow: visible;
   }
 
+  /* A native <dialog> is display:none until opened; the flex layout above
+     would otherwise override the UA rule and render the dialog permanently. */
+  .dialog:not([open]) {
+    display: none;
+  }
+
   .dialogContent {
     display: grid;
     gap: var(--bds-grid_gap);
@@ -43,6 +54,15 @@
     cursor: pointer;
   }
 
+  /* Extend the hit area to the 44x44px minimum touch target (WCAG 2.5.5)
+     without growing the visual 2em disc. */
+  .closeButton::after {
+    content: '';
+    position: absolute;
+    inset-block: -0.5rem;
+    inset-inline: -0.5rem;
+  }
+
   .closeButton:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);

package/src/components/interaction/Dialog/Dialog.spec.tsx

@@ -103,6 +103,26 @@ describe('Dialog', () => {
     document.body.removeChild(trigger);
   });
 
+  describe('cancel event (Escape key)', () => {
+    it('does not block the native Escape close when onClose is not provided', () => {
+      render(<Dialog isOpen><span>Content</span></Dialog>);
+      const dialog = document.querySelector('dialog')!;
+      const event = new Event('cancel', { cancelable: true });
+      dialog.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it('prevents the native close and calls onClose on Escape when controlled', () => {
+      const onClose = vi.fn();
+      render(<Dialog isOpen onClose={onClose}><span>Content</span></Dialog>);
+      const dialog = document.querySelector('dialog')!;
+      const event = new Event('cancel', { cancelable: true });
+      dialog.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(true);
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
   describe('command event (Invoker Commands API)', () => {
     function makeCommandEvent(command: string) {
       const event = new Event('command');

package/src/components/interaction/Dialog/Dialog.tsx

@@ -9,7 +9,7 @@ import css from './Dialog.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface DialogProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
+export interface DialogProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
   isOpen?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
@@ -69,8 +69,13 @@ export function Dialog({ children, id: idProp, isOpen = false, className, onOpen
   };
 
   const handleCancel = (e: React.SyntheticEvent) => {
-    e.preventDefault();
-    onClose?.();
+    // Only suppress the native close-on-Escape when the component is actually
+    // controlled — otherwise preventDefault() would leave Escape permanently
+    // dead in uncontrolled/invoker-only usage (no onClose to sync state).
+    if (onClose) {
+      e.preventDefault();
+      onClose();
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {

package/src/components/interaction/Dialog/index.ts

@@ -1 +1,2 @@
 export { Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';

package/src/components/interaction/Drawer/Drawer.mdx

@@ -38,6 +38,7 @@ Slide-in panel from the left or right edge of the viewport. Use for navigation,
 <tbody>
 <tr><td>`--drawer_color`</td><td>`var(--bds-color_bg)`</td><td>Panel background colour</td></tr>
 <tr><td>`--drawer_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--drawer_shadow`</td><td>`var(--bds-shadow_xl)`</td><td>Panel drop shadow</td></tr>
 <tr><td>`--drawer_close-radius`</td><td>`var(--bds-border_radius--circle)`</td><td>Close button border radius</td></tr>
 <tr><td>`--drawer_close-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Close button background on hover</td></tr>
 </tbody>
@@ -46,6 +47,8 @@ Slide-in panel from the left or right edge of the viewport. Use for navigation,
 
 ## Accessibility
 
-- Uses `<dialog>` internally — provides native focus trapping and `Escape` to close
-- `aria-label` on the dialog describes the drawer's purpose
+- Uses `<dialog>` internally — opened via `showModal()`, which sets `aria-modal="true"` and moves focus inside automatically
+- `Tab`/`Shift+Tab` are explicitly trapped within the drawer's focusable elements while open
+- The `title` is wired to the dialog via `aria-labelledby` automatically, giving the drawer an accessible name — unless the consumer supplies their own `aria-label`/`aria-labelledby`, which takes priority
+- Backdrop click and `Escape` both call `onClose` (backdrop detection uses `event.target`, so keyboard-activated clicks on inner controls never close the drawer)
 - Body scroll locked while open

package/src/components/interaction/Drawer/Drawer.module.css

@@ -14,7 +14,7 @@
     background-color: var(--drawer_color, var(--bds-color_bg));
     color: var(--drawer_on-color, var(--bds-color_on-bg));
     border: none;
-    box-shadow: var(--bds-shadow_xl);
+    box-shadow: var(--drawer_shadow, var(--bds-shadow_xl));
     overflow: hidden;
     translate: 100% 0;
     transition:
@@ -23,11 +23,34 @@
       overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
   }
 
+  /* Closed native <dialog> must be display:none — the flex layout above would
+     otherwise keep it rendered (off-screen, focusable, causing overflow). The
+     display/overlay allow-discrete transitions above animate the none↔flex. */
+  .drawer:not([open]) {
+    display: none;
+  }
+
+  /*
+   * `translate` is a physical transform — it always moves along the physical
+   * x-axis, regardless of writing direction. Because `side="right"` is
+   * positioned with the logical `inset-inline-end` (which flips to the
+   * physical left edge in RTL), the off-screen translate direction must flip
+   * to match, or the panel slides the wrong way and never leaves the
+   * viewport. `:dir(rtl)` inverts both sides' resting translate value.
+   */
+  .drawer:dir(rtl) {
+    translate: -100% 0;
+  }
+
   .--side_left.drawer {
     inset-inline: 0 auto;
     translate: -100% 0;
   }
 
+  .--side_left.drawer:dir(rtl) {
+    translate: 100% 0;
+  }
+
   .drawer[open] {
     translate: 0 0;
   }
@@ -37,9 +60,17 @@
       translate: 100% 0;
     }
 
+    .drawer[open]:dir(rtl) {
+      translate: -100% 0;
+    }
+
     .--side_left.drawer[open] {
       translate: -100% 0;
     }
+
+    .--side_left.drawer[open]:dir(rtl) {
+      translate: 100% 0;
+    }
   }
 
   .drawer::backdrop {
@@ -76,8 +107,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    inline-size: 2rem;
-    block-size: 2rem;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
     border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
     cursor: pointer;
     transition: var(--bds-animation_transition);

package/src/components/interaction/Drawer/Drawer.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Drawer } from './Drawer';
 
@@ -109,6 +109,72 @@ describe('Drawer', () => {
     document.body.removeChild(trigger);
   });
 
+  it('closes when the backdrop (the dialog element itself) is clicked', () => {
+    const onClose = vi.fn();
+    render(<Drawer isOpen title="Menu" onClose={onClose}>Content</Drawer>);
+    const dialog = document.querySelector('dialog')!;
+    fireEvent.click(dialog);
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('does not close when a keyboard-activated control inside the drawer is clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <Drawer isOpen title="Menu" onClose={onClose}>
+        <button type="button">Inner action</button>
+      </Drawer>,
+    );
+    const innerButton = screen.getByRole('button', { name: 'Inner action' });
+    // Keyboard-activated clicks report clientX/clientY at 0,0 — a coordinate-based
+    // backdrop check would incorrectly treat this as "outside" the panel.
+    fireEvent.click(innerButton, { clientX: 0, clientY: 0 });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('associates the title with the dialog via aria-labelledby', () => {
+    render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
+    const dialog = document.querySelector('dialog')!;
+    const labelledBy = dialog.getAttribute('aria-labelledby');
+    expect(labelledBy).toBeTruthy();
+    expect(document.getElementById(labelledBy!)).toHaveTextContent('Settings');
+  });
+
+  it('does not set aria-labelledby when the consumer supplies aria-label', () => {
+    render(<Drawer isOpen title="Settings" aria-label="Custom label" onClose={() => {}}>Content</Drawer>);
+    const dialog = document.querySelector('dialog')!;
+    expect(dialog).not.toHaveAttribute('aria-labelledby');
+  });
+
+  it('wraps Tab focus from the last focusable element back to the first', () => {
+    render(
+      <Drawer isOpen title="Menu" onClose={() => {}}>
+        <button type="button">First</button>
+        <button type="button">Last</button>
+      </Drawer>,
+    );
+    const dialog = document.querySelector('dialog')!;
+    const closeButton = screen.getByRole('button', { name: 'Close drawer' });
+    const last = screen.getByRole('button', { name: 'Last' });
+    last.focus();
+    fireEvent.keyDown(dialog, { key: 'Tab' });
+    expect(document.activeElement).toBe(closeButton);
+  });
+
+  it('wraps Shift+Tab focus from the first focusable element to the last', () => {
+    render(
+      <Drawer isOpen title="Menu" onClose={() => {}}>
+        <button type="button">First</button>
+        <button type="button">Last</button>
+      </Drawer>,
+    );
+    const dialog = document.querySelector('dialog')!;
+    const closeButton = screen.getByRole('button', { name: 'Close drawer' });
+    const last = screen.getByRole('button', { name: 'Last' });
+    closeButton.focus();
+    fireEvent.keyDown(dialog, { key: 'Tab', shiftKey: true });
+    expect(document.activeElement).toBe(last);
+  });
+
   describe('command event (Invoker Commands API)', () => {
     function makeCommandEvent(command: string) {
       const event = new Event('command');