@ds-mo/ui 2.2.0 → 2.3.0

package/src/react/ds-tab-group-nav.ts

@@ -15,13 +15,19 @@ import { type DsTabGroupNavCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTabGroupNav as DsTabGroupNavElement, defineCustomElement as defineDsTabGroupNav } from "@ds-mo/ui/dist/components/ds-tab-group-nav.js";
 
-export type DsTabGroupNavEvents = { onDsChange: EventName<DsTabGroupNavCustomEvent<string>> };
+export type DsTabGroupNavEvents = {
+    onDsChange: EventName<DsTabGroupNavCustomEvent<string>>,
+    onDsRovingExit: EventName<DsTabGroupNavCustomEvent<'start' | 'end'>>
+};
 
 export const DsTabGroupNav: StencilReactComponent<DsTabGroupNavElement, DsTabGroupNavEvents, Components.DsTabGroupNav> = /*@__PURE__*/ createComponent<DsTabGroupNavElement, DsTabGroupNavEvents, Components.DsTabGroupNav>({
     tagName: 'ds-tab-group-nav',
     elementClass: DsTabGroupNavElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onDsChange: 'dsChange' } as DsTabGroupNavEvents,
+    events: {
+        onDsChange: 'dsChange',
+        onDsRovingExit: 'dsRovingExit'
+    } as DsTabGroupNavEvents,
     defineCustomElement: defineDsTabGroupNav
 });

package/src/wc/components/AppShell/AppShell.tsx

@@ -322,17 +322,15 @@ export class AppShell {
             <slot name="panel" />
           </div>
           <div class="app-shell__main">
-            <div class="app-shell__stack">
-              <div class="app-shell__bar">
-                <slot name="bar" />
-              </div>
-              <div class="app-shell__content">
-                <slot />
-              </div>
+            <div class="app-shell__bar">
+              <slot name="bar" />
             </div>
             <div class="app-shell__tools">
               <slot name="tools" />
             </div>
+            <div class="app-shell__content">
+              <slot />
+            </div>
           </div>
         </div>
       </Host>

package/src/wc/components/BarNav/BarNav.tsx

@@ -86,6 +86,7 @@ export class BarNav {
   @State() private visibleTabs: BarNavTab[] = [];
   @State() private overflowTabs: BarNavTab[] = [];
   @State() private menuInitialFocusVisible = false;
+  @State() private overflowRovingFocused = false;
 
   private static readonly HOST_PROP_SYNC_BUDGET = 8;
   private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;
@@ -95,7 +96,7 @@ export class BarNav {
   private headerEl: HTMLElement | null = null;
   private triggerEl: (HTMLElement & { setFocus?: () => Promise<void> }) | null = null;
   private menuEl: HTMLDsMenuElement | null = null;
-  private visibleTabGroupEl: QueryableHost | null = null;
+  private visibleTabGroupEl: HTMLDsTabGroupNavElement | null = null;
   private probeTabGroupEl: QueryableHost | null = null;
   private resizeObserver: ResizeObserver | null = null;
   private intrinsicWidthRetryCount = 0;
@@ -571,11 +572,32 @@ export class BarNav {
     this.menuOpen = true;
   }
 
+  private handleTabRovingExit(e: CustomEvent<'start' | 'end'>) {
+    if (e.detail !== 'end' || !this.hasOverflowTabs) return;
+    this.overflowRovingFocused = true;
+    void this.triggerEl?.setFocus?.();
+  }
+
+  private handleOverflowFocus = () => {
+    this.overflowRovingFocused = true;
+  };
+
+  private handleOverflowBlur = () => {
+    this.overflowRovingFocused = false;
+  };
+
   private handleTriggerKeyDown(e: KeyboardEvent) {
     if (!this.hasOverflowTabs) return;
 
     if (!this.menuOpen) {
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        this.overflowRovingFocused = false;
+        void this.visibleTabGroupEl?.focusLastTab();
+        return;
+      }
+
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         this.toggleTabMenu({ focusVisible: true });
       }
@@ -645,7 +667,13 @@ export class BarNav {
                   }}
                   tabs={renderedTabs}
                   value={this.effectiveValue}
+                  selectionFollowsFocus={false}
+                  rovingEnabled={!this.overflowRovingFocused}
                   onDsChange={(e: Event) => this.handleTabChange(e)}
+                  onDsRovingExit={(e: CustomEvent<'start' | 'end'>) => this.handleTabRovingExit(e)}
+                  onFocusin={() => {
+                    this.overflowRovingFocused = false;
+                  }}
                 />
               </div>
             )}
@@ -666,6 +694,7 @@ export class BarNav {
                 icon="Ellipses"
                 isActive={this.menuOpen}
                 activeFill={false}
+                focusTabIndex={this.overflowRovingFocused ? 0 : -1}
                 ref={(el?: HTMLDsButtonUnfilledIconElement) => {
                   this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;
                 }}
@@ -673,6 +702,8 @@ export class BarNav {
                 expanded={this.menuOpen}
                 aria-label="More tabs"
                 onDsClick={() => this.toggleTabMenu({ focusVisible: false })}
+                onFocusin={this.handleOverflowFocus}
+                onFocusout={this.handleOverflowBlur}
                 onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}
               />
             )}

package/src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx

@@ -46,6 +46,12 @@ export class ButtonUnfilledIcon {
   @Prop() haspopup: string | undefined;
   @Prop() pressed: boolean | undefined;
 
+  /**
+   * Native `tabindex` for roving keyboard groups in shell chrome.
+   * Omit for the default button tab stop (`0`).
+   */
+  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;
+
   @Event() dsClick!: EventEmitter<MouseEvent>;
   @Event() dsChange!: EventEmitter<boolean>;
 
@@ -67,6 +73,7 @@ export class ButtonUnfilledIcon {
 
     const cls: Record<string, boolean> = {
       'button-icon': true,
+      'ds-focus-ring-inset': true,
       'button-icon--active': this.isActive,
       'button-icon--active-fill': this.isActive && this.activeFill,
       'button-icon--bordered': this.hasBorder,
@@ -87,6 +94,7 @@ export class ButtonUnfilledIcon {
           type={this.type}
           class={cls}
           disabled={this.inactive}
+          tabIndex={this.focusTabIndex ?? 0}
           aria-label={this.ariaLabel}
           aria-controls={this.controls}
           aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -143,14 +143,14 @@ export class PanelNav {
   @Watch('groups')
   onGroupsChange(val: string | PanelNavGroup[]) {
     this.parsedGroups = parsePanelNavGroups(val);
-    this.syncRovingIndex();
+    this.rovingIndex = 0;
     this.syncActiveFromUrl();
   }
 
   @Watch('activeId')
   @Watch('urlDerivedActiveId')
   onActiveIdChange() {
-    this.syncRovingIndex();
+    /* Active route updates aria-current only — roving tab stop stays user-controlled. */
   }
 
   @Watch('currentUrl')
@@ -288,26 +288,112 @@ export class PanelNav {
     return this.parsedGroups.flatMap(g => g.items);
   }
 
-  private syncRovingIndex() {
-    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);
-    this.rovingIndex = idx >= 0 ? idx : 0;
+  private getRovingTotal(): number {
+    return 1 + this.getAllItems().length + 2;
   }
 
-  private handleItemKeyDown(e: KeyboardEvent, index: number) {
-    const total = this.getAllItems().length;
+  private getFooterRovingIndex(): number {
+    return 1 + this.getAllItems().length;
+  }
+
+  private getUserRovingIndex(): number {
+    return this.getFooterRovingIndex() + 1;
+  }
+
+  private getRovingElement(index: number): HTMLElement | null {
+    const itemCount = this.getAllItems().length;
+    if (index === 0) {
+      return this.el.querySelector('.panel-nav__header-btn');
+    }
+    if (index >= 1 && index <= itemCount) {
+      const items = this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item');
+      return items[index - 1] ?? null;
+    }
+    if (index === this.getFooterRovingIndex()) {
+      return this.el.querySelector('.panel-nav__footer-btn .button-icon');
+    }
+    if (index === this.getUserRovingIndex()) {
+      return this.el.querySelector('.panel-nav__footer-user');
+    }
+    return null;
+  }
+
+  private focusRovingAt(index: number) {
+    this.rovingIndex = index;
+    this.getRovingElement(index)?.focus({ preventScroll: true });
+  }
+
+  private activateRovingIndex(index: number) {
+    const itemCount = this.getAllItems().length;
+    const items = this.getAllItems();
+    if (index === 0) {
+      this.handleToggle();
+      return;
+    }
+    if (index >= 1 && index <= itemCount) {
+      this.handleItemClick(items[index - 1].id);
+      return;
+    }
+    if (index === this.getFooterRovingIndex()) {
+      this.handleFooterAction();
+      return;
+    }
+    if (index === this.getUserRovingIndex()) {
+      const anchor = this.el.querySelector(`#${PANEL_NAV_USER_MENU_ANCHOR_ID}`) as HTMLElement | null;
+      if (anchor) this.dsNavUserAction.emit({ anchor });
+    }
+  }
+
+  private handleRovingKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.activateRovingIndex(index);
+      return;
+    }
+
+    const total = this.getRovingTotal();
+    const footerIdx = this.getFooterRovingIndex();
+    const userIdx = this.getUserRovingIndex();
     let next: number;
+
     switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;
-      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;
-      case 'Home':      e.preventDefault(); next = 0; break;
-      case 'End':       e.preventDefault(); next = total - 1; break;
-      default: return;
+      case 'ArrowDown':
+        e.preventDefault();
+        if (index === footerIdx) next = userIdx;
+        else if (index === userIdx) next = 0;
+        else next = (index + 1) % total;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (index === 0) next = userIdx;
+        else if (index === userIdx) next = footerIdx;
+        else next = (index - 1 + total) % total;
+        break;
+      case 'ArrowRight':
+        if (index === footerIdx) {
+          e.preventDefault();
+          next = userIdx;
+        } else return;
+        break;
+      case 'ArrowLeft':
+        if (index === userIdx) {
+          e.preventDefault();
+          next = footerIdx;
+        } else return;
+        break;
+      case 'Home':
+        e.preventDefault();
+        next = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        next = userIdx;
+        break;
+      default:
+        return;
     }
-    this.rovingIndex = next;
-    const items = Array.from(
-      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')
-    );
-    items[next]?.focus();
+
+    this.focusRovingAt(next);
   }
 
   private checkScroll() {
@@ -411,6 +497,7 @@ export class PanelNav {
 
   private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {
     const isActive = item.id === this.effectiveActiveId;
+    const rovingPosition = idx + 1;
 
     const itemContent = [
       <span class="panel-nav__item-icon">
@@ -446,10 +533,10 @@ export class PanelNav {
       },
       'aria-current': isActive ? ('page' as const) : undefined,
       title: collapsed ? item.label : undefined,
-      tabIndex: idx === this.rovingIndex ? 0 : -1,
+      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,
       onClick: () => this.handleItemClick(item.id),
-      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),
-      onFocus: () => { this.rovingIndex = idx; },
+      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),
+      onFocus: () => { this.rovingIndex = rovingPosition; },
     };
 
     const useAnchor = this.routerMode === 'anchor' && item.href;
@@ -487,7 +574,10 @@ export class PanelNav {
             <button
               type="button"
               class="panel-nav__header-btn ds-focus-ring-inset"
+              tabIndex={this.rovingIndex === 0 ? 0 : -1}
               onClick={() => this.handleToggle()}
+              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}
+              onFocus={() => { this.rovingIndex = 0; }}
               aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}
               aria-expanded={collapsed ? 'false' : 'true'}
             >
@@ -543,9 +633,12 @@ export class PanelNav {
               class="panel-nav__footer-btn"
               icon={isDashboardChrome ? 'Gear' : 'Dashboard'}
               activeFill={false}
+              focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}
               title={isDashboardChrome ? 'Settings' : 'Dashboard'}
               aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}
               onDsClick={() => this.handleFooterAction()}
+              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}
+              onFocusin={() => { this.rovingIndex = this.getFooterRovingIndex(); }}
             />
 
             {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}
@@ -553,8 +646,11 @@ export class PanelNav {
               type="button"
               id={PANEL_NAV_USER_MENU_ANCHOR_ID}
               class="panel-nav__item panel-nav__footer-user ds-focus-ring-inset"
+              tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}
               aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}
               onClick={(e) => this.handleUserAction(e)}
+              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}
+              onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}
             >
               <span class="panel-nav__item-label panel-nav__footer-user-label">
                 <span class="panel-nav__item-label-text">

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -51,12 +51,21 @@ export class PanelTools {
   /** Suppresses width transition until the host has painted its initial open state. */
   @State() private readyForMotion = false;
 
+  @State() private rovingIndex = 0;
+
   private motionEnableGeneration = 0;
 
   private get railItems(): PanelToolsItem[] {
     return parsePanelToolsItems(this.items, this.itemsJson);
   }
 
+  private get orderedRailItems(): PanelToolsItem[] {
+    const railItems = this.railItems;
+    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
+    return headerItem ? [headerItem, ...bodyItems] : bodyItems;
+  }
+
   disconnectedCallback() {
     this.el.removeEventListener('transitionend', this.handleTransitionEnd);
     this.motionEnableGeneration += 1;
@@ -102,6 +111,7 @@ export class PanelTools {
   @Watch('items')
   @Watch('itemsJson')
   itemsChanged() {
+    this.rovingIndex = 0;
     this.deferMotionEnable();
   }
 
@@ -142,7 +152,40 @@ export class PanelTools {
     this.dsToolChange.emit({ id, selected });
   };
 
-  private renderRailAction(item: PanelToolsItem) {
+  private focusRailAt(index: number) {
+    const items = this.orderedRailItems;
+    if (!items.length) return;
+    const bounded = ((index % items.length) + items.length) % items.length;
+    this.rovingIndex = bounded;
+    const actions = Array.from(
+      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),
+    );
+    actions[bounded]?.focus({ preventScroll: true });
+  }
+
+  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {
+    const items = this.orderedRailItems;
+    if (!items.length) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleToolChange(items[index].id);
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.focusRailAt(index + 1);
+      return;
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.focusRailAt(index - 1);
+    }
+  };
+
+  private renderRailAction(item: PanelToolsItem, index: number) {
     return (
       <ds-button-unfilled-icon
         key={item.id}
@@ -152,18 +195,21 @@ export class PanelTools {
         activeFill={false}
         dot={item.dot ?? false}
         inactive={item.inactive}
+        focusTabIndex={index === this.rovingIndex ? 0 : -1}
         aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}
         pressed={this.isRailSelected(item.id)}
-        onDsChange={() => this.handleToolChange(item.id)}
+        onFocusin={() => { this.rovingIndex = index; }}
+        onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}
+        onDsClick={() => this.handleToolChange(item.id)}
       />
     );
   }
 
   render() {
     const headerLabel = this.headerLabel();
-    const railItems = this.railItems;
-    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
-    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const orderedRailItems = this.orderedRailItems;
+    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
     const showDrawerChrome = this.isDrawerPresent();
     const drawerResting = panelToolsDrawerResting(this.open, this.motion);
 
@@ -181,6 +227,19 @@ export class PanelTools {
         aria-label="Tools"
       >
         <div class="panel-tools__layout">
+          <nav class="panel-tools__rail" aria-label="Tool shortcuts">
+            {headerItem ? (
+              <div class="panel-tools__rail-header">
+                {this.renderRailAction(headerItem, 0)}
+              </div>
+            ) : null}
+            <div class="panel-tools__rail-body">
+              {bodyItems.map((item, bodyIdx) =>
+                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),
+              )}
+            </div>
+          </nav>
+
           <div
             class={{
               'panel-tools__drawer': true,
@@ -247,15 +306,6 @@ export class PanelTools {
               </div>
             </div>
           </div>
-
-          <nav class="panel-tools__rail" aria-label="Tool shortcuts">
-            {headerItem ? (
-              <div class="panel-tools__rail-header">{this.renderRailAction(headerItem)}</div>
-            ) : null}
-            <div class="panel-tools__rail-body">
-              {bodyItems.map(item => this.renderRailAction(item))}
-            </div>
-          </nav>
         </div>
       </Host>
     );