@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/src/SideNav/SideNav.test.tsx

@@ -337,7 +337,9 @@ describe('SideNavHeading', () => {
   it('whole heading is popover trigger when menu provided without hrefs', () => {
     render(<SideNavHeading heading="My App" menu={<div>Menu</div>} />);
     const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+    // The popup is no longer a dialog (role: 'none' on usePopover), so the
+    // trigger advertises a generic popup rather than aria-haspopup="dialog".
+    expect(button).toHaveAttribute('aria-haspopup', 'true');
     expect(button).toHaveAttribute('aria-expanded', 'false');
   });
 
@@ -351,7 +353,7 @@ describe('SideNavHeading', () => {
     const button = screen.getByRole('button');
     // The trigger button uses aria attributes from usePopover and
     // an onClick handler from useMenuHover for click-to-lock toggle.
-    expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+    expect(button).toHaveAttribute('aria-haspopup', 'true');
     expect(button).toHaveAttribute('aria-expanded');
   });
 
@@ -364,13 +366,92 @@ describe('SideNavHeading', () => {
       />,
     );
     const button = screen.getByRole('button', {name: 'Open menu'});
-    expect(button).toHaveAttribute('aria-haspopup', 'dialog');
+    expect(button).toHaveAttribute('aria-haspopup', 'true');
   });
 
   it('passes data-testid', () => {
     render(<SideNavHeading heading="My App" data-testid="nav-header" />);
     expect(screen.getByTestId('nav-header')).toBeInTheDocument();
   });
+
+  // ===========================================================================
+  // Menu popover semantics — the popup must not be announced as a modal
+  // dialog, and role="menu" must be scoped to the actual menu items so the
+  // heading button is not an invalid child of the menu.
+  // ===========================================================================
+
+  // The popover layer keeps `popover` content display:none in jsdom even
+  // when open, hiding it from role queries — so these tests assert the
+  // popup's ARIA semantics at the DOM level instead.
+  describe('menu popover semantics', () => {
+    const menuItems = (
+      <>
+        <div role="menuitem">Alpha</div>
+        <div role="menuitem">Beta</div>
+      </>
+    );
+
+    it('does not wrap the heading menu popup in a modal dialog', async () => {
+      const user = userEvent.setup();
+      render(<SideNavHeading heading="My App" menu={menuItems} />);
+      await user.click(screen.getByRole('button', {name: 'Open menu'}));
+      expect(document.querySelector('[role="dialog"]')).toBeNull();
+      expect(document.querySelector('[aria-modal="true"]')).toBeNull();
+    });
+
+    it('scopes role="menu" to only menuitem children with an accessible name', async () => {
+      const user = userEvent.setup();
+      render(<SideNavHeading heading="My App" menu={menuItems} />);
+      await user.click(screen.getByRole('button', {name: 'Open menu'}));
+      const menu = document.querySelector('[role="menu"]');
+      expect(menu).not.toBeNull();
+      expect(menu).toHaveAttribute('aria-label', 'My App');
+      const children = Array.from(menu!.children);
+      expect(children.length).toBeGreaterThan(0);
+      for (const child of children) {
+        expect(child).toHaveAttribute('role', 'menuitem');
+      }
+    });
+
+    it('keeps the popup heading button outside the menu and closes on click', async () => {
+      const user = userEvent.setup();
+      render(<SideNavHeading heading="My App" menu={menuItems} />);
+      const trigger = screen.getByRole('button', {name: 'Open menu'});
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+      const menu = document.querySelector('[role="menu"]');
+      expect(menu).not.toBeNull();
+      // The heading replica button in the popup is a sibling of the menu,
+      // not an invalid menu child.
+      const headingButton = Array.from(
+        document.querySelectorAll('button'),
+      ).find(b => b !== trigger && b.textContent?.includes('My App'));
+      expect(headingButton).toBeDefined();
+      expect(menu!.contains(headingButton!)).toBe(false);
+      // Clicking it still closes the popup.
+      fireEvent.click(headingButton!);
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('applies the same semantics in mixed mode (menu + hrefs)', async () => {
+      const user = userEvent.setup();
+      render(
+        <SideNavHeading
+          heading="Product"
+          headingHref="/product"
+          menu={menuItems}
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Open menu'}));
+      expect(document.querySelector('[role="dialog"]')).toBeNull();
+      const menu = document.querySelector('[role="menu"]');
+      expect(menu).not.toBeNull();
+      expect(menu).toHaveAttribute('aria-label', 'Product');
+      for (const child of Array.from(menu!.children)) {
+        expect(child).toHaveAttribute('role', 'menuitem');
+      }
+    });
+  });
 });
 
 // =============================================================================
@@ -476,6 +557,41 @@ describe('SideNavHeading collapsed', () => {
     );
     expect(screen.getByTestId('nav-header')).toBeInTheDocument();
   });
+
+  it('collapsed menu popup is not a dialog and scopes role="menu" to menu items', async () => {
+    const user = userEvent.setup();
+    render(
+      <CollapsedWrapper>
+        <SideNavHeading
+          heading="My App"
+          icon={<span data-testid="app-icon">🏠</span>}
+          menu={
+            <>
+              <div role="menuitem">Alpha</div>
+              <div role="menuitem">Beta</div>
+            </>
+          }
+        />
+      </CollapsedWrapper>,
+    );
+    await user.click(screen.getByRole('button', {name: 'My App'}));
+    // No modal dialog wrapper around the menu popup.
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+    expect(document.querySelector('[aria-modal="true"]')).toBeNull();
+    // role="menu" is scoped to the menu items and has a direct name.
+    const menu = document.querySelector('[role="menu"]');
+    expect(menu).not.toBeNull();
+    expect(menu).toHaveAttribute('aria-label', 'My App');
+    const children = Array.from(menu!.children);
+    expect(children.length).toBeGreaterThan(0);
+    for (const child of children) {
+      expect(child).toHaveAttribute('role', 'menuitem');
+    }
+    // No button (trigger or heading replica) lives inside the menu.
+    for (const button of Array.from(document.querySelectorAll('button'))) {
+      expect(menu!.contains(button)).toBe(false);
+    }
+  });
 });
 
 // =============================================================================

package/src/SideNav/SideNav.tsx

@@ -31,7 +31,7 @@ import {
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {borderVars, colorVars, spacingVars} from '../theme/tokens.stylex';
+import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps, mergeRefs} from '../utils';
 import {
   SideNavCollapseContext,
@@ -123,9 +123,6 @@ const styles = stylex.create({
     paddingInline: spacingVars['--spacing-2'],
     paddingBlockStart: spacingVars['--spacing-1'],
     paddingBlockEnd: spacingVars['--spacing-2'],
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
   },
   footerRow: {
     display: 'flex',
@@ -145,7 +142,6 @@ const styles = stylex.create({
     alignItems: 'center',
   },
   stickyBottomCollapsed: {
-    borderBlockStart: 'none',
     paddingBlockStart: 0,
   },
   // Drawer footer — pushed to bottom of the scrollable content area
@@ -155,9 +151,6 @@ const styles = stylex.create({
     marginBlockStart: 'auto',
     gap: spacingVars['--spacing-2'],
     paddingBlockStart: spacingVars['--spacing-2'],
-    borderBlockStartWidth: borderVars['--border-width'],
-    borderBlockStartStyle: 'solid',
-    borderBlockStartColor: colorVars['--color-border'],
   },
   drawerFooterIcons: {
     display: 'flex',

package/src/SideNav/SideNavCollapseButton.tsx

@@ -23,7 +23,7 @@ import {durationVars, easeVars} from '../theme/tokens.stylex';
 import {getIcon} from '../Icon/globalIconRegistry';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
-import {composeEventHandlers} from '../utils';
+import {composeEventHandlers, rtlStyles} from '../utils';
 import {
   useSideNavCollapse,
   type SideNavCollapseState,
@@ -120,18 +120,25 @@ export function SideNavCollapseButton({
   return (
     <Button
       ref={ref}
-      label={label ?? (isCollapsed ? t('@astryx.sideNavCollapseButton.expandSidebar') : t('@astryx.sideNavCollapseButton.collapseSidebar'))}
+      label={
+        label ??
+        (isCollapsed
+          ? t('@astryx.sideNavCollapseButton.expandSidebar')
+          : t('@astryx.sideNavCollapseButton.collapseSidebar'))
+      }
       variant="ghost"
       {...props}
       onClick={composeEventHandlers(onClickProp, toggle)}
       icon={
         children ?? (
-          <span
-            {...stylex.props(
-              styles.chevron,
-              isCollapsed && styles.chevronCollapsed,
-            )}>
-            {getIcon('chevronLeft')}
+          <span {...stylex.props(rtlStyles.mirror)}>
+            <span
+              {...stylex.props(
+                styles.chevron,
+                isCollapsed && styles.chevronCollapsed,
+              )}>
+              {getIcon('chevronLeft')}
+            </span>
           </span>
         )
       }

package/src/SideNav/SideNavHeading.tsx

@@ -351,6 +351,10 @@ export function SideNavHeading({
 
   const popover = usePopover({
     dialogLabel: t('@astryx.sideNav.heading.dialogLabel'),
+    // The popup exposes its own role="menu" semantics; a role="dialog"
+    // aria-modal wrapper would announce "dialog, Navigation menu" around a
+    // menu (the anti-pattern removed in a478a3dcf).
+    role: 'none',
     hasCloseButton: false,
   });
 
@@ -428,7 +432,6 @@ export function SideNavHeading({
           {popover.render(
             <div
               ref={menuRef}
-              role="menu"
               {...stylex.props(styles.popoverContent)}
               {...contentProps}>
               <button
@@ -461,9 +464,14 @@ export function SideNavHeading({
                   )}
                 </span>
               </button>
-              <NavHeadingCloseContext value={closeMenuCtx}>
-                {menu}
-              </NavHeadingCloseContext>
+              {/* The menu role is scoped to the actual menu items so the
+                  heading button above stays a valid sibling, not an invalid
+                  child of a role="menu" element. */}
+              <div role="menu" aria-label={heading}>
+                <NavHeadingCloseContext value={closeMenuCtx}>
+                  {menu}
+                </NavHeadingCloseContext>
+              </div>
             </div>,
             {placement: 'below', alignment: 'start', xstyle: styles.popover},
           )}
@@ -620,11 +628,15 @@ export function SideNavHeading({
         {popover.render(
           <div
             ref={menuRef}
-            role="menu"
             {...stylex.props(styles.popoverContent)}
             {...contentProps}>
             {popoverHeadingContent}
-            {menu}
+            {/* The menu role is scoped to the actual menu items so the
+                heading button above stays a valid sibling, not an invalid
+                child of a role="menu" element. */}
+            <div role="menu" aria-label={heading}>
+              {menu}
+            </div>
           </div>,
           {
             placement: 'below',
@@ -683,11 +695,15 @@ export function SideNavHeading({
         {popover.render(
           <div
             ref={menuRef}
-            role="menu"
             {...stylex.props(styles.popoverContent)}
             {...contentProps}>
             {popoverHeadingContent}
-            {menu}
+            {/* The menu role is scoped to the actual menu items so the
+                heading button above stays a valid sibling, not an invalid
+                child of a role="menu" element. */}
+            <div role="menu" aria-label={heading}>
+              {menu}
+            </div>
           </div>,
           {
             placement: 'below',

package/src/SideNav/SideNavItem.tsx

@@ -356,6 +356,8 @@ export function SideNavItem({
   size = 'md',
   'data-testid': testId,
   ref,
+  xstyle,
+  ...rest
 }: SideNavItemProps) {
   const t = useTranslator();
   const {isCollapsed} = useSideNavCollapse();
@@ -502,7 +504,7 @@ export function SideNavItem({
     // Items with children: popover trigger + popover
     if (hasChildren) {
       return (
-        <div {...stylex.props(styles.root)}>
+        <div {...stylex.props(styles.root, xstyle)}>
           <button
             ref={mergeRefs(ref, popover.triggerRef)}
             type="button"
@@ -554,7 +556,7 @@ export function SideNavItem({
     );
 
     return (
-      <div ref={itemRef} {...stylex.props(styles.root)}>
+      <div ref={itemRef} {...stylex.props(styles.root, xstyle)}>
         {collapsedElement}
         <Tooltip content={label} placement="end" anchorRef={itemRef} />
       </div>
@@ -628,7 +630,11 @@ export function SideNavItem({
         <button
           type="button"
           onClick={handleToggleClick}
-          aria-label={isItemCollapsed ? t('@astryx.sideNavItem.expand', {label}) : t('@astryx.sideNavItem.collapse', {label})}
+          aria-label={
+            isItemCollapsed
+              ? t('@astryx.sideNavItem.expand', {label})
+              : t('@astryx.sideNavItem.collapse', {label})
+          }
           aria-expanded={!isItemCollapsed}
           aria-controls={`${id}-children`}
           {...stylex.props(styles.expandToggle)}>
@@ -666,7 +672,7 @@ export function SideNavItem({
   }
 
   const item = (
-    <div ref={itemRef} {...stylex.props(styles.root)}>
+    <div ref={itemRef} {...stylex.props(styles.root, xstyle)}>
       {itemElement}
       {hasChildren && !isCollapsed && (
         <div

package/src/Slider/Slider.doc.mjs

@@ -141,6 +141,12 @@ export const docs = {
       type: 'string',
       description: 'Tooltip text for an info icon displayed next to the label.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',