fix: Add aria-[current=page] as a supported active state to the sidebar menu button component

.changeset/sidebar-aria-current-page.md

@@ -0,0 +1,5 @@
+---
+'@baseplate-dev/react-generators': patch
+---
+
+Add aria-[current=page] as a supported active state to the sidebar menu button component, in addition to the existing data-[active=true] attribute.

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx

@@ -31,7 +31,7 @@ export function AppSidebar(): React.ReactElement {
               {/* TPL_SIDEBAR_LINKS:START */}
               <SidebarMenuItem>
                 <SidebarMenuButton asChild>
-                  <Link to="/admin">
+                  <Link to="/admin" activeOptions={{ exact: true }}>
                     <MdHome />
                     <span>Home</span>
                   </Link>

examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx

@@ -34,6 +34,7 @@ import {
  * https://ui.shadcn.com/docs/components/sidebar
  *
  * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
+ * - Added aria-[current=page] as a supported active state to the sidebar menu button
  */
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -516,7 +517,7 @@ function SidebarMenuItem({
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -618,7 +619,7 @@ function SidebarMenuAction({
         'peer-data-[size=lg]/menu-button:top-2.5',
         'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
         className,
       )}
       {...props}
@@ -636,7 +637,7 @@ function SidebarMenuBadge({
       data-sidebar="menu-badge"
       className={cn(
         'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
-        'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
+        'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
         'peer-data-[size=lg]/menu-button:top-2.5',
@@ -740,7 +741,7 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
-        'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+        'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         'group-data-[collapsible=icon]:hidden',

examples/blog-with-auth/apps/admin/src/components/layouts/app-sidebar.tsx

@@ -31,7 +31,7 @@ export function AppSidebar(): React.ReactElement {
               {/* TPL_SIDEBAR_LINKS:START */}
               <SidebarMenuItem>
                 <SidebarMenuButton asChild>
-                  <Link to="/admin">
+                  <Link to="/admin" activeOptions={{ exact: true }}>
                     <MdHome />
                     <span>Home</span>
                   </Link>

examples/blog-with-auth/apps/admin/src/components/ui/sidebar.tsx

@@ -34,6 +34,7 @@ import {
  * https://ui.shadcn.com/docs/components/sidebar
  *
  * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
+ * - Added aria-[current=page] as a supported active state to the sidebar menu button
  */
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -516,7 +517,7 @@ function SidebarMenuItem({
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -618,7 +619,7 @@ function SidebarMenuAction({
         'peer-data-[size=lg]/menu-button:top-2.5',
         'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
         className,
       )}
       {...props}
@@ -636,7 +637,7 @@ function SidebarMenuBadge({
       data-sidebar="menu-badge"
       className={cn(
         'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
-        'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
+        'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
         'peer-data-[size=lg]/menu-button:top-2.5',
@@ -740,7 +741,7 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
-        'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+        'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         'group-data-[collapsible=icon]:hidden',

examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx

@@ -32,7 +32,7 @@ export function AppSidebar(): React.ReactElement {
               {/* TPL_SIDEBAR_LINKS:START */}
               <SidebarMenuItem>
                 <SidebarMenuButton asChild>
-                  <Link to="/admin">
+                  <Link to="/admin" activeOptions={{ exact: true }}>
                     <MdHome />
                     <span>Home</span>
                   </Link>

examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx

@@ -34,6 +34,7 @@ import {
  * https://ui.shadcn.com/docs/components/sidebar
  *
  * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
+ * - Added aria-[current=page] as a supported active state to the sidebar menu button
  */
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -516,7 +517,7 @@ function SidebarMenuItem({
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -618,7 +619,7 @@ function SidebarMenuAction({
         'peer-data-[size=lg]/menu-button:top-2.5',
         'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
         className,
       )}
       {...props}
@@ -636,7 +637,7 @@ function SidebarMenuBadge({
       data-sidebar="menu-badge"
       className={cn(
         'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
-        'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
+        'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
         'peer-data-[size=lg]/menu-button:top-2.5',
@@ -740,7 +741,7 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
-        'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+        'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         'group-data-[collapsible=icon]:hidden',

examples/todo-with-auth0/apps/admin/src/components/layouts/app-sidebar.tsx

@@ -32,7 +32,7 @@ export function AppSidebar(): React.ReactElement {
               {/* TPL_SIDEBAR_LINKS:START */}
               <SidebarMenuItem>
                 <SidebarMenuButton asChild>
-                  <Link to="/admin">
+                  <Link to="/admin" activeOptions={{ exact: true }}>
                     <MdHome />
                     <span>Home</span>
                   </Link>

examples/todo-with-auth0/apps/admin/src/components/ui/sidebar.tsx

@@ -34,6 +34,7 @@ import {
  * https://ui.shadcn.com/docs/components/sidebar
  *
  * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561)
+ * - Added aria-[current=page] as a supported active state to the sidebar menu button
  */
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
@@ -516,7 +517,7 @@ function SidebarMenuItem({
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -618,7 +619,7 @@ function SidebarMenuAction({
         'peer-data-[size=lg]/menu-button:top-2.5',
         'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
         className,
       )}
       {...props}
@@ -636,7 +637,7 @@ function SidebarMenuBadge({
       data-sidebar="menu-badge"
       className={cn(
         'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none',
-        'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
+        'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
         'peer-data-[size=lg]/menu-button:top-2.5',
@@ -740,7 +741,7 @@ function SidebarMenuSubButton({
       data-active={isActive}
       className={cn(
         'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground',
-        'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+        'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         'group-data-[collapsible=icon]:hidden',

examples/todo-with-auth0/apps/backend/baseplate/generated/package.json

@@ -88,7 +88,6 @@
     "eslint-plugin-perfectionist": "4.15.0",
     "eslint-plugin-unicorn": "60.0.0",
     "globals": "16.4.0",
-    "ioredis-mock": "8.13.0",
     "pg-connection-string": "2.6.4",
     "pino-pretty": "13.0.0",
     "prettier": "3.6.2",

examples/todo-with-auth0/apps/backend/package.json

@@ -88,7 +88,6 @@
     "eslint-plugin-perfectionist": "4.15.0",
     "eslint-plugin-unicorn": "60.0.0",
     "globals": "16.4.0",
-    "ioredis-mock": "8.13.0",
     "pg-connection-string": "2.6.4",
     "pino-pretty": "13.0.0",
     "prettier": "3.6.2",