fix(sidebar): mark active links with aria-current (#634)

* fix(sidebar): expose active page with aria-current

* Update SidebarMenuButton to use currentPath for active state

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Seiya IZUMI <IzumiSy@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.changeset/bright-routes-current.md

@@ -0,0 +1,5 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+Mark active internal sidebar links with `aria-current="page"` in custom, grouped, and generated navigation. Screen readers can identify the current page without application code editing the link element.

docs-manifest.json

@@ -1294,9 +1294,9 @@
       "symbols": [],
       "hashes": {
         "typeSurface": null,
-        "outline": "7e12558d80191549",
+        "outline": "ffd040e38c8f8a4b",
         "snapshot": null,
-        "outputMd": "e342ef02dc2b9b86",
+        "outputMd": "3670e37a3c78abe7",
         "examples": null
       }
     },
@@ -1733,7 +1733,7 @@
     "packages/core/skills/app-shell-patterns/references/concepts/graphql.md": "a59a10293fba053b",
     "packages/core/skills/app-shell-patterns/references/concepts/modules-and-resources.md": "bf15b5460f22d165",
     "packages/core/skills/app-shell-patterns/references/concepts/routing-navigation.md": "8034c7f885994b29",
-    "packages/core/skills/app-shell-patterns/references/concepts/sidebar-navigation.md": "e342ef02dc2b9b86",
+    "packages/core/skills/app-shell-patterns/references/concepts/sidebar-navigation.md": "3670e37a3c78abe7",
     "packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "5c55865c499890a8",
     "packages/core/skills/app-shell-patterns/references/components/action-panel.md": "71794d4b561e4d4b",
     "packages/core/skills/app-shell-patterns/references/components/activity-card.md": "4f386e49380fb0b0",

docs-src/concepts/sidebar-navigation.docs.outline.md

@@ -69,6 +69,8 @@ const App = () => (
 ### SidebarItem
 
 A navigation item that automatically resolves title and icon from resource definitions.
+Active internal sidebar links expose `aria-current="page"` on the link itself, including
+items with custom `render` content. Inactive and external links do not expose it.
 
 #### Props
 

docs/concepts/sidebar-navigation.md

@@ -452,6 +452,7 @@ describe("DefaultSidebar auto-generation", () => {
     // Active styling (background, weight and --sidebar-accent-foreground text)
     // is keyed on data-active, so the item must carry it — not just a class.
     expect(overviewLink.getAttribute("data-active")).toBe("true");
+    expect(overviewLink.getAttribute("aria-current")).toBe("page");
   });
 
   it("excludes componentless resources from sidebar links", async () => {

packages/core/src/components/sidebar/default-sidebar.test.tsx

@@ -253,7 +253,14 @@ const AutoSidebarItems = (props: {
               {item.url ? (
                 <>
                   <SidebarMenuButton
-                    render={<Link to={item.url as string} />}
+                    render={
+                      <Link
+                        to={item.url as string}
+                        aria-current={
+                          isActivePath(item.url, props.currentPath) ? "page" : undefined
+                        }
+                      />
+                    }
                     isActive={isActivePath(item.url, props.currentPath)}
                     tooltip={item.title}
                   >
@@ -301,7 +308,14 @@ const AutoSidebarItems = (props: {
                       .map((subItem) => (
                         <SidebarMenuSubItem key={subItem.title}>
                           <SidebarMenuSubButton
-                            render={<Link to={subItem.url!} />}
+                            render={
+                              <Link
+                                to={subItem.url!}
+                                aria-current={
+                                  isActivePath(subItem.url, props.currentPath) ? "page" : undefined
+                                }
+                              />
+                            }
                             isActive={isActivePath(subItem.url, props.currentPath)}
                           >
                             <span>{subItem.title}</span>

packages/core/src/components/sidebar/default-sidebar.tsx

@@ -191,7 +191,12 @@ export const SidebarGroup = (props: SidebarGroupProps) => {
     // explicit accessible name (the hover flyout's aria-label only mounts on
     // hover).
     const trigger = to ? (
-      <SidebarMenuButton render={<Link to={to} aria-label={resolvedTitle} />} isActive={isActive}>
+      <SidebarMenuButton
+        render={
+          <Link to={to} aria-label={resolvedTitle} aria-current={isActive ? "page" : undefined} />
+        }
+        isActive={isActive}
+      >
         {icon}
         <span>{resolvedTitle}</span>
       </SidebarMenuButton>
@@ -213,7 +218,11 @@ export const SidebarGroup = (props: SidebarGroupProps) => {
   if (to) {
     return (
       <Collapsible.Root render={<SidebarMenuItem />} defaultOpen={defaultOpen}>
-        <SidebarMenuButton render={<Link to={to} />} isActive={isActive} tooltip={resolvedTitle}>
+        <SidebarMenuButton
+          render={<Link to={to} aria-current={isActive ? "page" : undefined} />}
+          isActive={isActive}
+          tooltip={resolvedTitle}
+        >
           {icon}
           <span>{resolvedTitle}</span>
         </SidebarMenuButton>

packages/core/src/components/sidebar/sidebar-group.tsx

@@ -148,7 +148,11 @@ export const SidebarItem = (props: SidebarItemProps) => {
   // Internal link
   return (
     <SidebarMenuItem>
-      <SidebarMenuButton render={<Link to={to} />} isActive={isActive} tooltip={title}>
+      <SidebarMenuButton
+        render={<Link to={to} aria-current={currentPath === to ? "page" : undefined} />}
+        isActive={isActive}
+        tooltip={title}
+      >
         {render ? (
           render(renderProps)
         ) : (

packages/core/src/components/sidebar/sidebar-item.tsx

@@ -162,13 +162,23 @@ describe("SidebarItem", () => {
     expect(menu.getByTestId("custom").textContent).toContain("Dashboard Custom");
   });
 
+  it("marks a custom-rendered active item on its link", () => {
+    renderWithProviders(
+      <SidebarItem to="/dashboard/overview" render={({ title }) => <span>{title}</span>} />,
+      "/dashboard/overview",
+    );
+
+    expect(getSidebarMenu().getByRole("link").getAttribute("aria-current")).toBe("page");
+  });
+
   it("renders external link with target blank", () => {
     renderWithProviders(<SidebarItem to="https://docs.example.com" external />);
 
     const menu = getSidebarMenu();
     const link = menu.getByRole("link");
     expect(link.getAttribute("target")).toBe("_blank");
     expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    expect(link.hasAttribute("aria-current")).toBe(false);
   });
 
   it("auto-detects external URLs without external prop", () => {
@@ -185,6 +195,7 @@ describe("SidebarItem", () => {
     const menu = getSidebarMenu();
     const link = menu.getByRole("link");
     expect(link.getAttribute("data-active")).toBe("true");
+    expect(link.getAttribute("aria-current")).toBe("page");
   });
 
   it("applies the theme's selected background and text tokens when active, without hover", () => {
@@ -201,6 +212,7 @@ describe("SidebarItem", () => {
 
     const link = getSidebarMenu().getByRole("link");
     expect(link.getAttribute("data-active")).toBe("false");
+    expect(link.hasAttribute("aria-current")).toBe(false);
   });
 
   it("falls back to URL-based title for unknown paths", () => {
@@ -270,10 +282,12 @@ describe("SidebarGroup", () => {
     const headerLink = links.find((l) => l.getAttribute("href") === "/products")!;
     const childLink = links.find((l) => l.getAttribute("href") === "/products/all")!;
     expect(headerLink.getAttribute("data-active")).toBe("true");
+    expect(headerLink.getAttribute("aria-current")).toBe("page");
     expect(headerLink.className).toContain(
       "astw:data-[active=true]:text-sidebar-accent-foreground",
     );
     expect(childLink.getAttribute("data-active")).toBe("false");
+    expect(childLink.hasAttribute("aria-current")).toBe(false);
   });
 
   it("supports localized title function", () => {