ECHOES-1408 Allow icon-less accordion child items in SidebarNavigation

src/components/layout/index.ts

@@ -22,6 +22,7 @@ import { Banner } from './banner';
 import { GlobalNavigation } from './global-navigation';
 import { ContentHeader, PageHeader } from './header';
 import { Layout as LayoutRoot } from './Layout';
+
 import {
   AsideLeft,
   BannerContainer,
@@ -30,9 +31,11 @@ import {
   PageFooter,
   PageGrid,
 } from './LayoutSlots';
+
 import { SidebarNavigation } from './sidebar-navigation';
 
 export { BannerVariety, type BannerProps } from './banner';
+
 export type {
   GlobalNavigationAccountProps,
   GlobalNavigationActionProps,
@@ -43,20 +46,25 @@ export type {
   GlobalNavigationPrimaryProps,
   GlobalNavigationProps,
 } from './global-navigation';
+
 export type {
   ContentHeaderProps,
   ContentHeaderTitleProps,
   PageHeaderMetadataProps,
   PageHeaderProps,
   PageHeaderTitleProps,
 } from './header';
+
 export type { LayoutProps } from './Layout';
 export type { AsideProps, PageGridProps } from './LayoutSlots';
 export { AsideSize, PageWidth } from './LayoutTypes';
+
 export type {
+  SidebarNavigationAccordionChildItemProps,
   SidebarNavigationAccordionItemProps,
   SidebarNavigationGroupProps,
   SidebarNavigationHeaderProps,
+  SidebarNavigationItemBaseProps,
   SidebarNavigationItemProps,
   SidebarNavigationProps,
 } from './sidebar-navigation';
@@ -354,6 +362,7 @@ export const Layout = Object.assign(LayoutRoot, {
    * - {@link SidebarNavigation.Group} - Grouped navigation sections
    * - {@link SidebarNavigation.Item} - Individual navigation items
    * - {@link SidebarNavigation.AccordionItem} - Expandable sections
+   * - {@link SidebarNavigation.AccordionItem.Item} - Navigation rows within accordion sections
    * - {@link SidebarNavigation.Footer} - Fixed footer section
    *
    * ```tsx

src/components/layout/sidebar-navigation/SidebarNavigationAccordionChildItem.tsx

@@ -0,0 +1,42 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { SidebarNavigationBaseItem } from './SidebarNavigationBaseItem';
+
+import {
+  SidebarNavigationIconComponent,
+  SidebarNavigationItemBaseProps,
+} from './SidebarNavigationTypes';
+
+export interface SidebarNavigationAccordionChildItemProps extends SidebarNavigationItemBaseProps {
+  /**
+   * The icon component to display at the start of the SidebarNavigationAccordionChildItem.
+   * Must be an Echoes Icon component. Omit it for icon-less accordion child rows.
+   */
+  Icon?: SidebarNavigationIconComponent;
+}
+
+export function SidebarNavigationAccordionChildItem(
+  props: Readonly<SidebarNavigationAccordionChildItemProps>,
+) {
+  return <SidebarNavigationBaseItem {...props} />;
+}
+
+SidebarNavigationAccordionChildItem.displayName = 'SidebarNavigationAccordionChildItem';

src/components/layout/sidebar-navigation/SidebarNavigationAccordionItem.tsx

@@ -19,40 +19,53 @@
  */
 
 import styled from '@emotion/styled';
-import {
-  forwardRef,
-  ForwardRefExoticComponent,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react';
+
+import { ReactNode, Ref, useCallback, useEffect, useId, useRef, useState } from 'react';
+
 import { TextNode } from '~types/utils';
 import { cssVar } from '~utils/design-tokens';
-import { IconChevronDown, IconChevronRight, IconFilledProps } from '../../icons';
+import { IconChevronDown, IconChevronRight } from '../../icons';
 import { Tooltip } from '../../tooltip';
+
 import {
   sidebarNavigationBaseItemStyles,
   sidebarNavigationItemIconStyles,
   SidebarNavigationItemLabel,
 } from './SidebarNavigationItemStyles';
+
+import { SidebarNavigationIconComponent } from './SidebarNavigationTypes';
 import { TOOLTIP_DELAY_IN_MS } from './utils';
 
 export interface SidebarNavigationAccordionItemProps {
+  /**
+   * ARIA label for the SidebarNavigationAccordionItem button.
+   */
   ariaLabel?: string;
   /**
-   * List of SidebarNavigationItem that are displayed when the accordion is expanded.
-   * Should ideally be maximum 5 items.
+   * List of navigation child items displayed when the accordion is expanded.
+   * Prefer `SidebarNavigation.AccordionItem.Item` and keep the list to five items or fewer.
    */
   children: ReactNode;
+  /**
+   * Optional CSS class name applied to the accordion button element.
+   */
   className?: string;
   /**
    * Whether to disable the tooltip on the accordion item or not.
    * By default the tooltip is enabled, it should only be disabled if you don't expect the content to be ellipsed.
+   * @defaultValue false
    */
   disableTooltip?: boolean;
+  /**
+   * The icon component to display at the start of the SidebarNavigationAccordionItem.
+   * Must be an Echoes Icon component.
+   */
+  Icon: SidebarNavigationIconComponent;
+  /**
+   * Whether the accordion is open by default.
+   * @defaultValue false
+   */
+  isDefaultOpen?: boolean;
   /**
    * The label for the SidebarNavigationAccordionItem.
    */
@@ -66,37 +79,34 @@ export interface SidebarNavigationAccordionItemProps {
    */
   onOpen?: VoidFunction;
   /**
-   * Whether the accordion is open by default. Defaults to false.
+   * React ref forwarded to the root button element.
    */
-  isDefaultOpen?: boolean;
+  ref?: Ref<HTMLButtonElement>;
   /**
    * When true, scrolls the last child item into view when the accordion opens.
    * Useful when the accordion is near the bottom of a scrollable container.
+   * @defaultValue false
    */
   scrollLastChildIntoViewOnOpen?: boolean;
   /**
    * Optional content to display on the right, before the chevron. Typically badges, item count and similar metadata.
    */
   suffix?: ReactNode;
-  /**
-   * The icon component to display at the start of the SidebarNavigationAccordionItem.
-   * Must be an Echoes Icon component.
-   */
-  Icon: ForwardRefExoticComponent<IconFilledProps & React.RefAttributes<HTMLSpanElement>>;
 }
 
-export const SidebarNavigationAccordionItem = forwardRef<
-  HTMLButtonElement,
-  SidebarNavigationAccordionItemProps
->((props, ref) => {
+export function SidebarNavigationAccordionItem(
+  props: Readonly<SidebarNavigationAccordionItemProps>,
+) {
   const {
+    ariaLabel,
     children,
-    isDefaultOpen = false,
     disableTooltip = false,
     Icon,
+    isDefaultOpen = false,
     label,
     onClose,
     onOpen,
+    ref,
     scrollLastChildIntoViewOnOpen,
     suffix,
     ...htmlProps
@@ -139,9 +149,11 @@ export const SidebarNavigationAccordionItem = forwardRef<
           {...htmlProps}
           aria-controls={accordionPanelId}
           aria-expanded={open}
+          aria-label={ariaLabel}
           id={accordionId}
           onClick={handleClick}
-          ref={ref}>
+          ref={ref}
+          type="button">
           <Icon css={sidebarNavigationItemIconStyles} isFilled={false} />
 
           <SidebarNavigationItemLabel>{label}</SidebarNavigationItemLabel>
@@ -165,7 +177,7 @@ export const SidebarNavigationAccordionItem = forwardRef<
       </AccordionItemPanel>
     </AccordionWrapper>
   );
-});
+}
 
 SidebarNavigationAccordionItem.displayName = 'SidebarNavigationAccordionItem';
 

src/components/layout/sidebar-navigation/SidebarNavigationBaseItem.tsx

@@ -0,0 +1,148 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { MouseEvent, useCallback } from 'react';
+
+import { NavLinkBase } from '~common/components/NavLinkBase';
+import { isDefined } from '~common/helpers/types';
+import { cssVar } from '~utils/design-tokens';
+import { Tooltip } from '../../tooltip';
+
+import {
+  sidebarNavigationBaseItemStyles,
+  sidebarNavigationItemIconStyles,
+  SidebarNavigationItemLabel,
+  UnstyledListItem,
+} from './SidebarNavigationItemStyles';
+
+import {
+  SidebarNavigationIconComponent,
+  SidebarNavigationItemBaseProps,
+} from './SidebarNavigationTypes';
+
+import { TOOLTIP_DELAY_IN_MS } from './utils';
+
+interface SidebarNavigationBaseItemInternalProps extends SidebarNavigationItemBaseProps {
+  Icon?: SidebarNavigationIconComponent;
+}
+
+export function SidebarNavigationBaseItem(props: Readonly<SidebarNavigationBaseItemInternalProps>) {
+  const {
+    ariaLabel,
+    children,
+    disableIconWhenSidebarOpen = false,
+    disableTooltip = false,
+    Icon,
+    onClick,
+    ref,
+    suffix,
+    ...htmlProps
+  } = props;
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.currentTarget.blur();
+      onClick?.(event);
+    },
+    [onClick],
+  );
+
+  return (
+    <UnstyledListItem>
+      <Tooltip
+        content={disableTooltip ? undefined : children}
+        delayDuration={TOOLTIP_DELAY_IN_MS}
+        side="right">
+        <SidebarNavigationBaseItemLink
+          {...htmlProps}
+          aria-label={ariaLabel}
+          onClick={handleClick}
+          ref={ref}>
+          {isDefined(Icon) && (
+            <Icon
+              css={[
+                sidebarNavigationBaseItemIconStyles,
+                disableIconWhenSidebarOpen
+                  ? sidebarNavigationBaseItemHideWhenSidebarOpenStyles
+                  : undefined,
+              ]}
+              isFilled={false}
+            />
+          )}
+
+          <SidebarNavigationItemLabel>{children}</SidebarNavigationItemLabel>
+
+          {suffix}
+        </SidebarNavigationBaseItemLink>
+      </Tooltip>
+    </UnstyledListItem>
+  );
+}
+
+SidebarNavigationBaseItem.displayName = 'SidebarNavigationBaseItem';
+
+const SidebarNavigationBaseItemLink = styled(NavLinkBase)`
+  ${sidebarNavigationBaseItemStyles}
+
+  // When the item is inside an accordion, the display and visibility values change based on the
+  // accordion state. Outside of accordions, they fall back to flex and visible.
+  display: var(--sidebar-navigation-accordion-children-display, flex);
+  visibility: var(--sidebar-navigation-accordion-children-visibility, visible);
+
+  // The accordion provides an outline in closed sidebar mode for the active child item. Keeping it
+  // outside the active selector avoids overriding the focus outline from the base item styles.
+  outline: var(--sidebar-navigation-accordion-children-outline);
+
+  &:active,
+  &.active {
+    // Active items stay visible even when the parent accordion is closed.
+    display: flex;
+    visibility: visible;
+
+    background-color: ${cssVar('sidebar-navigation-item-colors-background-active')};
+    color: ${cssVar('color-text-accent')};
+    font: ${cssVar('typography-text-default-semi-bold')};
+
+    &:hover {
+      background-color: ${cssVar('sidebar-navigation-item-colors-background-hover')};
+    }
+  }
+`;
+
+SidebarNavigationBaseItemLink.displayName = 'SidebarNavigationBaseItemLink';
+
+const sidebarNavigationBaseItemIconStyles = css`
+  ${sidebarNavigationItemIconStyles}
+
+  ${SidebarNavigationBaseItemLink}.active > &,
+  ${SidebarNavigationBaseItemLink}:active > & {
+    color: ${cssVar('color-icon-accent')};
+  }
+`;
+
+const sidebarNavigationBaseItemHideWhenSidebarOpenStyles = css`
+  [data-sidebar-docked='true'] &,
+  [data-sidebar-docked='false'] nav:is(:hover, :focus-within) & {
+    display: none;
+  }
+`;