[origin] Fix sidebar navigation roles (#28838)

## Summary

- Fixes DES-67 by removing default ARIA menu semantics from Origin
Sidebar navigation containers.
- Keeps explicit `role` forwarding on `Sidebar.Menu` as an escape hatch
for consumers that implement complete menu/menuitem semantics and
keyboard behavior.
- Clarifies in stories/tests that Sidebar navigation is a
layout/navigation grouping primitive; command menus should use Origin
Menu, and tree semantics should use `Sidebar.Tree`.

## Accessibility decision

`Sidebar.Menu` and expandable submenu containers no longer default to
`role=\"menu\"` because sidebar navigation items do not implement full
ARIA menu keyboard behavior. Consumers can still pass `role=\"menu\"`
explicitly when they own the corresponding `menuitem` semantics and
interaction model.

## Storybook preview

Origin Storybook:
https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/

- `Components/Sidebar/Default`:
https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/?path=/story/components-sidebar--default
- `Components/Sidebar/WithTreeItems`:
https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/?path=/story/components-sidebar--with-tree-items
- `Components/Sidebar/AllItemVariants`:
https://dev.dev.sparkinfra.net/app/origin-storybook-pr-28838/?path=/story/components-sidebar--all-item-variants

## Verification

- `mise exec -- corepack yarn workspace @lightsparkdev/origin test:unit
src/components/Sidebar/Sidebar.unit.test.tsx`
- `mise exec -- corepack yarn workspace @lightsparkdev/origin exec
prettier --check src/components/Sidebar/parts.tsx
src/components/Sidebar/Sidebar.unit.test.tsx
src/components/Sidebar/Sidebar.stories.tsx`
- `mise exec -- corepack yarn workspace @lightsparkdev/origin exec
eslint src/components/Sidebar/parts.tsx
src/components/Sidebar/Sidebar.unit.test.tsx
src/components/Sidebar/Sidebar.stories.tsx`
- `mise exec -- corepack yarn workspace @lightsparkdev/origin types`

Jira: https://lightspark.atlassian.net/browse/DES-67

Co-authored-by: Cursor <cursoragent@cursor.com>
GitOrigin-RevId: 76341209322fdce512d9c5204eeba89f2985e363

Author: 2 people

packages/origin/src/components/Sidebar/Sidebar.stories.tsx

@@ -45,6 +45,8 @@ type Story = StoryObj<typeof Sidebar.Root>;
 
 /**
  * Default expanded sidebar with groups and items.
+ * Sidebar.Menu is a roleless navigation grouping primitive. If consumers opt
+ * into role="menu", they own valid menuitem semantics and menu keyboard behavior.
  */
 export const Default: Story = {
   args: { collapsed: false },
@@ -667,14 +669,15 @@ export const WithDrilldownItems: Story = {
 };
 
 /**
- * TreeItem variant - expandable items with horizontal chevron that rotates 90° when expanded.
+ * TreeItem visual variant - expandable rows with a horizontal chevron. For
+ * true ARIA tree semantics, wrap items in Sidebar.Tree.
  */
 export const WithTreeItems: Story = {
   render: () => (
     <Sidebar.Root>
       <Sidebar.Content>
         <Sidebar.Group>
-          <Sidebar.GroupLabel>Tree Navigation</Sidebar.GroupLabel>
+          <Sidebar.GroupLabel>Nested Navigation</Sidebar.GroupLabel>
           <Sidebar.Menu>
             <Sidebar.Item
               icon={<CentralIcon name="IconHome" size={20} />}
@@ -845,7 +848,9 @@ export const AllItemVariants: Story = {
         <Sidebar.Separator />
 
         <Sidebar.Group>
-          <Sidebar.GroupLabel>Tree (Horizontal Chevron)</Sidebar.GroupLabel>
+          <Sidebar.GroupLabel>
+            Tree-Style Row (Horizontal Chevron)
+          </Sidebar.GroupLabel>
           <Sidebar.Menu>
             <Sidebar.TreeItem
               icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />}

packages/origin/src/components/Sidebar/Sidebar.unit.test.tsx

@@ -496,6 +496,39 @@ describe("SidebarContext", () => {
 });
 
 describe("Accessibility", () => {
+  describe("Menu", () => {
+    it("does not use ARIA menu semantics by default", () => {
+      render(
+        <Sidebar.Root>
+          <Sidebar.Content>
+            <Sidebar.Menu data-testid="menu">
+              <Sidebar.Item>Dashboard</Sidebar.Item>
+            </Sidebar.Menu>
+          </Sidebar.Content>
+        </Sidebar.Root>,
+      );
+
+      expect(screen.getByTestId("menu")).not.toHaveAttribute("role");
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+
+    it("forwards explicit menu role as an escape hatch", () => {
+      render(
+        <Sidebar.Root>
+          <Sidebar.Content>
+            <Sidebar.Menu aria-label="Custom command menu" role="menu">
+              <div role="menuitem">Custom command</div>
+            </Sidebar.Menu>
+          </Sidebar.Content>
+        </Sidebar.Root>,
+      );
+
+      expect(
+        screen.getByRole("menu", { name: "Custom command menu" }),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("GroupLabel", () => {
     it("is visually hidden when collapsed", () => {
       render(
@@ -582,7 +615,8 @@ describe("Accessibility", () => {
 
       const submenu = document.getElementById(submenuId!);
       expect(submenu).toBeInTheDocument();
-      expect(submenu).toHaveAttribute("role", "menu");
+      expect(submenu).not.toHaveAttribute("role");
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
     });
   });
 

packages/origin/src/components/Sidebar/parts.tsx

@@ -332,12 +332,7 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
   ref,
 ) {
   return (
-    <div
-      ref={ref}
-      className={clsx(styles.menu, className)}
-      role="menu"
-      {...props}
-    >
+    <div ref={ref} className={clsx(styles.menu, className)} {...props}>
       {children}
     </div>
   );
@@ -519,7 +514,6 @@ export const ExpandableItem = React.forwardRef<
           id={submenuId}
           className={styles.submenu}
           data-variant={submenuVariant}
-          role="menu"
         >
           {children}
         </div>