From fb49ec980c4967028c84391111d843d70fc021ef Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Mon, 4 May 2026 20:55:16 +0200
Subject: [PATCH 01/11] fix(toolbar): skip invisible (overflow-collapsed) items
 in keyboard navigation

Items with dx-toolbar-item-invisible class have display:none and are not
focusable. _getFocusableItems() now excludes them, fixing AC-1.1.3 where
ArrowRight from SelectBox tried to focus a hidden button.

All 10 AC-1.1 acceptance criteria now pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../js/__internal/ui/toolbar/toolbar.ts       | 273 +++++++++++++++++-
 1 file changed, 270 insertions(+), 3 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index ae02af7499e3..ee1f634e650e 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -1,3 +1,5 @@
+import eventsEngine from '@js/common/core/events/core/events_engine';
+import { addNamespace, normalizeKeyName } from '@js/common/core/events/utils/index';
 import registerComponent from '@js/core/component_registrator';
 import type { dxElementWrapper } from '@js/core/renderer';
 import type { Item } from '@js/ui/toolbar';
@@ -7,18 +9,33 @@ import { MultiLineStrategy } from './strategy/toolbar.multiline';
 import { SingleLineStrategy } from './strategy/toolbar.singleline';
 import type { ToolbarBaseProperties } from './toolbar.base';
 import ToolbarBase from './toolbar.base';
-import { toggleItemFocusableElementTabIndex } from './toolbar.utils';
+import { resolveItemFocusTarget } from './toolbar.utils';
 
 const TOOLBAR_MULTILINE_CLASS = 'dx-toolbar-multiline';
 const TOOLBAR_AUTO_HIDE_TEXT_CLASS = 'dx-toolbar-text-auto-hide';
+const TOOLBAR_MENU_CONTAINER_CLASS = 'dx-toolbar-menu-container';
+const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
+const TOOLBAR_ITEM_INVISIBLE_CLASS = 'dx-toolbar-item-invisible';
+const KBN_NAMESPACE = 'toolbar-keyboard-nav';
 
 export interface Properties extends ToolbarBaseProperties {
   menuContainer?: string | Element | undefined;
   overflowMenuVisible?: boolean;
 }
+
 class Toolbar extends ToolbarBase<Properties> {
   _layoutStrategy!: MultiLineStrategy | SingleLineStrategy;
 
+  _activeItemIndex = 0;
+
+  // True when focus has moved into the active item's widget (ButtonGroup, etc.).
+  // Arrow keys pass through to the widget; Esc returns to toolbar navigation.
+  _insideActiveItem = false;
+
+  _keyboardNavHandler: EventListener | undefined;
+
+  _keyboardNavContainer: Element | undefined;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -41,11 +58,15 @@ class Toolbar extends ToolbarBase<Properties> {
     super._dimensionChanged();
 
     this._layoutStrategy._dimensionChanged();
+    this._syncRovingTabIndex();
   }
 
   _initMarkup(): void {
+    this._activeItemIndex = 0;
+
     super._initMarkup();
 
+    this._attachKeyboardNavigation();
     this._updateFocusableItemsTabIndex();
 
     this._layoutStrategy._initMarkup();
@@ -88,6 +109,8 @@ class Toolbar extends ToolbarBase<Properties> {
     super._postProcessRenderItems();
 
     this._layoutStrategy._renderMenuItems();
+
+    this._syncRovingTabIndex();
   }
 
   _renderItem(
@@ -148,7 +171,7 @@ class Toolbar extends ToolbarBase<Properties> {
     this._layoutStrategy._itemOptionChanged(item, property, value);
     // @ts-expect-error ts-error
     if (property === 'disabled' || property === 'options.disabled') {
-      toggleItemFocusableElementTabIndex(this, item);
+      this._syncRovingTabIndex();
     }
 
     if (property === 'location') {
@@ -157,7 +180,246 @@ class Toolbar extends ToolbarBase<Properties> {
   }
 
   _updateFocusableItemsTabIndex(): void {
-    this._getToolbarItems().forEach((item) => toggleItemFocusableElementTabIndex(this, item));
+    this._syncRovingTabIndex();
+  }
+
+  /**
+   * Returns the focus targets of all enabled widget items visible in the toolbar,
+   * plus the overflow "More" button if present. Used for roving tabindex navigation.
+   */
+  _getFocusableItems(): dxElementWrapper[] {
+    const result: dxElementWrapper[] = [];
+    const toolbarDisabled = !!this.option('disabled');
+
+    this._getToolbarItems().forEach((item) => {
+      const $item = this._findItemElementByItem(item);
+      if (!$item.length) return;
+
+      const itemData = this._getItemData($item);
+      if ($item.hasClass(TOOLBAR_ITEM_INVISIBLE_CLASS)) return; // collapsed into overflow
+      const isDisabled = !!(itemData.options?.disabled ?? itemData.disabled ?? toolbarDisabled);
+      if (isDisabled) return;
+
+      const $focusTarget = resolveItemFocusTarget($item, itemData);
+      if ($focusTarget) {
+        result.push($focusTarget);
+      }
+    });
+
+    const $overflowTarget = this._getOverflowButtonFocusTarget();
+    if ($overflowTarget && !toolbarDisabled) {
+      result.push($overflowTarget);
+    }
+
+    return result;
+  }
+
+  /**
+   * Returns the focus target of the overflow "More" button, or undefined if
+   * the toolbar is multiline or the button is hidden.
+   */
+  _getOverflowButtonFocusTarget(): dxElementWrapper | undefined {
+    if (this._isMultiline()) return undefined;
+
+    const $menuContainer = this._$toolbarItemsContainer?.find(`.${TOOLBAR_MENU_CONTAINER_CLASS}`);
+    if (!$menuContainer?.length || $menuContainer.hasClass(INVISIBLE_STATE_CLASS)) {
+      return undefined;
+    }
+
+    const $button = $menuContainer.find('.dx-button');
+    return $button.length ? $button.first() : undefined;
+  }
+
+  /**
+   * Applies the roving tabindex: sets tabIndex=0 on the active item's focus target,
+   * tabIndex=-1 on all others.
+   */
+  _syncRovingTabIndex(): void {
+    this._getToolbarItems().forEach((item) => {
+      const $item = this._findItemElementByItem(item);
+      if (!$item.length) return;
+      const itemData = this._getItemData($item);
+      resolveItemFocusTarget($item, itemData)?.attr('tabIndex', -1);
+    });
+
+    this._getOverflowButtonFocusTarget()?.attr('tabIndex', -1);
+
+    const focusableItems = this._getFocusableItems();
+    if (!focusableItems.length) return;
+
+    if (this._activeItemIndex >= focusableItems.length) {
+      this._activeItemIndex = focusableItems.length - 1;
+    }
+
+    focusableItems[this._activeItemIndex].attr('tabIndex', 0);
+  }
+
+  /** Moves focus to the item at the given index and updates the roving tabindex. */
+  _setActiveItem(index: number): void {
+    const focusableItems = this._getFocusableItems();
+    if (!focusableItems.length || index < 0 || index >= focusableItems.length) return;
+
+    this._activeItemIndex = index;
+    this._syncRovingTabIndex();
+    (focusableItems[index].get(0) as HTMLElement | undefined)?.focus();
+  }
+
+  _attachKeyboardNavigation(): void {
+    const container = this._$toolbarItemsContainer.get(0);
+    // Use capture phase so we intercept before inner widgets (e.g. ButtonGroup)
+    // stop propagation on their own arrow-key handlers.
+    this._keyboardNavHandler = (e: Event): void => {
+      this._handleKeyboardNavigation(e as KeyboardEvent);
+    };
+    container.addEventListener('keydown', this._keyboardNavHandler, true);
+    this._keyboardNavContainer = container;
+    eventsEngine.on(container, addNamespace('focusin', KBN_NAMESPACE), (e): void => { this._handleFocusIn(e); });
+  }
+
+  _detachKeyboardNavigation(): void {
+    if (this._keyboardNavContainer) {
+      if (this._keyboardNavHandler) {
+        this._keyboardNavContainer.removeEventListener('keydown', this._keyboardNavHandler, true);
+      }
+      eventsEngine.off(this._keyboardNavContainer, addNamespace('focusin', KBN_NAMESPACE));
+      this._keyboardNavContainer = undefined;
+      this._keyboardNavHandler = undefined;
+    }
+  }
+
+  _handleKeyboardNavigation(e: KeyboardEvent): void {
+    const key = normalizeKeyName(e as Parameters<typeof normalizeKeyName>[0]);
+    if (!key) return;
+
+    const focusableItems = this._getFocusableItems();
+
+    // Esc: exit "inside widget" mode → return focus to the toolbar-level focus target.
+    if (key === 'escape') {
+      if (this._insideActiveItem) {
+        this._insideActiveItem = false;
+        const $target = focusableItems[this._activeItemIndex];
+        ($target?.get(0) as HTMLElement | undefined)?.focus();
+        e.stopPropagation();
+      }
+      return;
+    }
+
+    // While inside a widget, pass all keys through.
+    if (this._insideActiveItem) return;
+
+    // Toolbar level: only act when focus is on one of our focus targets.
+    const targetEl = e.target as Element;
+    const isOnToolbarItem = focusableItems.some(($ft) => {
+      const el = $ft.get(0);
+      return el === targetEl || el?.contains(targetEl);
+    });
+    if (!isOnToolbarItem) return;
+
+    if (key === 'enter' || key === 'space') {
+      const activeEl = focusableItems[this._activeItemIndex]?.get(0) as HTMLElement | undefined;
+      if (!activeEl) return;
+
+      // Standalone ButtonGroup (not DropDownButton): intercept Enter/Space to prevent
+      // immediate button activation. Enter navigation mode and focus the first button.
+      const isStandaloneButtonGroup = activeEl.classList.contains('dx-buttongroup')
+        && !activeEl.closest('.dx-dropdownbutton');
+      if (!isStandaloneButtonGroup) return; // For Button, DropDownButton, etc.: pass through.
+
+      e.preventDefault();
+      e.stopPropagation();
+      const firstBtn = activeEl.querySelector<HTMLElement>('.dx-button:not(.dx-state-disabled)');
+      if (!firstBtn) return;
+      this._insideActiveItem = true;
+      firstBtn.focus();
+      return;
+    }
+
+    // Arrow / Home / End: navigate between toolbar items.
+    const isVertical = this.$element().attr('aria-orientation') === 'vertical';
+    const isRTL = !!this.option('rtlEnabled');
+
+    let direction: 'next' | 'prev' | 'first' | 'last' | null = null;
+
+    if (key === 'home') {
+      direction = 'first';
+    } else if (key === 'end') {
+      direction = 'last';
+    } else if (!isVertical) {
+      if (key === 'rightArrow') direction = isRTL ? 'prev' : 'next';
+      else if (key === 'leftArrow') direction = isRTL ? 'next' : 'prev';
+    } else if (key === 'downArrow') {
+      direction = 'next';
+    } else if (key === 'upArrow') {
+      direction = 'prev';
+    }
+
+    if (direction === null) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!focusableItems.length) return;
+
+    let newIndex = this._activeItemIndex;
+
+    switch (direction) {
+      case 'next':
+        newIndex = Math.min(this._activeItemIndex + 1, focusableItems.length - 1);
+        break;
+      case 'prev':
+        newIndex = Math.max(this._activeItemIndex - 1, 0);
+        break;
+      case 'first':
+        newIndex = 0;
+        break;
+      case 'last':
+        newIndex = focusableItems.length - 1;
+        break;
+      default:
+        break;
+    }
+
+    if (newIndex !== this._activeItemIndex) {
+      this._setActiveItem(newIndex);
+    }
+  }
+
+  /**
+   * After a DropDownButton opens its popup via keyboard (Enter), moves focus to
+   * the first focusable element inside the popup overlay so the user can navigate
+   * the list with arrow keys without needing to Tab.
+   */
+  _focusOpenDropDownPopup(): void {
+    // Exclude wrappers that DevExtreme has hidden (they stay in the DOM).
+    const popupFocusTarget = document.querySelector<HTMLElement>(
+      '.dx-dropdownbutton-popup-wrapper:not([aria-hidden="true"]) [tabindex="0"]',
+    );
+    popupFocusTarget?.focus();
+  }
+
+  _handleFocusIn(e: { target: EventTarget | null }): void {
+    const targetEl = e.target as Element;
+    const focusableItems = this._getFocusableItems();
+
+    // Reset "inside widget" mode when focus comes back to a toolbar-level focus target.
+    const index = focusableItems.findIndex(($ft) => {
+      const el = $ft.get(0) as Element | undefined;
+      return el === targetEl || (!!el && el.contains(targetEl));
+    });
+
+    if (index === -1) return;
+
+    // If focus returns to the top-level focus target (not a child button inside ButtonGroup),
+    // exit inside-widget mode.
+    const isOnFocusTarget = focusableItems[index]?.get(0) === targetEl;
+    if (isOnFocusTarget) {
+      this._insideActiveItem = false;
+    }
+
+    if (index !== this._activeItemIndex) {
+      this._activeItemIndex = index;
+      this._syncRovingTabIndex();
+    }
   }
 
   _isMenuItem(itemData: Item): boolean {
@@ -191,6 +453,11 @@ class Toolbar extends ToolbarBase<Properties> {
     }
   }
 
+  _dispose(): void {
+    this._detachKeyboardNavigation();
+    super._dispose();
+  }
+
   // it is not public
   updateDimensions(): void {
     this._dimensionChanged();

From 12ed56c4a456351a52d542e0cb0609ffe9ce9390 Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 07:27:01 +0200
Subject: [PATCH 02/11] feat(toolbar): AC-1.2 nested widget keyboard navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DropDownButton/SelectBox: Enter/Space/↓ opens popup, focus in list, Esc returns to item, ←/→ navigate toolbar
- ButtonGroup: ←/→ navigate toolbar (↑/↓ handled internally by widget)
- TextBox: ←/→ navigate toolbar (toolbar mode); Enter activates edit mode (←/→ move cursor, typing works); Esc exits edit mode
- Block char keys (letters, Backspace, Delete, Space) for TextBox in toolbar mode
- Fix rogue-tabindex: _handleFocusIn always calls _syncRovingTabIndex unconditionally
- Added dxTextBox search item to playground for testing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../js/__internal/ui/toolbar/toolbar.ts       | 164 ++++--
 .../js/__internal/ui/toolbar/toolbar.utils.ts |  69 ++-
 packages/devextreme/playground/jquery.html    | 490 +++++++++++++++++-
 3 files changed, 652 insertions(+), 71 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index ee1f634e650e..82bdf319cea6 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -1,7 +1,7 @@
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import { addNamespace, normalizeKeyName } from '@js/common/core/events/utils/index';
 import registerComponent from '@js/core/component_registrator';
-import type { dxElementWrapper } from '@js/core/renderer';
+import $, { type dxElementWrapper } from '@js/core/renderer';
 import type { Item } from '@js/ui/toolbar';
 import type { OptionChanged } from '@ts/core/widget/types';
 
@@ -292,22 +292,29 @@ class Toolbar extends ToolbarBase<Properties> {
     if (!key) return;
 
     const focusableItems = this._getFocusableItems();
+    const activeEl = focusableItems[this._activeItemIndex]?.get(0) as HTMLElement | undefined;
 
-    // Esc: exit "inside widget" mode → return focus to the toolbar-level focus target.
+    // ── Esc ──────────────────────────────────────────────────────────────────
     if (key === 'escape') {
       if (this._insideActiveItem) {
         this._insideActiveItem = false;
-        const $target = focusableItems[this._activeItemIndex];
-        ($target?.get(0) as HTMLElement | undefined)?.focus();
-        e.stopPropagation();
+        // For inline widgets (TextBox, ButtonGroup inside toolbar DOM): explicitly refocus
+        // and stop propagation so the widget doesn't steal focus back.
+        // For popup widgets (popup rendered outside toolbar DOM): the widget's own Esc
+        // closes the popup and returns focus here; _handleFocusIn then resets the flag.
+        const isInsideToolbar = !!this._keyboardNavContainer?.contains(e.target as Element);
+        if (isInsideToolbar) {
+          activeEl?.focus();
+          e.stopPropagation();
+        }
       }
       return;
     }
 
-    // While inside a widget, pass all keys through.
+    // ── Widget mode: pass all keys through ───────────────────────────────────
     if (this._insideActiveItem) return;
 
-    // Toolbar level: only act when focus is on one of our focus targets.
+    // ── Must be on a toolbar-level focus target ───────────────────────────────
     const targetEl = e.target as Element;
     const isOnToolbarItem = focusableItems.some(($ft) => {
       const el = $ft.get(0);
@@ -315,29 +322,65 @@ class Toolbar extends ToolbarBase<Properties> {
     });
     if (!isOnToolbarItem) return;
 
+    if (!activeEl) return;
+
+    // ── Categorise active item ────────────────────────────────────────────────
+    const isInsideDropDownButton = !!activeEl.closest('.dx-dropdownbutton');
+    const isInput = activeEl.tagName === 'INPUT';
+    const isSelectBox = isInput && !!activeEl.closest('.dx-selectbox');
+    const isTextBox = isInput && !isSelectBox;
+
+    const isVertical = this.$element().attr('aria-orientation') === 'vertical';
+    const isRTL = !!this.option('rtlEnabled');
+
+    // ── Enter / Space ─────────────────────────────────────────────────────────
     if (key === 'enter' || key === 'space') {
-      const activeEl = focusableItems[this._activeItemIndex]?.get(0) as HTMLElement | undefined;
-      if (!activeEl) return;
-
-      // Standalone ButtonGroup (not DropDownButton): intercept Enter/Space to prevent
-      // immediate button activation. Enter navigation mode and focus the first button.
-      const isStandaloneButtonGroup = activeEl.classList.contains('dx-buttongroup')
-        && !activeEl.closest('.dx-dropdownbutton');
-      if (!isStandaloneButtonGroup) return; // For Button, DropDownButton, etc.: pass through.
-
-      e.preventDefault();
-      e.stopPropagation();
-      const firstBtn = activeEl.querySelector<HTMLElement>('.dx-button:not(.dx-state-disabled)');
-      if (!firstBtn) return;
-      this._insideActiveItem = true;
-      firstBtn.focus();
+      if (isInsideDropDownButton) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._openDropDownButtonAndFocus(activeEl);
+        return;
+      }
+      if (isSelectBox) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._openSelectBoxAndFocus(activeEl);
+        return;
+      }
+      if (isTextBox) {
+        if (key === 'enter') {
+          // Only Enter activates editing mode (not Space).
+          this._insideActiveItem = true;
+          return; // pass through to input
+        }
+        // Space: stay in toolbar mode, block insertion.
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      // Standalone ButtonGroup or simple Button: pass through unchanged.
       return;
     }
 
-    // Arrow / Home / End: navigate between toolbar items.
-    const isVertical = this.$element().attr('aria-orientation') === 'vertical';
-    const isRTL = !!this.option('rtlEnabled');
+    // ── ↓ opens popup widgets ─────────────────────────────────────────────────
+    if (key === 'downArrow' && !isVertical) {
+      if (isInsideDropDownButton) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._openDropDownButtonAndFocus(activeEl);
+        return;
+      }
+      if (isSelectBox) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._openSelectBoxAndFocus(activeEl);
+        return;
+      }
+      // ButtonGroup or Button: fall through (ButtonGroup handles ↓ internally).
+      return;
+    }
 
+    // ── Arrow / Home / End: toolbar navigation ────────────────────────────────
     let direction: 'next' | 'prev' | 'first' | 'last' | null = null;
 
     if (key === 'home') {
@@ -353,7 +396,18 @@ class Toolbar extends ToolbarBase<Properties> {
       direction = 'prev';
     }
 
-    if (direction === null) return;
+    if (direction === null) {
+      // For TextBox in toolbar mode: block any key that would produce text input
+      // (characters, Backspace, Delete). Tab and F-keys are NOT blocked.
+      if (isTextBox) {
+        const isTextInputKey = e.key.length === 1 || key === 'backspace' || key === 'del';
+        if (isTextInputKey) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+      return;
+    }
 
     e.preventDefault();
     e.stopPropagation();
@@ -385,16 +439,50 @@ class Toolbar extends ToolbarBase<Properties> {
   }
 
   /**
-   * After a DropDownButton opens its popup via keyboard (Enter), moves focus to
-   * the first focusable element inside the popup overlay so the user can navigate
-   * the list with arrow keys without needing to Tab.
+   * Opens a DropDownButton popup using its public API and moves focus
+   * into the popup's scrollable list.
    */
-  _focusOpenDropDownPopup(): void {
-    // Exclude wrappers that DevExtreme has hidden (they stay in the DOM).
-    const popupFocusTarget = document.querySelector<HTMLElement>(
-      '.dx-dropdownbutton-popup-wrapper:not([aria-hidden="true"]) [tabindex="0"]',
+  _openDropDownButtonAndFocus(focusTarget: HTMLElement): void {
+    const dropDownButtonRoot = focusTarget.closest('.dx-dropdownbutton');
+    if (!dropDownButtonRoot) return;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const instance = $(dropDownButtonRoot).data('dxDropDownButton') as unknown as { open: () => void } | undefined;
+    if (!instance) return;
+
+    instance.open();
+    this._insideActiveItem = true;
+
+    // Popup DOM is created synchronously; focus the scrollable list container.
+    const listContainer = document.querySelector<HTMLElement>(
+      '.dx-dropdownbutton-popup-wrapper .dx-scrollview-content',
     );
-    popupFocusTarget?.focus();
+    listContainer?.focus();
+  }
+
+  /**
+   * Opens a SelectBox dropdown and moves focus to the first (or selected) list item.
+   * Temporarily sets tabindex=0 on the item so it can receive focus.
+   */
+  _openSelectBoxAndFocus(focusTarget: HTMLElement): void {
+    const selectBoxRoot = focusTarget.closest('.dx-selectbox');
+    if (!selectBoxRoot) return;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const instance = $(selectBoxRoot).data('dxSelectBox') as unknown as { open: () => void } | undefined;
+    if (!instance) return;
+
+    instance.open();
+    this._insideActiveItem = true;
+
+    // Popup DOM is created synchronously. Focus the selected or first list item.
+    const popupWrapper = document.querySelector<HTMLElement>('.dx-dropdownlist-popup-wrapper');
+    if (!popupWrapper) return;
+
+    const selectedItem = popupWrapper.querySelector<HTMLElement>('.dx-list-item.dx-state-selected');
+    const focusTarget2 = selectedItem ?? popupWrapper.querySelector<HTMLElement>('.dx-list-item');
+    if (!focusTarget2) return;
+
+    focusTarget2.setAttribute('tabindex', '0');
+    focusTarget2.focus();
   }
 
   _handleFocusIn(e: { target: EventTarget | null }): void {
@@ -416,10 +504,10 @@ class Toolbar extends ToolbarBase<Properties> {
       this._insideActiveItem = false;
     }
 
-    if (index !== this._activeItemIndex) {
-      this._activeItemIndex = index;
-      this._syncRovingTabIndex();
-    }
+    this._activeItemIndex = index;
+    // Always sync to clean up any rogue tabindices set by inner widgets
+    // (e.g. dx-list sets tabindex=0 on its scrollview after popup opens).
+    this._syncRovingTabIndex();
   }
 
   _isMenuItem(itemData: Item): boolean {
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
index df6f8d97017f..e6466737f8f9 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
@@ -19,6 +19,41 @@ const getItemInstance = ($element: dxElementWrapper): Widget => {
   return (widgetName && itemData[widgetName]) as Widget;
 };
 
+/**
+ * Resolves the focusable DOM element for a toolbar item widget.
+ * Returns undefined for non-widget items (templates, separators, labels).
+ */
+export function resolveItemFocusTarget(
+  $item: dxElementWrapper,
+  itemData: Item,
+): dxElementWrapper | undefined {
+  const { widget } = itemData;
+
+  if (!widget || !TOOLBAR_ITEMS.includes(widget)) {
+    return undefined;
+  }
+
+  const $widget = $item.find(widget.toLowerCase().replace('dx', '.dx-'));
+  if (!$widget.length) {
+    return undefined;
+  }
+
+  const itemInstance = getItemInstance($widget);
+  if (!itemInstance) {
+    return undefined;
+  }
+
+  let $focusTarget = itemInstance._focusTarget?.();
+
+  if (widget === 'dxDropDownButton') {
+    $focusTarget = $focusTarget?.find(`.${BUTTON_GROUP_CLASS}`);
+  } else {
+    $focusTarget = $focusTarget ?? $(itemInstance.element());
+  }
+
+  return $focusTarget?.length ? $focusTarget : undefined;
+}
+
 export function toggleItemFocusableElementTabIndex(
   context: Toolbar | ListBase | undefined,
   item: Item,
@@ -33,31 +68,15 @@ export function toggleItemFocusableElementTabIndex(
   const itemData = context._getItemData($item);
   const isItemNotFocusable = !!(itemData.options?.disabled || itemData.disabled || context.option('disabled'));
 
-  const { widget } = itemData;
+  const $focusTarget = resolveItemFocusTarget($item, itemData);
+  if (!$focusTarget) {
+    return;
+  }
 
-  if (widget && TOOLBAR_ITEMS.includes(widget)) {
-    const $widget = $item.find(widget.toLowerCase().replace('dx', '.dx-'));
-    if ($widget.length) {
-      const itemInstance = getItemInstance($widget);
-
-      if (!itemInstance) {
-        return;
-      }
-
-      let $focusTarget = itemInstance._focusTarget?.();
-
-      if (widget === 'dxDropDownButton') {
-        $focusTarget = $focusTarget?.find(`.${BUTTON_GROUP_CLASS}`);
-      } else {
-        $focusTarget = $focusTarget ?? $(itemInstance.element());
-      }
-
-      const tabIndex = itemData.options?.tabIndex;
-      if (isItemNotFocusable) {
-        $focusTarget.attr('tabIndex', -1);
-      } else {
-        $focusTarget.attr('tabIndex', tabIndex ?? 0);
-      }
-    }
+  const tabIndex = itemData.options?.tabIndex;
+  if (isItemNotFocusable) {
+    $focusTarget.attr('tabIndex', -1);
+  } else {
+    $focusTarget.attr('tabIndex', tabIndex ?? 0);
   }
 }
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index abaed02d03f2..baa891e5d261 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -41,20 +41,494 @@
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <style>
+        .dx-resizable-handle::after {
+            content: "";
+            position: absolute;
+            width: 9px;
+            height: 36px;
+            border: none;
+            border-radius: 50px;
+            background-color: #fff;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+        }
+
+        .dx-resizable-handle-right::after {
+            top: 50%;
+            right: -5px;
+            transform: translateY(-50%);
+        }
+
+        .dx-toolbar.dx-toolbar-multiline .dx-toolbar-item {
+            margin-bottom: 5px;
+        }
+
+        .widget-container {
+            margin-right: 10px;
+        }
+
+        .resizable-container {
+            padding: 10px;
+            height: 300px;
+            border: 1px dotted #999;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .options-container {
+            margin-top: 20px;
+            padding: 20px;
+            background-color: rgba(191, 191, 191, 0.15);
+            position: relative;
+        }
+
+        .caption {
+            font-size: 18px;
+            font-weight: 500;
+            margin-bottom: 10px;
+        }
+
+        .toolbar-separator {
+            height: 36px;
+            margin: 0 5px;
+            border-left: 1px solid #ddd;
+        }
+
+        .toolbar-menu-separator {
+            height: 1px;
+            border-bottom: 1px solid #ddd;
+        }
+    </style>
 </head>
 <body class="dx-surface">
     <div role="main">
-        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
 
-        <select id="theme-selector" style="display: block;">
-        </select>
-        <br />
-        <div id="button"></div>
+        <div class="dx-viewport demo-container">
+            <div class="widget-container">
+                <div id="resizable-container" class="resizable-container">
+                    <div id="toolbar"></div>
+                </div>
+            </div>
+            <div class="options-container">
+                <div class="caption">Options</div>
+                <div id="toolbar-mode"></div>
+            </div>
+        </div>
+
         <script>
+            const fontSizes = [
+                { size: 10, text: '10px' },
+                { size: 12, text: '12px' },
+                { size: 14, text: '14px' },
+                { size: 16, text: '16px' },
+                { size: 18, text: '18px' },
+            ];
+
+            const lineHeights = [
+                { lineHeight: 1, text: '1' },
+                { lineHeight: 1.35, text: '1.35' },
+                { lineHeight: 1.5, text: '1.5' },
+                { lineHeight: 2, text: '2' },
+            ];
+
+            const fontFamilies = [
+                { text: 'Arial' },
+                { text: 'Courier New' },
+                { text: 'Georgia' },
+                { text: 'Impact' },
+                { text: 'Lucida Console' },
+                { text: 'Tahoma' },
+                { text: 'Times New Roman' },
+            ];
+
+            const headings = [
+                { text: 'Normal text' },
+                { text: 'Heading 1' },
+                { text: 'Heading 2' },
+                { text: 'Heading 3' },
+                { text: 'Heading 4' },
+                { text: 'Heading 5' },
+            ];
+
+            const fontStyles = [
+                {
+                    icon: 'bold',
+                    hint: 'Bold',
+                },
+                {
+                    icon: 'italic',
+                    hint: 'Italic',
+                },
+                {
+                    icon: 'underline',
+                    hint: 'Underlined',
+                },
+                {
+                    icon: 'strike',
+                    hint: 'Strikethrough',
+                },
+            ];
+
+            const textAlignItemsExtended = [
+                {
+                    icon: 'alignleft',
+                    alignment: 'left',
+                    hint: 'Align Left',
+                    text: 'Align left',
+                },
+                {
+                    icon: 'aligncenter',
+                    alignment: 'center',
+                    hint: 'Center',
+                    text: 'Center',
+                },
+                {
+                    icon: 'alignright',
+                    alignment: 'right',
+                    hint: 'Align Right',
+                    text: 'Align right',
+                },
+                {
+                    icon: 'alignjustify',
+                    alignment: 'justify',
+                    hint: 'Justify',
+                    text: 'Justify',
+                },
+            ];
+
+            const textAlignItems = textAlignItemsExtended.map((item) => {
+                const { icon, alignment, hint } = item;
+
+                return {
+                    icon,
+                    alignment,
+                    hint,
+                };
+            });
+
+            const listTypes = [
+                {
+                    icon: 'orderedlist',
+                    alignment: 'orderedlist',
+                    hint: 'Ordered',
+                },
+                {
+                    icon: 'bulletlist',
+                    alignment: 'bulletlist',
+                    hint: 'Bullet',
+                },
+            ];
+
+            const onButtonClick = (name) => {
+                DevExpress.ui.notify(`The "${name}" button has been clicked`);
+            };
+
+            const onSelectionChanged = (name) => {
+                DevExpress.ui.notify(`The "${name}" value has been changed`);
+            };
+
+            const onFontFamilyClick = () => {
+                DevExpress.ui.notify('The "Font Family" value has been changed');
+            };
+
+            const onHeadingClick = () => {
+                DevExpress.ui.notify('The "Heading" value has been changed');
+            };
+
+            const toolbarSeparator = {
+                locateInMenu: 'auto',
+                location: 'before',
+                template(itemData, itemIndex, element) {
+                    $('<div>')
+                        .addClass('toolbar-separator')
+                        .appendTo(element);
+                },
+                menuItemTemplate(itemData, itemIndex, element) {
+                    $('<div>')
+                        .addClass('toolbar-menu-separator')
+                        .appendTo(element);
+                },
+            };
+
+            const toolbarItems = [
+                {
+                    location: 'before',
+                    widget: 'dxButton',
+                    options: {
+                        icon: 'undo',
+                        onClick() {
+                            onButtonClick('Undo');
+                        },
+                    },
+                },
+                {
+                    location: 'before',
+                    widget: 'dxButton',
+                    options: {
+                        icon: 'redo',
+                        onClick() {
+                            onButtonClick('Redo');
+                        },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxDropDownButton',
+                    options: {
+                        width: '100%',
+                        displayExpr: 'text',
+                        keyExpr: 'size',
+                        useSelectMode: true,
+                        items: fontSizes,
+                        selectedItemKey: 14,
+                        itemTemplate(itemData) {
+                            return $('<div>')
+                                .text(itemData.text)
+                                .css('font-size', `${itemData.size}px`);
+                        },
+                        onSelectionChanged() {
+                            onSelectionChanged('Font Size');
+                        },
+                    },
+                },
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxDropDownButton',
+                    options: {
+                        width: '100%',
+                        icon: 'indent',
+                        displayExpr: 'text',
+                        keyExpr: 'lineHeight',
+                        useSelectMode: true,
+                        items: lineHeights,
+                        selectedItemKey: 1.35,
+                        onSelectionChanged() {
+                            onSelectionChanged('Line Height');
+                        },
+                    },
+                },
+                {
+                    locateInMenu: 'auto',
+                    location: 'before',
+                    widget: 'dxSelectBox',
+                    options: {
+                        placeholder: 'Font',
+                        displayExpr: 'text',
+                        dataSource: fontFamilies,
+                        inputAttr: { 'aria-label': 'Font' },
+                        onItemClick() {
+                            onFontFamilyClick();
+                        },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    location: 'before',
+                    widget: 'dxButtonGroup',
+                    options: {
+                        displayExpr: 'text',
+                        items: fontStyles,
+                        keyExpr: 'icon',
+                        stylingMode: 'outlined',
+                        selectionMode: 'multiple',
+                        onItemClick(e) {
+                            onButtonClick(e.itemData.hint);
+                        },
+                    },
+                },
+                {
+                    location: 'before',
+                    template(itemData, itemIndex, element) {
+                        $(element).addClass('toolbar-separator');
+                    },
+                },
+                {
+                    locateInMenu: 'auto',
+                    location: 'before',
+                    widget: 'dxButtonGroup',
+                    template(itemData, itemIndex, element) {
+                        const $buttonGroup = $('<div>').dxButtonGroup({
+                            items: textAlignItems,
+                            keyExpr: 'alignment',
+                            stylingMode: 'outlined',
+                            selectedItemKeys: ['left'],
+                            onItemClick(e) {
+                                onButtonClick(e.itemData.hint);
+                            },
+                        });
+
+                        $buttonGroup.appendTo(element);
+                    },
+                    menuItemTemplate(itemData, itemIndex, element) {
+                        const $buttonGroup = $('<div>').dxButtonGroup({
+                            displayExpr: 'text',
+                            items: textAlignItemsExtended,
+                            keyExpr: 'alignment',
+                            stylingMode: 'outlined',
+                            selectedItemKeys: ['left'],
+                            onItemClick(e) {
+                                onButtonClick(e.itemData.hint);
+                            },
+                        });
+
+                        $buttonGroup.appendTo(element);
+                    },
+                },
+                {
+                    location: 'before',
+                    widget: 'dxButtonGroup',
+                    options: {
+                        items: listTypes,
+                        keyExpr: 'alignment',
+                        stylingMode: 'outlined',
+                        onItemClick(e) {
+                            onButtonClick(e.itemData.hint);
+                        },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    locateInMenu: 'auto',
+                    location: 'before',
+                    widget: 'dxSelectBox',
+                    options: {
+                        displayExpr: 'text',
+                        valueExpr: 'text',
+                        value: headings[0].text,
+                        dataSource: headings,
+                        inputAttr: { 'aria-label': 'Text Style' },
+                        onItemClick() {
+                            onHeadingClick();
+                        },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    location: 'before',
+                    locateInMenu: 'never',
+                    widget: 'dxTextBox',
+                    options: {
+                        placeholder: 'Search...',
+                        width: 120,
+                        inputAttr: { 'aria-label': 'Search' },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'link',
+                        text: 'Link',
+                        onClick() {
+                            onButtonClick('Link');
+                        },
+                    },
+                },
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'image',
+                        text: 'Add image',
+                        onClick() {
+                            onButtonClick('Add Image');
+                        },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'clearformat',
+                        text: 'Clear formating',
+                        onClick() {
+                            onButtonClick('Clear Formating');
+                        },
+                    },
+                },
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'codeblock',
+                        text: 'Code block',
+                        onClick() {
+                            onButtonClick('Code Block');
+                        },
+                    },
+                },
+                {
+                    location: 'before',
+                    locateInMenu: 'auto',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'blockquote',
+                        text: 'Blockquote',
+                        onClick() {
+                            onButtonClick('Blockquote');
+                        },
+                    },
+                },
+                toolbarSeparator,
+                {
+                    location: 'after',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'attach',
+                        text: 'Attach',
+                        onClick() {
+                            onButtonClick('Attach');
+                        },
+                    },
+                },
+                {
+                    locateInMenu: 'always',
+                    widget: 'dxButton',
+                    showText: 'inMenu',
+                    options: {
+                        icon: 'help',
+                        text: 'About',
+                        onClick() {
+                            onButtonClick('About');
+                        },
+                    },
+                },
+            ];
+
             $(() => {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: () => { alert("clicked"); }
+                $('#resizable-container').dxResizable({
+                    minWidth: 500,
+                    minHeight: 150,
+                    maxHeight: 370,
+                    handles: 'right',
+                    area: '.widget-container',
+                });
+
+                const toolbar = $('#toolbar').dxToolbar({
+                    dataSource: toolbarItems,
+                }).dxToolbar('instance');
+
+                $('#toolbar-mode').dxCheckBox({
+                    value: true,
+                    text: 'Multiline mode',
+                    onValueChanged(e) {
+                        toolbar.option('multiline', e.value);
+                    },
                 });
             });
         </script>

From ccf0eb2351fafddb7cca602391b19033e4cc540c Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 07:49:34 +0200
Subject: [PATCH 03/11] feat(toolbar): AC-1.3 mouse vs keyboard sync

- Track mousedown on toolbar container via _lastFocusFromMouse flag
- In _handleFocusIn: if mouse click on TextBox, set _insideActiveItem=true
  (immediate edit mode without pressing Enter)
- Always reset _insideActiveItem when any toolbar item is focused via keyboard
- Clicking other items (BG, buttons, SelectBox) resets _insideActiveItem=false

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../js/__internal/ui/toolbar/toolbar.ts       | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index 82bdf319cea6..18b8bb606159 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -32,8 +32,14 @@ class Toolbar extends ToolbarBase<Properties> {
   // Arrow keys pass through to the widget; Esc returns to toolbar navigation.
   _insideActiveItem = false;
 
+  // True when the most recent focus change inside the toolbar was triggered by a mouse click.
+  // Used to distinguish mouse-initiated focus from keyboard navigation.
+  _lastFocusFromMouse = false;
+
   _keyboardNavHandler: EventListener | undefined;
 
+  _mouseDownHandler: EventListener | undefined;
+
   _keyboardNavContainer: Element | undefined;
 
   _getDefaultOptions(): Properties {
@@ -272,6 +278,10 @@ class Toolbar extends ToolbarBase<Properties> {
       this._handleKeyboardNavigation(e as KeyboardEvent);
     };
     container.addEventListener('keydown', this._keyboardNavHandler, true);
+    this._mouseDownHandler = (): void => {
+      this._lastFocusFromMouse = true;
+    };
+    container.addEventListener('mousedown', this._mouseDownHandler, true);
     this._keyboardNavContainer = container;
     eventsEngine.on(container, addNamespace('focusin', KBN_NAMESPACE), (e): void => { this._handleFocusIn(e); });
   }
@@ -281,6 +291,10 @@ class Toolbar extends ToolbarBase<Properties> {
       if (this._keyboardNavHandler) {
         this._keyboardNavContainer.removeEventListener('keydown', this._keyboardNavHandler, true);
       }
+      if (this._mouseDownHandler) {
+        this._keyboardNavContainer.removeEventListener('mousedown', this._mouseDownHandler, true);
+        this._mouseDownHandler = undefined;
+      }
       eventsEngine.off(this._keyboardNavContainer, addNamespace('focusin', KBN_NAMESPACE));
       this._keyboardNavContainer = undefined;
       this._keyboardNavHandler = undefined;
@@ -489,19 +503,30 @@ class Toolbar extends ToolbarBase<Properties> {
     const targetEl = e.target as Element;
     const focusableItems = this._getFocusableItems();
 
-    // Reset "inside widget" mode when focus comes back to a toolbar-level focus target.
     const index = focusableItems.findIndex(($ft) => {
       const el = $ft.get(0) as Element | undefined;
       return el === targetEl || (!!el && el.contains(targetEl));
     });
 
-    if (index === -1) return;
+    if (index === -1) {
+      this._lastFocusFromMouse = false;
+      return;
+    }
+
+    const focusTargetEl = focusableItems[index]?.get(0) as Element | undefined;
+    const isOnFocusTarget = focusTargetEl === targetEl;
+
+    const fromMouse = this._lastFocusFromMouse;
+    this._lastFocusFromMouse = false;
 
-    // If focus returns to the top-level focus target (not a child button inside ButtonGroup),
-    // exit inside-widget mode.
-    const isOnFocusTarget = focusableItems[index]?.get(0) === targetEl;
     if (isOnFocusTarget) {
-      this._insideActiveItem = false;
+      // For a mouse click on a TextBox, immediately activate edit mode so the user can
+      // type without pressing Enter first. For all other items, always reset to toolbar mode.
+      const isFocusTargetInput = focusTargetEl?.tagName === 'INPUT';
+      const isFocusTargetSelectBox = isFocusTargetInput && !!focusTargetEl?.closest?.('.dx-selectbox');
+      const isFocusTargetTextBox = isFocusTargetInput && !isFocusTargetSelectBox;
+
+      this._insideActiveItem = fromMouse && isFocusTargetTextBox;
     }
 
     this._activeItemIndex = index;

From 67cf113d1878dbb67ede42ce1ac65dbbf9b058a6 Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 09:38:29 +0200
Subject: [PATCH 04/11] feat(toolbar): AC-1.4 template item keyboard navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- resolveItemFocusTarget: detect template items by focusable content
  inside .dx-item-content and return the container as the focus target
- TEMPLATE_FOCUSABLE_SELECTOR: exported constant for input/button/select/textarea
- _syncRovingTabIndex: suppress inner focusables (tabindex=-1) in toolbar
  mode; restore natural tabindex when template is active + in edit mode
- _handleKeyboardNavigation: detect isTemplateContainer; Enter enters the
  template (delegates to first inner focusable), Space prevents scroll
- _enterTemplateItem: new method – sets _insideActiveItem=true, syncs
  tabindex, focuses first inner focusable element
  _insideActiveItem=true for template containers (handles mouse click on
  inner elements), resets to false for all other items
- playground: add template item with <input> + <button> for manual testing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../js/__internal/ui/toolbar/toolbar.ts       | 48 ++++++++++++++++-
 .../js/__internal/ui/toolbar/toolbar.utils.ts | 53 +++++++++++++------
 packages/devextreme/playground/jquery.html    | 10 ++++
 3 files changed, 92 insertions(+), 19 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index 18b8bb606159..ba093ee7af48 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -9,7 +9,7 @@ import { MultiLineStrategy } from './strategy/toolbar.multiline';
 import { SingleLineStrategy } from './strategy/toolbar.singleline';
 import type { ToolbarBaseProperties } from './toolbar.base';
 import ToolbarBase from './toolbar.base';
-import { resolveItemFocusTarget } from './toolbar.utils';
+import { resolveItemFocusTarget, TEMPLATE_FOCUSABLE_SELECTOR } from './toolbar.utils';
 
 const TOOLBAR_MULTILINE_CLASS = 'dx-toolbar-multiline';
 const TOOLBAR_AUTO_HIDE_TEXT_CLASS = 'dx-toolbar-text-auto-hide';
@@ -245,7 +245,13 @@ class Toolbar extends ToolbarBase<Properties> {
       const $item = this._findItemElementByItem(item);
       if (!$item.length) return;
       const itemData = this._getItemData($item);
-      resolveItemFocusTarget($item, itemData)?.attr('tabIndex', -1);
+      const $ft = resolveItemFocusTarget($item, itemData);
+      $ft?.attr('tabIndex', -1);
+      // For template items: also suppress inner focusables so they don't appear
+      // in the global Tab sequence while in toolbar-navigation mode.
+      if ($ft?.get(0)?.classList.contains('dx-item-content')) {
+        $ft.find(TEMPLATE_FOCUSABLE_SELECTOR).attr('tabindex', '-1');
+      }
     });
 
     this._getOverflowButtonFocusTarget()?.attr('tabIndex', -1);
@@ -258,6 +264,13 @@ class Toolbar extends ToolbarBase<Properties> {
     }
 
     focusableItems[this._activeItemIndex].attr('tabIndex', 0);
+
+    // Template item in edit mode: restore inner focusables to natural tabindex so
+    // the user can Tab through them and interact normally.
+    const activeEl = focusableItems[this._activeItemIndex].get(0);
+    if (activeEl?.classList.contains('dx-item-content') && this._insideActiveItem) {
+      $(activeEl).find(TEMPLATE_FOCUSABLE_SELECTOR).removeAttr('tabindex');
+    }
   }
 
   /** Moves focus to the item at the given index and updates the roving tabindex. */
@@ -343,6 +356,7 @@ class Toolbar extends ToolbarBase<Properties> {
     const isInput = activeEl.tagName === 'INPUT';
     const isSelectBox = isInput && !!activeEl.closest('.dx-selectbox');
     const isTextBox = isInput && !isSelectBox;
+    const isTemplateContainer = activeEl.classList.contains('dx-item-content');
 
     const isVertical = this.$element().attr('aria-orientation') === 'vertical';
     const isRTL = !!this.option('rtlEnabled');
@@ -373,6 +387,18 @@ class Toolbar extends ToolbarBase<Properties> {
         return;
       }
       // Standalone ButtonGroup or simple Button: pass through unchanged.
+      if (isTemplateContainer) {
+        if (key === 'enter') {
+          e.preventDefault();
+          e.stopPropagation();
+          this._enterTemplateItem(activeEl);
+          return;
+        }
+        // Space: prevent accidental page scroll, otherwise no-op.
+        e.preventDefault();
+        return;
+      }
+      // ButtonGroup or Button: pass through unchanged.
       return;
     }
 
@@ -499,6 +525,18 @@ class Toolbar extends ToolbarBase<Properties> {
     focusTarget2.focus();
   }
 
+  /**
+   * Activates a template item container: enters edit mode so the user can interact
+   * with inner focusable elements, and moves focus to the first one.
+   */
+  _enterTemplateItem(containerEl: HTMLElement): void {
+    const firstFocusable = containerEl.querySelector<HTMLElement>(TEMPLATE_FOCUSABLE_SELECTOR);
+    if (!firstFocusable) return;
+    this._insideActiveItem = true;
+    this._syncRovingTabIndex();
+    firstFocusable.focus();
+  }
+
   _handleFocusIn(e: { target: EventTarget | null }): void {
     const targetEl = e.target as Element;
     const focusableItems = this._getFocusableItems();
@@ -527,6 +565,12 @@ class Toolbar extends ToolbarBase<Properties> {
       const isFocusTargetTextBox = isFocusTargetInput && !isFocusTargetSelectBox;
 
       this._insideActiveItem = fromMouse && isFocusTargetTextBox;
+    } else {
+      // Focus landed on a child element inside the item (e.g. mouse click on an inner
+      // input/button inside a template). Enter edit mode for template containers;
+      // reset to toolbar mode for everything else (guards against stale state).
+      const isFocusTargetTemplate = !!focusTargetEl?.classList.contains('dx-item-content');
+      this._insideActiveItem = isFocusTargetTemplate;
     }
 
     this._activeItemIndex = index;
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
index e6466737f8f9..5dbe1c380b98 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
@@ -9,6 +9,18 @@ import type Toolbar from './toolbar';
 const BUTTON_GROUP_CLASS = 'dx-buttongroup';
 const TOOLBAR_ITEMS = ['dxAutocomplete', 'dxButton', 'dxCheckBox', 'dxDateBox', 'dxMenu', 'dxSelectBox', 'dxTabs', 'dxTextBox', 'dxButtonGroup', 'dxDropDownButton'];
 
+/**
+ * CSS selector for keyboard-focusable elements inside template item containers.
+ * Used to manage tabindex of inner elements so they don't appear in the global
+ * Tab sequence while the toolbar is in toolbar-navigation mode.
+ */
+export const TEMPLATE_FOCUSABLE_SELECTOR = [
+  'input:not([disabled])',
+  'button:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+].join(', ');
+
 const getItemInstance = ($element: dxElementWrapper): Widget => {
   // @ts-expect-error ts-error
   const itemData = $element?.data();
@@ -29,29 +41,36 @@ export function resolveItemFocusTarget(
 ): dxElementWrapper | undefined {
   const { widget } = itemData;
 
-  if (!widget || !TOOLBAR_ITEMS.includes(widget)) {
-    return undefined;
-  }
+  if (widget && TOOLBAR_ITEMS.includes(widget)) {
+    const $widget = $item.find(widget.toLowerCase().replace('dx', '.dx-'));
+    if (!$widget.length) {
+      return undefined;
+    }
 
-  const $widget = $item.find(widget.toLowerCase().replace('dx', '.dx-'));
-  if (!$widget.length) {
-    return undefined;
-  }
+    const itemInstance = getItemInstance($widget);
+    if (!itemInstance) {
+      return undefined;
+    }
 
-  const itemInstance = getItemInstance($widget);
-  if (!itemInstance) {
-    return undefined;
-  }
+    let $focusTarget = itemInstance._focusTarget?.();
 
-  let $focusTarget = itemInstance._focusTarget?.();
+    if (widget === 'dxDropDownButton') {
+      $focusTarget = $focusTarget?.find(`.${BUTTON_GROUP_CLASS}`);
+    } else {
+      $focusTarget = $focusTarget ?? $(itemInstance.element());
+    }
 
-  if (widget === 'dxDropDownButton') {
-    $focusTarget = $focusTarget?.find(`.${BUTTON_GROUP_CLASS}`);
-  } else {
-    $focusTarget = $focusTarget ?? $(itemInstance.element());
+    return $focusTarget?.length ? $focusTarget : undefined;
+  }
+
+  // Template / custom items: use .dx-item-content as the focus target when the
+  // template contains at least one keyboard-focusable descendant.
+  const $content = $item.find('.dx-item-content').first();
+  if ($content.length && $content.find(TEMPLATE_FOCUSABLE_SELECTOR).length > 0) {
+    return $content;
   }
 
-  return $focusTarget?.length ? $focusTarget : undefined;
+  return undefined;
 }
 
 export function toggleItemFocusableElementTabIndex(
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index baa891e5d261..e2b86f6822dc 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -417,6 +417,16 @@
                     },
                 },
                 toolbarSeparator,
+                {
+                    location: 'before',
+                    locateInMenu: 'never',
+                    template() {
+                        return $('<div style="display:flex;gap:4px;align-items:center">')
+                            .append($('<input placeholder="Filter..." style="width:80px;padding:2px 4px">'))
+                            .append($('<button>Go</button>'));
+                    },
+                },
+                toolbarSeparator,
                 {
                     location: 'before',
                     locateInMenu: 'auto',

From 4848ce5a6198a6e9ca436e144e4923dc0e9c1a9a Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 10:20:05 +0200
Subject: [PATCH 05/11] feat(toolbar): AC-1.5 disabled skip + dynamic item
 removal

AC-1.5.1 (disabled items skip):
- Already working via _getFocusableItems() isDisabled check.
- Playground: added disabled dxButton between Undo/Redo to verify.

AC-1.5.2 (dynamic item removal / focus preservation):
Two root-cause fixes:

1. DOM order in _getFocusableItems():
   Switch from items-array order (_getToolbarItems) to visual DOM
   order (.dx-toolbar-item querySelectorAll). Fixes navigation order
   mismatch when location:'after' items (e.g. Attach button) are
   defined before location:'before' items in the items array but
   appear after them in the toolbar visually.

2. Active-item reference tracking in _initMarkup():
   Before re-render: snapshot the active item's data object reference.
   After re-render: find the same data object in the new DOM and
   update _activeItemIndex to its new position.
   - If item moved (insertion before it): index is corrected.
   - If item removed (deletion): falls back to max(0, savedIndex-1)
     so focus goes to the previous item, not the next one.
   - Overflow button (no item data): always relocated to last index.
   Extracted _findFocusItemIndexByData() helper to keep nesting depth
   within lint limits.

Specification:
- Split old 1.5 into 1.5.1 (disabled) + 1.5.2 (dynamic removal).
- Overflow menu extracted into new section 1.6.
- Removed 'Nice to Have' tier.

Playground:
- Disabled dxButton for AC-1.5.1.
- '+ Add item' / '- Remove added item' buttons for AC-1.5.2.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .copilot/toolbar/specification.md             | 105 ++++++++++++++++++
 .../js/__internal/ui/toolbar/toolbar.ts       |  73 ++++++++++--
 packages/devextreme/playground/jquery.html    |  36 ++++++
 3 files changed, 202 insertions(+), 12 deletions(-)
 create mode 100644 .copilot/toolbar/specification.md

diff --git a/.copilot/toolbar/specification.md b/.copilot/toolbar/specification.md
new file mode 100644
index 000000000000..e7bb9d286afb
--- /dev/null
+++ b/.copilot/toolbar/specification.md
@@ -0,0 +1,105 @@
+# Toolbar — Keyboard Navigation (KBN) Enhancements: Functional Requirements
+
+> **Spec status:** Draft  
+> **Reference:** [W3C APG Toolbar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)
+
+---
+
+## Priority Tiers
+
+| Label | Meaning |
+|-------|---------|
+| ✅ Must Have | Required for the initial release |
+| 💡 Nice to Have | Desirable but can be deferred |
+| 🚫 Out of Scope | Explicitly excluded from this iteration |
+
+---
+
+## ✅ Must Have
+
+### 1. Keyboard Interaction Logic
+
+> Keyboard interactions must follow the **W3C APG Toolbar pattern**.  
+> Navigation within the toolbar must **not** use the `Tab` key.
+
+---
+
+#### 1.1 Core Navigation Keys
+
+| Key | Behavior |
+|-----|----------|
+| `Tab` | Moves focus **into** the toolbar (restoring the previously focused item, or the first item). Pressing `Tab` again **exits** the toolbar entirely. |
+| `→` Right Arrow | Moves focus to the **next** enabled item. |
+| `←` Left Arrow | Moves focus to the **previous** enabled item. |
+| `Home` | Moves focus to the **first** enabled item. |
+| `End` | Moves focus to the **last** enabled item. |
+
+**Boundary behavior:** Focus stops at the edges — pressing `←` on the first item or `→` on the last item does **not** wrap around.
+
+---
+
+#### 1.2 Nested Widget Keyboard Behavior
+
+Behavior when the focused toolbar item is itself an interactive widget:
+
+| Widget Category | Examples | Enter Trigger | Navigation Inside | Exit |
+|-----------------|----------|---------------|-------------------|------|
+| **Simple** | Button, CheckBox | Not required | None | Not required |
+| **Group** | ButtonGroup, RadioGroup | Automatic — `↑`/`↓` work immediately | `↑` / `↓` | `←` / `→` move to the next toolbar item |
+| **Popup Widget** | MenuButton, DropDown, SelectBox | `Enter` / `Space` / `↓` | Follows the popup-specific pattern | `Esc` |
+| **Text Input** | TextBox, Autocomplete | `Enter` or auto-focus | Standard input behavior | `Esc` — return to toolbar; `Tab` — exit toolbar |
+
+---
+
+#### 1.3 Mouse vs. Keyboard Synchronization
+
+The **Roving Tabindex** anchor must follow the user's last interaction, regardless of input method:
+
+- `tabindex="0"` always sits on the item that last received focus.
+- When a user **clicks** a toolbar item with a mouse, that item becomes the new roving tabindex anchor.
+
+---
+
+#### 1.4 Interaction Within Templates
+
+For toolbar items that use a **custom template** (e.g., a Search box):
+
+| Key | Behavior |
+|-----|----------|
+| `←` / `→` Arrow | Moves focus to the **template container** (the toolbar item). |
+| `Enter` / `Space` | **Enters** the template — focus moves to the first focusable element inside. |
+| `Esc` | **Exits** the template — focus returns to the toolbar item container; arrow-key navigation resumes. |
+| `Tab` (inside template) | Follows normal DOM tab order within the template. When the **last** focusable element inside is reached, `Tab` exits the toolbar entirely (next global tab stop). |
+
+**Focus delegation rule when entering via arrow keys:**
+
+- If the template root is **itself focusable** (e.g., a custom `<button>`), focus that root element.
+- If the template root is a **container** (e.g., a `<div>`), the Toolbar must automatically delegate focus to the first focusable descendant (`<input>`, `<select>`, etc.).
+
+---
+
+#### 1.5 Edge Cases
+
+##### 1.5.1 Disabled Items
+
+Keyboard navigation must skip any item where `disabled: true`.  
+A disabled item must never receive focus via `←` / `→` / `Home` / `End`.
+
+##### 1.5.2 Dynamic Item Removal
+
+If the item currently holding `tabindex="0"` is **removed** from the toolbar, the widget must automatically assign `tabindex="0"` to the next available (non-disabled) item.  
+If no item remains, no item holds `tabindex="0"`.
+
+---
+
+#### 1.6 Overflow Menu
+
+- The "More" button (overflow trigger) is treated as the **last item** in the toolbar's roving tabindex sequence.
+- When the overflow menu is **open**, focus must move into the menu list.
+- `Esc` closes the menu and returns focus to the "More" button, which becomes the roving anchor.
+
+---
+
+## 🚫 Out of Scope
+
+- Full compliance with the ARIA Toolbar design pattern as defined in the W3C APG is **not** targeted for this iteration.
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index ba093ee7af48..f1dbf47be1a5 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -15,6 +15,7 @@ const TOOLBAR_MULTILINE_CLASS = 'dx-toolbar-multiline';
 const TOOLBAR_AUTO_HIDE_TEXT_CLASS = 'dx-toolbar-text-auto-hide';
 const TOOLBAR_MENU_CONTAINER_CLASS = 'dx-toolbar-menu-container';
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
+const TOOLBAR_ITEM_CLASS = 'dx-toolbar-item';
 const TOOLBAR_ITEM_INVISIBLE_CLASS = 'dx-toolbar-item-invisible';
 const KBN_NAMESPACE = 'toolbar-keyboard-nav';
 
@@ -68,16 +69,66 @@ class Toolbar extends ToolbarBase<Properties> {
   }
 
   _initMarkup(): void {
-    this._activeItemIndex = 0;
+    // On first render _activeItemIndex is still undefined (class field runs after super()),
+    // so we initialise it here only when needed.
+    const isFirstRender = typeof this._activeItemIndex !== 'number';
+    if (isFirstRender) {
+      this._activeItemIndex = 0;
+    }
+
+    // Before re-render: snapshot the active item's data reference so we can
+    // relocate it after the DOM is rebuilt.  This correctly handles insertions
+    // (the same item shifts to a new index) and deletions (item disappears →
+    // fall back to the previous position).
+    const savedIndex = this._activeItemIndex;
+    let activeItemData: Item | null = null;
+    let activeWasOverflow = false;
+
+    if (!isFirstRender) {
+      const prevFocusItems = this._getFocusableItems();
+      if (savedIndex >= 0 && savedIndex < prevFocusItems.length) {
+        const $prevFocusTarget = prevFocusItems[savedIndex];
+        const $item = $prevFocusTarget.closest(`.${TOOLBAR_ITEM_CLASS}`);
+        if ($item.length) {
+          activeItemData = this._getItemData($item) as Item;
+        } else {
+          activeWasOverflow = true; // e.g. the "More" overflow button
+        }
+      }
+    }
 
     super._initMarkup();
 
+    // After re-render: update _activeItemIndex to track the same item.
+    if (!isFirstRender) {
+      if (activeWasOverflow) {
+        if (this._getOverflowButtonFocusTarget()) {
+          this._activeItemIndex = this._getFocusableItems().length - 1;
+        }
+      } else if (activeItemData !== null) {
+        const newIndex = this._findFocusItemIndexByData(activeItemData);
+        // If item still exists use its new index; otherwise move to the
+        // previous item (item was deleted → keep focus near that position).
+        this._activeItemIndex = newIndex !== -1 ? newIndex : Math.max(0, savedIndex - 1);
+      }
+    }
+
     this._attachKeyboardNavigation();
     this._updateFocusableItemsTabIndex();
 
     this._layoutStrategy._initMarkup();
   }
 
+  /** Finds the focusable-item index that matches the given item data reference. */
+  _findFocusItemIndexByData(data: Item): number {
+    const focusItems = this._getFocusableItems();
+    for (let i = 0; i < focusItems.length; i += 1) {
+      const $item = focusItems[i].closest(`.${TOOLBAR_ITEM_CLASS}`);
+      if ($item.length && this._getItemData($item) === data) return i;
+    }
+    return -1;
+  }
+
   _renderToolbar(): void {
     super._renderToolbar();
 
@@ -192,20 +243,20 @@ class Toolbar extends ToolbarBase<Properties> {
   /**
    * Returns the focus targets of all enabled widget items visible in the toolbar,
    * plus the overflow "More" button if present. Used for roving tabindex navigation.
+   * Items are returned in visual (DOM) order, not items-array order, so that items
+   * in the 'before' / 'after' sections are navigated in the order the user sees them.
    */
   _getFocusableItems(): dxElementWrapper[] {
     const result: dxElementWrapper[] = [];
     const toolbarDisabled = !!this.option('disabled');
 
-    this._getToolbarItems().forEach((item) => {
-      const $item = this._findItemElementByItem(item);
-      if (!$item.length) return;
-
-      const itemData = this._getItemData($item);
-      if ($item.hasClass(TOOLBAR_ITEM_INVISIBLE_CLASS)) return; // collapsed into overflow
-      const isDisabled = !!(itemData.options?.disabled ?? itemData.disabled ?? toolbarDisabled);
+    const toolbarItemDomNodes = this._$toolbarItemsContainer?.find(`.${TOOLBAR_ITEM_CLASS}`).toArray() ?? [];
+    toolbarItemDomNodes.forEach((el) => {
+      const $item = $(el);
+      if ($item.hasClass(TOOLBAR_ITEM_INVISIBLE_CLASS)) return;
+      const itemData = this._getItemData($item) as Item;
+      const isDisabled = !!(itemData?.options?.disabled ?? itemData?.disabled ?? toolbarDisabled);
       if (isDisabled) return;
-
       const $focusTarget = resolveItemFocusTarget($item, itemData);
       if ($focusTarget) {
         result.push($focusTarget);
@@ -259,7 +310,7 @@ class Toolbar extends ToolbarBase<Properties> {
     const focusableItems = this._getFocusableItems();
     if (!focusableItems.length) return;
 
-    if (this._activeItemIndex >= focusableItems.length) {
+    if (this._activeItemIndex < 0 || this._activeItemIndex >= focusableItems.length) {
       this._activeItemIndex = focusableItems.length - 1;
     }
 
@@ -485,7 +536,6 @@ class Toolbar extends ToolbarBase<Properties> {
   _openDropDownButtonAndFocus(focusTarget: HTMLElement): void {
     const dropDownButtonRoot = focusTarget.closest('.dx-dropdownbutton');
     if (!dropDownButtonRoot) return;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const instance = $(dropDownButtonRoot).data('dxDropDownButton') as unknown as { open: () => void } | undefined;
     if (!instance) return;
 
@@ -506,7 +556,6 @@ class Toolbar extends ToolbarBase<Properties> {
   _openSelectBoxAndFocus(focusTarget: HTMLElement): void {
     const selectBoxRoot = focusTarget.closest('.dx-selectbox');
     if (!selectBoxRoot) return;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const instance = $(selectBoxRoot).data('dxSelectBox') as unknown as { open: () => void } | undefined;
     if (!instance) return;
 
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index e2b86f6822dc..13704a869885 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -112,6 +112,10 @@
             <div class="options-container">
                 <div class="caption">Options</div>
                 <div id="toolbar-mode"></div>
+                <div style="margin-top:8px;display:flex;gap:8px">
+                    <button id="btn-add-item" style="padding:4px 10px">+ Add item</button>
+                    <button id="btn-remove-item" style="padding:4px 10px">- Remove added item</button>
+                </div>
             </div>
         </div>
 
@@ -271,6 +275,16 @@
                         },
                     },
                 },
+                {
+                    location: 'before',
+                    locateInMenu: 'never',
+                    widget: 'dxButton',
+                    options: {
+                        icon: 'close',
+                        hint: 'Disabled (should be skipped by KB nav)',
+                        disabled: true,
+                    },
+                },
                 toolbarSeparator,
                 {
                     location: 'before',
@@ -540,6 +554,28 @@
                         toolbar.option('multiline', e.value);
                     },
                 });
+
+                const dynamicItem = {
+                    location: 'before',
+                    locateInMenu: 'never',
+                    widget: 'dxButton',
+                    options: { icon: 'add', hint: 'Dynamic item (added/removed for AC-1.5.2 testing)' },
+                };
+                let dynamicItemAdded = false;
+
+                document.getElementById('btn-add-item').addEventListener('click', () => {
+                    if (dynamicItemAdded) return;
+                    const items = toolbar.option('items');
+                    toolbar.option('items', [...items, dynamicItem]);
+                    dynamicItemAdded = true;
+                });
+
+                document.getElementById('btn-remove-item').addEventListener('click', () => {
+                    if (!dynamicItemAdded) return;
+                    const items = toolbar.option('items');
+                    toolbar.option('items', items.filter((it) => it !== dynamicItem));
+                    dynamicItemAdded = false;
+                });
             });
         </script>
     </div>

From 63815253c5bb81d4f45b60a4c979e642a31bead8 Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 11:36:10 +0200
Subject: [PATCH 06/11] fix(toolbar-kbn): fix AC-1.3.1 and AC-1.5.2.4
 regression bugs

AC-1.3.1: _openSelectBoxAndFocus was manually setting tabindex=0 on a
SelectBox list item, which leaked after the popup closed.  Focus is now
kept on the SelectBox input; the SelectBox handles list navigation via
its own keyboard handlers.  Updated the Esc handler to NOT call
stopPropagation when the active item is a SelectBox so the SelectBox can
close its popup.

AC-1.5.2.4: _initMarkup was reading the DOM to snapshot the active item,
but CollectionWidget._refresh() calls _clean() before _renderComponent(),
so the container was already empty.  Added _refresh() override that
captures the active item identity (via _captureActiveItemSnapshot) before
_clean() runs, stored in _pendingSnapshot for _initMarkup to consume.
Added _resolveActiveItemFromDOM helper for the fallback (initial-render)
path.

Regression test fixes (5 test bugs):
- AC-1.1.3: add Home before ArrowRight (detection phase ends at last item)
- AC-1.2.13a: check SelectBox 'opened' option instead of list-item DOM
- AC-1.2.17, AC-1.3.5 x3: .dx-textbox:not(.dx-selectbox) input selector

All 37 regression tests pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .playwright-mcp/kbn-regression-test.js        | 484 ++++++++++++++++++
 .../js/__internal/ui/toolbar/toolbar.ts       |  98 ++--
 2 files changed, 551 insertions(+), 31 deletions(-)
 create mode 100644 .playwright-mcp/kbn-regression-test.js

diff --git a/.playwright-mcp/kbn-regression-test.js b/.playwright-mcp/kbn-regression-test.js
new file mode 100644
index 000000000000..9bad0388c7bd
--- /dev/null
+++ b/.playwright-mcp/kbn-regression-test.js
@@ -0,0 +1,484 @@
+async (page) => {
+  const sleep = (ms) => page.waitForTimeout(ms);
+  const results = [];
+  let pass = 0, fail = 0;
+
+  function check(id, cond, msg) {
+    if (cond) { results.push('  PASS ' + id); pass++; }
+    else { results.push('  FAIL ' + id + (msg ? ': ' + msg : '')); fail++; }
+  }
+
+  async function pressKey(key) { await page.keyboard.press(key); await sleep(60); }
+  async function reset() { await page.click('body'); await sleep(80); }
+  async function countTabZero() {
+    return page.evaluate(() => document.querySelectorAll('.dx-toolbar [tabindex="0"]').length);
+  }
+  async function getTabZeroEl() {
+    return page.evaluate(() => document.querySelector('.dx-toolbar [tabindex="0"]') ?? null);
+  }
+  async function getActive() {
+    return page.evaluate(() => ({
+      tag: document.activeElement?.tagName,
+      cls: document.activeElement?.className ?? '',
+      tabIndex: document.activeElement?.tabIndex,
+      inToolbar: !!document.activeElement?.closest('.dx-toolbar')
+    }));
+  }
+  async function getActiveId() {
+    // Returns a unique identifier for which focusable item has tabIndex=0
+    return page.evaluate(() => {
+      const el = document.querySelector('.dx-toolbar [tabindex="0"]');
+      if (!el) return null;
+      return el.tagName + '|' + el.className.split(' ').sort().join(' ') + '|' + (el.id || el.getAttribute('aria-label') || el.closest('[id]')?.id || '');
+    });
+  }
+  async function tabIntoToolbar() {
+    await page.keyboard.press('Tab'); await sleep(120);
+  }
+  // Navigate to focusable item index n from Home (navigates exactly n ArrowRights)
+  async function navToFI(n) {
+    await pressKey('Home');
+    for (let i = 0; i < n; i++) await pressKey('ArrowRight');
+    await sleep(60);
+  }
+
+  // ═══ Detect focusable item types ═══════════════════════════════════════════
+  // We navigate through the toolbar to find real focusable-item indices for each widget type.
+  async function detectFocusableIndices() {
+    await reset();
+    await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+    await tabIntoToolbar();
+    await pressKey('Home');
+
+    let bgFI = -1, ddBtnFI = -1, sbFI = -1, tbFI = -1, tmplFI = -1;
+    const total = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._getFocusableItems().length);
+
+    for (let i = 0; i < total; i++) {
+      const info = await page.evaluate(() => {
+        const el = document.activeElement;
+        if (!el) return null;
+        const inBG = el.classList.contains('dx-buttongroup') || el.tagName === 'INPUT' && !!el.closest('.dx-buttongroup');
+        const inDDB = !!el.closest('.dx-dropdownbutton');
+        const isSB = el.tagName === 'INPUT' && !!el.closest('.dx-selectbox');
+        const isTB = el.tagName === 'INPUT' && !isSB;
+        const isTmpl = el.classList.contains('dx-item-content');
+        const isStandaloneBG = inBG && !inDDB && !isSB;
+        return { isSB, isTB, isTmpl, isStandaloneBG, inDDB };
+      });
+      if (info) {
+        if (ddBtnFI === -1 && info.inDDB) ddBtnFI = i;
+        if (sbFI === -1 && info.isSB) sbFI = i;
+        if (bgFI === -1 && info.isStandaloneBG) bgFI = i;
+        if (tbFI === -1 && info.isTB) tbFI = i;
+        if (tmplFI === -1 && info.isTmpl) tmplFI = i;
+      }
+      if (i < total - 1) await pressKey('ArrowRight');
+    }
+    return { bgFI, ddBtnFI, sbFI, tbFI, tmplFI, total };
+  }
+
+  const fi = await detectFocusableIndices();
+  results.push(`  INFO indices: bg=${fi.bgFI} ddBtn=${fi.ddBtnFI} sb=${fi.sbFI} tb=${fi.tbFI} tmpl=${fi.tmplFI} total=${fi.total}`);
+
+  // ═══ 1.1 Core Navigation ═══════════════════════════════════════════════════
+
+  // AC-1.1.9: exactly one tabIndex=0 in toolbar at start
+  { const n = await countTabZero(); check('AC-1.1.9', n === 1, `got ${n}`); }
+
+  await reset();
+  await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+  await tabIntoToolbar();
+
+  // AC-1.1.1: focus is in toolbar
+  { const a = await getActive(); check('AC-1.1.1', a.inToolbar, `active: ${a.tag}.${a.cls.split(' ')[0]}`); }
+
+  // AC-1.1.9b: exactly 1 tabIndex=0 after tab-in
+  { const n = await countTabZero(); check('AC-1.1.9b', n === 1, `${n} tab-zeros after Tab-in`); }
+
+  // AC-1.1.3: → moves tabIndex=0 to a different element
+  {
+    await pressKey('Home');          // ensure we start at item 0
+    const el0 = await getTabZeroEl();
+    await pressKey('ArrowRight');
+    const el1 = await getTabZeroEl();
+    // Compare the actual element reference identity via document position
+    const moved = await page.evaluate((before) => {
+      const cur = document.querySelector('.dx-toolbar [tabindex="0"]');
+      if (!cur) return false;
+      const all = [...document.querySelectorAll('.dx-toolbar [tabindex="0"]')];
+      if (all.length !== 1) return false;
+      // Check that active element is NOW focused (not just tabIndex changed)
+      return document.activeElement?.closest('.dx-toolbar') && document.activeElement !== null;
+    }, el0);
+    // Also check via focusable index
+    const fi0 = await page.evaluate(() => {
+      const inst = $(document.querySelector('#toolbar')).dxToolbar('instance');
+      return inst._activeItemIndex;
+    });
+    check('AC-1.1.3', fi0 === 1, `activeItemIndex after →: ${fi0} (expected 1)`);
+  }
+
+  // AC-1.1.6: Home → first item
+  {
+    await pressKey('End'); await pressKey('Home');
+    const isFirst = await page.evaluate(() => {
+      const inst = $(document.querySelector('#toolbar')).dxToolbar('instance');
+      return inst._activeItemIndex === 0;
+    });
+    check('AC-1.1.6', isFirst, 'activeItemIndex not 0 after Home');
+  }
+
+  // AC-1.1.7: End → last focusable item
+  {
+    await pressKey('End');
+    const isLast = await page.evaluate(() => {
+      const inst = $(document.querySelector('#toolbar')).dxToolbar('instance');
+      const fi = inst._getFocusableItems();
+      return inst._activeItemIndex === fi.length - 1;
+    });
+    check('AC-1.1.7', isLast, 'activeItemIndex not last after End');
+  }
+
+  // AC-1.1.4: → at last → no change
+  {
+    await pressKey('End');
+    const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    await pressKey('ArrowRight');
+    const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    check('AC-1.1.4', idx0 === idx1, `index changed from ${idx0} to ${idx1}`);
+  }
+
+  // AC-1.1.5: ← at first → no change
+  {
+    await pressKey('Home');
+    const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    await pressKey('ArrowLeft');
+    const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    check('AC-1.1.5', idx0 === idx1, `index changed from ${idx0} to ${idx1}`);
+  }
+
+  // AC-1.1.8: disabled item never in focusable list
+  {
+    const noDisabled = await page.evaluate(() => {
+      const inst = $(document.querySelector('#toolbar')).dxToolbar('instance');
+      const fis = inst._getFocusableItems();
+      return fis.every($ft => !$ft.get(0)?.closest('.dx-state-disabled'));
+    });
+    check('AC-1.1.8', noDisabled, 'disabled item in focusable list');
+  }
+
+  // ═══ 1.2 Nested Widgets ════════════════════════════════════════════════════
+
+  if (fi.bgFI >= 0) {
+    await reset();
+    await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+    await tabIntoToolbar();
+    await navToFI(fi.bgFI);
+
+    // AC-1.2.3: ↑/↓ on standalone BG stays in toolbar
+    const a0 = await getActive();
+    await pressKey('ArrowDown'); await sleep(100);
+    const a1 = await getActive();
+    check('AC-1.2.3', a0.inToolbar && a1.inToolbar, `focus left toolbar on ↓ (was ${a0.inToolbar}, now ${a1.inToolbar})`);
+
+    // AC-1.2.4: ← moves to prev toolbar item (BG is not first)
+    if (fi.bgFI > 0) {
+      await navToFI(fi.bgFI);
+      const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.2.4', idx1 === fi.bgFI - 1, `← from BG: expected fi=${fi.bgFI-1}, got ${idx1}`);
+    }
+
+    // AC-1.2.5: → moves to next toolbar item (BG is not last)
+    if (fi.bgFI < fi.total - 1) {
+      await navToFI(fi.bgFI);
+      const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      await pressKey('ArrowRight'); await sleep(80);
+      const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.2.5', idx1 === fi.bgFI + 1, `→ from BG: expected fi=${fi.bgFI+1}, got ${idx1}`);
+    }
+  } else {
+    results.push('  SKIP AC-1.2.3-5: no standalone ButtonGroup found');
+  }
+
+  if (fi.sbFI >= 0) {
+    await reset();
+    await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+    await tabIntoToolbar();
+    await navToFI(fi.sbFI);
+
+    // AC-1.2.15: ← on SelectBox (toolbar mode) → navigate toolbar
+    if (fi.sbFI > 0) {
+      const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.2.15', idx1 === fi.sbFI - 1, `← on SB: expected fi=${fi.sbFI-1}, got ${idx1}`);
+    }
+
+    // Return to SelectBox
+    await navToFI(fi.sbFI);
+
+    // AC-1.2.11: Enter → list opens
+    await pressKey('Enter'); await sleep(400);
+    const listOpen = await page.evaluate(() => !!document.querySelector('.dx-dropdownlist-popup-wrapper .dx-list-item'));
+    check('AC-1.2.11', listOpen, 'SelectBox list did not open on Enter');
+
+    // AC-1.2.13: Esc closes list; then toolbar mode
+    await pressKey('Escape'); await sleep(300);
+    const listClosed = await page.evaluate(() => {
+      const sb = document.querySelector('.dx-toolbar .dx-selectbox');
+      return sb ? $(sb).dxSelectBox('instance').option('opened') === false : true;
+    });
+    check('AC-1.2.13a', listClosed, 'SelectBox list still open after Esc');
+    if (fi.sbFI > 0) {
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.2.13b', idx === fi.sbFI - 1, `← after Esc on SB: expected ${fi.sbFI-1}, got ${idx}`);
+    }
+  } else {
+    results.push('  SKIP AC-1.2.11,13,15: no SelectBox found');
+  }
+
+  if (fi.tbFI >= 0) {
+    await reset();
+    await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+    await tabIntoToolbar();
+    await navToFI(fi.tbFI);
+
+    // AC-1.2.16: ← in toolbar mode → navigate off TextBox
+    if (fi.tbFI > 0) {
+      const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.2.16', idx1 === fi.tbFI - 1, `← on TB: expected fi=${fi.tbFI-1}, got ${idx1}`);
+    }
+
+    // Return to TextBox
+    await navToFI(fi.tbFI);
+
+    // AC-1.2.17: Enter → edit mode; typing works
+    await pressKey('Enter'); await sleep(80);
+    await page.keyboard.type('Z'); await sleep(80);
+    const val = await page.evaluate(() => document.querySelector('.dx-toolbar .dx-textbox:not(.dx-selectbox) input')?.value ?? '');
+    check('AC-1.2.17', val.includes('Z'), `TextBox value after Enter+type: "${val}"`);
+
+    // AC-1.2.18: Esc exits edit mode; ← navigates toolbar
+    await page.evaluate(() => { const tb = document.querySelector('.dx-toolbar .dx-textbox:not(.dx-selectbox) input'); if (tb) tb.value = ''; });
+    await pressKey('Escape'); await sleep(80);
+    if (fi.tbFI > 0) {
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.2.18', idx === fi.tbFI - 1, `← after Esc on TB: expected ${fi.tbFI-1}, got ${idx}`);
+    }
+  } else {
+    results.push('  SKIP AC-1.2.16-18: no TextBox found');
+  }
+
+  // ═══ 1.3 Mouse vs. Keyboard Sync ══════════════════════════════════════════
+
+  await reset();
+  const clickTarget = await page.evaluate(() => {
+    const items = [...document.querySelectorAll('.dx-toolbar-items-container .dx-toolbar-item')]
+      .filter(el => !el.classList.contains('dx-toolbar-item-invisible'));
+    const item = items.find(it => it.querySelector('.dx-button:not(.dx-state-disabled)'));
+    const btn = item?.querySelector('.dx-button');
+    if (!btn) return null;
+    const r = btn.getBoundingClientRect();
+    return { x: r.left + r.width/2, y: r.top + r.height/2 };
+  });
+
+  if (clickTarget) {
+    await page.mouse.click(clickTarget.x, clickTarget.y); await sleep(150);
+
+    // AC-1.3.1: exactly 1 tabIndex=0 after click
+    const n = await countTabZero();
+    check('AC-1.3.1', n === 1, `${n} tab-zeros after click`);
+    const activeHas0 = await page.evaluate(() => document.activeElement?.tabIndex === 0 && !!document.activeElement?.closest('.dx-toolbar'));
+    check('AC-1.3.1b', activeHas0, 'clicked item does not have tabIndex=0');
+
+    // AC-1.3.3: → navigates from click position
+    const idx0 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    await pressKey('ArrowRight'); await sleep(80);
+    const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    check('AC-1.3.3', idx1 === idx0 + 1, `→ after click: expected ${idx0+1}, got ${idx1}`);
+
+    // AC-1.3.4: ← moves back
+    await pressKey('ArrowLeft'); await sleep(80);
+    const idx2 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    check('AC-1.3.4', idx2 === idx0, `← did not return to clicked item: expected ${idx0}, got ${idx2}`);
+  }
+
+  // AC-1.3.5: Mouse click on TextBox → edit mode (type directly)
+  if (fi.tbFI >= 0) {
+    const tbPos = await page.evaluate(() => {
+      const inp = document.querySelector('.dx-toolbar .dx-textbox:not(.dx-selectbox) input');
+      if (!inp) return null;
+      const r = inp.getBoundingClientRect();
+      return { x: r.left + r.width/2, y: r.top + r.height/2 };
+    });
+    if (tbPos) {
+      await page.mouse.click(tbPos.x, tbPos.y); await sleep(150);
+      await page.keyboard.type('W'); await sleep(80);
+      const val = await page.evaluate(() => document.querySelector('.dx-toolbar .dx-textbox:not(.dx-selectbox) input')?.value ?? '');
+      check('AC-1.3.5', val.includes('W'), `click+type on TextBox: value="${val}"`);
+      await page.evaluate(() => { const tb = document.querySelector('.dx-toolbar .dx-textbox:not(.dx-selectbox) input'); if (tb) tb.value = ''; });
+      await pressKey('Escape'); await sleep(80);
+      if (fi.tbFI > 0) {
+        await pressKey('ArrowLeft'); await sleep(80);
+        const idx = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+        check('AC-1.3.6', idx === fi.tbFI - 1, `After Esc+← expected ${fi.tbFI-1}, got ${idx}`);
+      }
+    }
+  }
+
+  // ═══ 1.4 Template Items ═══════════════════════════════════════════════════
+
+  if (fi.tmplFI >= 0) {
+    await reset();
+    await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+    await tabIntoToolbar();
+    await navToFI(fi.tmplFI);
+
+    // AC-1.4.3: template container is focused with tabIndex=0
+    const containerActive = await page.evaluate(() =>
+      document.activeElement?.classList.contains('dx-item-content') && document.activeElement?.tabIndex === 0
+    );
+    check('AC-1.4.3', containerActive, 'not on dx-item-content or tabIndex≠0');
+
+    // AC-1.4.5: ← navigates toolbar, not into template
+    if (fi.tmplFI > 0) {
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.4.5', idx === fi.tmplFI - 1, `← from tmpl expected ${fi.tmplFI-1}, got ${idx}`);
+    }
+
+    // Return to template; test Enter
+    await navToFI(fi.tmplFI);
+    await pressKey('Enter'); await sleep(80);
+    const inside = await page.evaluate(() => {
+      const el = document.activeElement;
+      return el && !el.classList.contains('dx-item-content') && !!el.closest('.dx-item-content');
+    });
+    check('AC-1.4.6', inside, 'Enter did not enter template');
+
+    // AC-1.4.8: Esc → back to container
+    await pressKey('Escape'); await sleep(80);
+    const back = await page.evaluate(() => document.activeElement?.classList.contains('dx-item-content'));
+    check('AC-1.4.8', back, 'Esc did not return to template container');
+
+    // AC-1.4.5b: ← from container after Esc → navigate toolbar
+    if (fi.tmplFI > 0) {
+      await pressKey('ArrowLeft'); await sleep(80);
+      const idx = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.4.5b', idx === fi.tmplFI - 1, `← after Esc from tmpl expected ${fi.tmplFI-1}, got ${idx}`);
+    }
+  } else {
+    results.push('  SKIP AC-1.4.x: template item not found');
+  }
+
+  // ═══ 1.5.1 Disabled Items Skip ════════════════════════════════════════════
+
+  await reset();
+  await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+  await tabIntoToolbar();
+  await pressKey('Home');
+
+  // AC-1.5.1.1: no disabled item in focusable list
+  {
+    const noDisabled = await page.evaluate(() => {
+      const inst = $(document.querySelector('#toolbar')).dxToolbar('instance');
+      return inst._getFocusableItems().every($ft => !$ft.get(0)?.closest('.dx-state-disabled'));
+    });
+    check('AC-1.5.1.1', noDisabled, 'disabled item has tabIndex>=0');
+  }
+
+  // AC-1.5.1.2: → from first item skips disabled
+  {
+    await pressKey('ArrowRight'); await sleep(80);
+    const onDisabled = await page.evaluate(() => !!document.activeElement?.closest('.dx-state-disabled'));
+    check('AC-1.5.1.2', !onDisabled, '→ landed on disabled item');
+  }
+
+  // ═══ 1.5.2 Dynamic Item Removal ══════════════════════════════════════════
+
+  await page.click('#btn-add-item'); await sleep(300);
+  await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+  await tabIntoToolbar(); await sleep(100);
+
+  // AC-1.5.2.1: exactly one tabIndex=0 after add
+  { const n = await countTabZero(); check('AC-1.5.2.1', n === 1, `${n} tab-zeros after add`); }
+
+  // AC-1.5.2.7: DOM order — dynamic item comes before Attach button
+  const domOrder = await page.evaluate(() => {
+    const items = [...document.querySelectorAll('.dx-toolbar-items-container .dx-toolbar-item')]
+      .filter(el => !el.classList.contains('dx-toolbar-item-invisible'));
+    const dIdx = items.findIndex(it =>
+      [...it.querySelectorAll('[title],[aria-label]')].some(e => (e.title || e.getAttribute('aria-label') || '').includes('Dynamic'))
+    );
+    const aIdx = items.findIndex(it =>
+      [...it.querySelectorAll('[title],[aria-label]')].some(e => (e.title || e.getAttribute('aria-label') || '').includes('Attach'))
+    );
+    return { dIdx, aIdx, count: items.length };
+  });
+  if (domOrder.dIdx >= 0 && domOrder.aIdx >= 0) {
+    check('AC-1.5.2.7', domOrder.dIdx < domOrder.aIdx,
+      `dynamic(${domOrder.dIdx}) should come before attach(${domOrder.aIdx})`);
+  } else {
+    results.push(`  INFO AC-1.5.2.7: dynamic=${domOrder.dIdx}, attach=${domOrder.aIdx}`);
+  }
+
+  // Navigate to dynamic item by finding it via navigation
+  await pressKey('Home');
+  let dynFI = -1;
+  const totalAfterAdd = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._getFocusableItems().length);
+  for (let i = 0; i < totalAfterAdd; i++) {
+    const isDynamic = await page.evaluate(() => {
+      const el = document.activeElement;
+      if (!el) return false;
+      return el.getAttribute('aria-label')?.includes('Dynamic') ||
+             el.getAttribute('title')?.includes('Dynamic') ||
+             el.closest('[title*="Dynamic"]') !== null ||
+             el.closest('[aria-label*="Dynamic"]') !== null;
+    });
+    if (isDynamic) { dynFI = i; break; }
+    if (i < totalAfterAdd - 1) await pressKey('ArrowRight');
+  }
+  results.push(`  INFO AC-1.5.2: dynamic item at focusable index ${dynFI}`);
+
+  // Navigate to dynamic item position
+  if (dynFI >= 0) {
+    await navToFI(dynFI);
+    const fiBeforeRemove = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+
+    // Remove item
+    await page.click('#btn-remove-item'); await sleep(300);
+    await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+    await tabIntoToolbar(); await sleep(100);
+
+    // AC-1.5.2-count: exactly 1 tab-zero after removal
+    const n = await countTabZero();
+    check('AC-1.5.2-count', n === 1, `${n} tab-zeros after remove`);
+
+    // AC-1.5.2.4: anchor moved backward (to previous item)
+    const fiAfter = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    check('AC-1.5.2.4', fiAfter >= 0 && fiAfter < fiBeforeRemove,
+      `activeItemIndex: before=${fiBeforeRemove}, after=${fiAfter} (expected after < before)`);
+
+    // AC-1.5.2.6: navigation still works after removal
+    {
+      const idx0 = fiAfter;
+      await pressKey('ArrowRight'); await sleep(80);
+      const idx1 = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+      check('AC-1.5.2.6', idx1 > idx0 || idx0 === fi.total - 1, `→ after removal: went from ${idx0} to ${idx1}`);
+    }
+  } else {
+    results.push('  SKIP AC-1.5.2.4-6: could not find dynamic item via navigation');
+    // Still remove for cleanup
+    await page.click('#btn-remove-item'); await sleep(300);
+  }
+
+  // ═══ Final report ══════════════════════════════════════════════════════════
+  const output = results.join('\n') + `\n\nTotal: ${pass+fail} | PASS: ${pass} | FAIL: ${fail}`;
+  return output;
+}
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index f1dbf47be1a5..ee2123d24fcb 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -43,6 +43,10 @@ class Toolbar extends ToolbarBase<Properties> {
 
   _keyboardNavContainer: Element | undefined;
 
+  // Snapshot of the active item captured in _refresh() BEFORE _clean() erases the DOM.
+  // Used by _initMarkup() to re-locate the active item after the re-render.
+  _pendingSnapshot: { savedIndex: number; data: Item | null; wasOverflow: boolean } | null = null;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -68,6 +72,44 @@ class Toolbar extends ToolbarBase<Properties> {
     this._syncRovingTabIndex();
   }
 
+  _refresh(): void {
+    // Capture the active item's identity from the live DOM *before* _clean() erases it.
+    // _initMarkup() is called after _clean(), so it would see an empty container otherwise.
+    this._captureActiveItemSnapshot();
+    super._refresh();
+  }
+
+  /** Snapshots the active item data before the DOM is cleared by _clean(). */
+  _captureActiveItemSnapshot(): void {
+    const savedIndex = this._activeItemIndex;
+    if (typeof savedIndex !== 'number') return;
+
+    const prevFocusItems = this._getFocusableItems();
+    if (savedIndex < 0 || savedIndex >= prevFocusItems.length) {
+      this._pendingSnapshot = null;
+      return;
+    }
+
+    const $prevFT = prevFocusItems[savedIndex];
+    const $item = $prevFT.closest(`.${TOOLBAR_ITEM_CLASS}`);
+    this._pendingSnapshot = $item.length
+      ? { savedIndex, data: this._getItemData($item) as Item, wasOverflow: false }
+      : { savedIndex, data: null, wasOverflow: true };
+  }
+
+  /** Reads active item identity from the live DOM (fallback when _pendingSnapshot is absent). */
+  _resolveActiveItemFromDOM(index: number): { data: Item | null; wasOverflow: boolean } {
+    const prevFocusItems = this._getFocusableItems();
+    if (index < 0 || index >= prevFocusItems.length) {
+      return { data: null, wasOverflow: false };
+    }
+    const $item = prevFocusItems[index].closest(`.${TOOLBAR_ITEM_CLASS}`);
+    if ($item.length) {
+      return { data: this._getItemData($item) as Item, wasOverflow: false };
+    }
+    return { data: null, wasOverflow: true };
+  }
+
   _initMarkup(): void {
     // On first render _activeItemIndex is still undefined (class field runs after super()),
     // so we initialise it here only when needed.
@@ -76,24 +118,26 @@ class Toolbar extends ToolbarBase<Properties> {
       this._activeItemIndex = 0;
     }
 
-    // Before re-render: snapshot the active item's data reference so we can
-    // relocate it after the DOM is rebuilt.  This correctly handles insertions
-    // (the same item shifts to a new index) and deletions (item disappears →
-    // fall back to the previous position).
+    // Resolve the active item's pre-render identity.
+    // _refresh() captures it before _clean(); for the initial render path (no _refresh)
+    // we fall back to reading the DOM directly (which is still intact at that point).
     const savedIndex = this._activeItemIndex;
     let activeItemData: Item | null = null;
     let activeWasOverflow = false;
 
     if (!isFirstRender) {
-      const prevFocusItems = this._getFocusableItems();
-      if (savedIndex >= 0 && savedIndex < prevFocusItems.length) {
-        const $prevFocusTarget = prevFocusItems[savedIndex];
-        const $item = $prevFocusTarget.closest(`.${TOOLBAR_ITEM_CLASS}`);
-        if ($item.length) {
-          activeItemData = this._getItemData($item) as Item;
-        } else {
-          activeWasOverflow = true; // e.g. the "More" overflow button
-        }
+      const snap = this._pendingSnapshot;
+      this._pendingSnapshot = null;
+
+      if (snap !== null) {
+        // Use the pre-captured snapshot (DOM may already be empty after _clean()).
+        activeItemData = snap.data;
+        activeWasOverflow = snap.wasOverflow;
+      } else {
+        // Fallback: DOM is still intact (non-_refresh re-render path).
+        const domSnap = this._resolveActiveItemFromDOM(savedIndex);
+        activeItemData = domSnap.data;
+        activeWasOverflow = domSnap.wasOverflow;
       }
     }
 
@@ -376,12 +420,11 @@ class Toolbar extends ToolbarBase<Properties> {
     if (key === 'escape') {
       if (this._insideActiveItem) {
         this._insideActiveItem = false;
-        // For inline widgets (TextBox, ButtonGroup inside toolbar DOM): explicitly refocus
-        // and stop propagation so the widget doesn't steal focus back.
-        // For popup widgets (popup rendered outside toolbar DOM): the widget's own Esc
-        // closes the popup and returns focus here; _handleFocusIn then resets the flag.
         const isInsideToolbar = !!this._keyboardNavContainer?.contains(e.target as Element);
-        if (isInsideToolbar) {
+        const isActiveSelectBox = !!activeEl?.closest('.dx-selectbox');
+        // For inline widgets: refocus and block propagation. For SelectBox: propagate
+        // so the SelectBox can close its popup; _handleFocusIn finalises state afterward.
+        if (isInsideToolbar && !isActiveSelectBox) {
           activeEl?.focus();
           e.stopPropagation();
         }
@@ -550,8 +593,10 @@ class Toolbar extends ToolbarBase<Properties> {
   }
 
   /**
-   * Opens a SelectBox dropdown and moves focus to the first (or selected) list item.
-   * Temporarily sets tabindex=0 on the item so it can receive focus.
+   * Opens a SelectBox dropdown and enters "active item" mode.
+   * Focus remains on the SelectBox input; the SelectBox handles arrow-key navigation
+   * through its own keyboard listeners once the popup is open.
+   * Keeping focus on the input avoids leaking tabindex=0 on popup list items.
    */
   _openSelectBoxAndFocus(focusTarget: HTMLElement): void {
     const selectBoxRoot = focusTarget.closest('.dx-selectbox');
@@ -561,17 +606,8 @@ class Toolbar extends ToolbarBase<Properties> {
 
     instance.open();
     this._insideActiveItem = true;
-
-    // Popup DOM is created synchronously. Focus the selected or first list item.
-    const popupWrapper = document.querySelector<HTMLElement>('.dx-dropdownlist-popup-wrapper');
-    if (!popupWrapper) return;
-
-    const selectedItem = popupWrapper.querySelector<HTMLElement>('.dx-list-item.dx-state-selected');
-    const focusTarget2 = selectedItem ?? popupWrapper.querySelector<HTMLElement>('.dx-list-item');
-    if (!focusTarget2) return;
-
-    focusTarget2.setAttribute('tabindex', '0');
-    focusTarget2.focus();
+    // Focus stays on the SelectBox input. The SelectBox widget handles ArrowDown/Up
+    // to navigate the list. Esc will be forwarded to the SelectBox to close the popup.
   }
 
   /**

From b3755bbd485633b9c02c2126c65e7e42b87a0343 Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 12:25:50 +0200
Subject: [PATCH 07/11] feat(toolbar): AC-1.6 overflow menu keyboard navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Open popup on Enter/Space/↓ from overflow button
- Focus first item in popup on open
- ↑/↓ navigate between popup items (manual nav: ToolbarMenuList has
  focusStateEnabled=false, so dxList native nav is disabled)
- Esc closes popup and returns focus to 'More' button
- Tab closes popup and exits toolbar naturally
- Item activation closes popup and returns focus to 'More' button
- Roving tabindex preserved across open/close cycles
- AC-1.6.1–1.6.7: all 43 regression tests pass

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .playwright-mcp/kbn-regression-test.js        | 111 ++++++++++++++++
 .../js/__internal/ui/toolbar/toolbar.ts       | 125 ++++++++++++++++++
 2 files changed, 236 insertions(+)

diff --git a/.playwright-mcp/kbn-regression-test.js b/.playwright-mcp/kbn-regression-test.js
index 9bad0388c7bd..688d882e76d0 100644
--- a/.playwright-mcp/kbn-regression-test.js
+++ b/.playwright-mcp/kbn-regression-test.js
@@ -478,6 +478,117 @@ async (page) => {
     await page.click('#btn-remove-item'); await sleep(300);
   }
 
+  // ═══ 1.6 Overflow Menu Keyboard Navigation ════════════════════════════════
+
+  // Navigate to the overflow "More" button (last focusable item)
+  await reset();
+  await page.evaluate(() => { const r = document.querySelector('#resizable-container'); r.tabIndex = -1; r.focus(); });
+  await tabIntoToolbar();
+  await pressKey('End');  // jump to "More" button (last item)
+  await sleep(80);
+
+  const overflowFI = fi.total - 1;
+
+  // AC-1.6.1: Enter on overflow → popup opens, focus inside list
+  {
+    await navToFI(overflowFI);
+    await pressKey('Enter');
+    await sleep(150);
+    const popupOpen = await page.evaluate(() => {
+      const btn = document.querySelector('.dx-toolbar-menu-container .dx-dropdownmenu-button');
+      return btn?.getAttribute('aria-expanded') === 'true';
+    });
+    const focusInMenu = await page.evaluate(() => {
+      const ae = document.activeElement;
+      // Focus lands on the list's scrollview container or a list item.
+      return !!ae?.closest('.dx-dropdownmenu-popup-wrapper');
+    });
+    check('AC-1.6.1', popupOpen && focusInMenu, `popupOpen=${popupOpen} focusInMenu=${focusInMenu}`);
+
+    // Esc to clean up
+    await pressKey('Escape'); await sleep(200);
+  }
+
+  // AC-1.6.3: Esc from menu → popup closed, focus on "More" button
+  {
+    await navToFI(overflowFI);
+    await pressKey('Enter'); await sleep(150);
+    await pressKey('Escape'); await sleep(200);
+    // aria-expanded is updated synchronously on close (not animation-dependent).
+    const popupGone = await page.evaluate(() => {
+      const btn = document.querySelector('.dx-toolbar-menu-container .dx-dropdownmenu-button');
+      return btn?.getAttribute('aria-expanded') === 'false';
+    });
+    const focusOnMore = await page.evaluate(() => {
+      const ae = document.activeElement;
+      return !!(ae && ae.closest('.dx-toolbar-menu-container'));
+    });
+    check('AC-1.6.3', popupGone && focusOnMore, `popupGone=${popupGone} focusOnMore=${focusOnMore}`);
+  }
+
+  // AC-1.6.6: Roving tabindex anchor is "More" button after Esc
+  {
+    const tabZeroCount = await countTabZero();
+    const moreHasTabZero = await page.evaluate(() => {
+      const el = document.querySelector('.dx-toolbar-menu-container [tabindex="0"]');
+      return !!el;
+    });
+    check('AC-1.6.6', tabZeroCount === 1 && moreHasTabZero,
+      `tabZeros=${tabZeroCount} moreHasTabZero=${moreHasTabZero}`);
+  }
+
+  // AC-1.6.7: ↓ on "More" → popup opens, focus inside list
+  {
+    await navToFI(overflowFI);
+    await pressKey('ArrowDown'); await sleep(150);
+    const popupOpen = await page.evaluate(() => {
+      const btn = document.querySelector('.dx-toolbar-menu-container .dx-dropdownmenu-button');
+      return btn?.getAttribute('aria-expanded') === 'true';
+    });
+    const focusInMenu = await page.evaluate(() => !!document.activeElement?.closest('.dx-dropdownmenu-popup-wrapper'));
+    check('AC-1.6.7', popupOpen && focusInMenu, `popupOpen=${popupOpen} focusInMenu=${focusInMenu}`);
+    await pressKey('Escape'); await sleep(200);
+  }
+
+  // AC-1.6.4: Item activation (Enter on first list item) → popup closes, focus on "More"
+  {
+    await navToFI(overflowFI);
+    await pressKey('Enter'); await sleep(150);
+    await pressKey('Enter'); await sleep(300);  // activate first menu item
+    const popupGone = await page.evaluate(() => {
+      const btn = document.querySelector('.dx-toolbar-menu-container .dx-dropdownmenu-button');
+      return btn?.getAttribute('aria-expanded') === 'false';
+    });
+    const focusOnMore = await page.evaluate(() => !!document.activeElement?.closest('.dx-toolbar-menu-container'));
+    check('AC-1.6.4', popupGone && focusOnMore, `popupGone=${popupGone} focusOnMore=${focusOnMore}`);
+  }
+
+  // AC-1.6.2: ↑/↓ navigate inside menu (dxList handles it); ← / → do NOT navigate toolbar
+  {
+    await navToFI(overflowFI);
+    await pressKey('Enter'); await sleep(150);
+    // Press ↓ — should move to second item (list handles it), not close menu
+    await pressKey('ArrowDown'); await sleep(80);
+    const stillOpen = await page.evaluate(() => {
+      const btn = document.querySelector('.dx-toolbar-menu-container .dx-dropdownmenu-button');
+      return btn?.getAttribute('aria-expanded') === 'true';
+    });
+    const focusOnSecond = await page.evaluate(() => {
+      const ae = document.activeElement;
+      const items = [...document.querySelectorAll(
+        '.dx-dropdownmenu-popup-wrapper .dx-list-item:not(.dx-state-disabled) [tabindex="0"]'
+      )];
+      return items.length > 1 && ae === items[1];
+    });
+    // Press → — should NOT navigate toolbar (insideActiveItem guards it)
+    const idxBefore = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    await pressKey('ArrowRight'); await sleep(80);
+    const idxAfter = await page.evaluate(() => $(document.querySelector('#toolbar')).dxToolbar('instance')._activeItemIndex);
+    check('AC-1.6.2', stillOpen && focusOnSecond && idxBefore === idxAfter,
+      `stillOpen=${stillOpen} focusOnSecond=${focusOnSecond} toolbarIdxUnchanged=${idxBefore === idxAfter}`);
+    await pressKey('Escape'); await sleep(200);
+  }
+
   // ═══ Final report ══════════════════════════════════════════════════════════
   const output = results.join('\n') + `\n\nTotal: ${pass+fail} | PASS: ${pass} | FAIL: ${fail}`;
   return output;
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index ee2123d24fcb..13525bc24720 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -47,6 +47,13 @@ class Toolbar extends ToolbarBase<Properties> {
   // Used by _initMarkup() to re-locate the active item after the re-render.
   _pendingSnapshot: { savedIndex: number; data: Item | null; wasOverflow: boolean } | null = null;
 
+  // Document-level keydown handler attached while the overflow menu is open.
+  // Handles Esc / Tab from inside the popup (which is outside the toolbar DOM).
+  _overflowMenuKeyHandler: EventListener | undefined;
+
+  // True when the overflow menu was closed by Tab (prevents focus being returned to "More" button).
+  _overflowMenuClosedByTab = false;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -451,12 +458,19 @@ class Toolbar extends ToolbarBase<Properties> {
     const isSelectBox = isInput && !!activeEl.closest('.dx-selectbox');
     const isTextBox = isInput && !isSelectBox;
     const isTemplateContainer = activeEl.classList.contains('dx-item-content');
+    const isOverflowButton = !!activeEl.closest('.dx-toolbar-menu-container');
 
     const isVertical = this.$element().attr('aria-orientation') === 'vertical';
     const isRTL = !!this.option('rtlEnabled');
 
     // ── Enter / Space ─────────────────────────────────────────────────────────
     if (key === 'enter' || key === 'space') {
+      if (isOverflowButton) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._openOverflowMenuAndFocus();
+        return;
+      }
       if (isInsideDropDownButton) {
         e.preventDefault();
         e.stopPropagation();
@@ -498,6 +512,12 @@ class Toolbar extends ToolbarBase<Properties> {
 
     // ── ↓ opens popup widgets ─────────────────────────────────────────────────
     if (key === 'downArrow' && !isVertical) {
+      if (isOverflowButton) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._openOverflowMenuAndFocus();
+        return;
+      }
       if (isInsideDropDownButton) {
         e.preventDefault();
         e.stopPropagation();
@@ -622,6 +642,103 @@ class Toolbar extends ToolbarBase<Properties> {
     firstFocusable.focus();
   }
 
+  /**
+   * Opens the overflow ("More") dropdown menu and moves focus to the first list item.
+   * Because the popup is rendered outside the toolbar DOM, a document-level keydown
+   * capture listener is attached to handle Esc and Tab while the menu is open.
+   */
+  _openOverflowMenuAndFocus(): void {
+    // Access the DropDownMenu instance through the layout strategy (it is an
+    // internal component not registered as a jQuery plugin, so it cannot be
+    // retrieved via $(el).data()).
+    interface StrategyWithMenu { _menu?: { option: (name: string, val?: unknown) => unknown } }
+    const instance = (this._layoutStrategy as unknown as StrategyWithMenu)?._menu;
+    if (!instance) return;
+
+    instance.option('opened', true);
+    this._insideActiveItem = true;
+
+    // Collect all focusable targets inside the popup list items.
+    // We navigate between these with ↑/↓ via our document-level listener.
+    // Focusing the scrollview root won't work — ToolbarMenuList has focusStateEnabled=false,
+    // so dxList does not apply .dx-state-focused or move focus between items on arrow keys.
+    const getFocusableMenuItems = (): HTMLElement[] => {
+      const popup = document.querySelector('.dx-dropdownmenu-popup-wrapper');
+      if (!popup) return [];
+      return [...popup.querySelectorAll<HTMLElement>(
+        '.dx-list-item:not(.dx-state-disabled) [tabindex="0"]',
+      )];
+    };
+
+    const items = getFocusableMenuItems();
+    items[0]?.focus();
+
+    // Attach a document-level capture listener to handle Esc/Tab/↑/↓ from the popup.
+    // The popup is outside _$toolbarItemsContainer so the toolbar capture handler
+    // cannot intercept those events.
+    // ALL cleanup is delegated to _optionChanged('overflowMenuVisible') so that
+    // item-click and outside-click are handled uniformly.
+    this._detachOverflowMenuKeyHandler();
+    this._overflowMenuClosedByTab = false;
+
+    this._overflowMenuKeyHandler = (ev: Event): void => {
+      const key = normalizeKeyName(ev as Parameters<typeof normalizeKeyName>[0]);
+
+      if (key === 'downArrow' || key === 'upArrow') {
+        const menuItems = getFocusableMenuItems();
+        if (!menuItems.length) return;
+        const currentIdx = menuItems.indexOf(document.activeElement as HTMLElement);
+        let nextIdx = 0;
+        if (key === 'downArrow') {
+          nextIdx = currentIdx < 0 ? 0 : Math.min(currentIdx + 1, menuItems.length - 1);
+        } else {
+          nextIdx = currentIdx < 0 ? menuItems.length - 1 : Math.max(currentIdx - 1, 0);
+        }
+        menuItems[nextIdx]?.focus();
+        (ev as KeyboardEvent).preventDefault();
+        (ev as KeyboardEvent).stopPropagation();
+      } else if (key === 'escape') {
+        // Close popup; _optionChanged handles cleanup and focus-return.
+        instance.option('opened', false);
+        (ev as KeyboardEvent).stopPropagation();
+        (ev as KeyboardEvent).preventDefault();
+      } else if (key === 'tab') {
+        // Close popup but let Tab propagate so the browser moves focus naturally.
+        this._overflowMenuClosedByTab = true;
+        instance.option('opened', false);
+        // NOTE: do NOT stopPropagation / preventDefault here.
+      }
+    };
+    document.addEventListener('keydown', this._overflowMenuKeyHandler, true);
+  }
+
+  /** Removes the document-level overflow menu keyboard listener if attached. */
+  _detachOverflowMenuKeyHandler(): void {
+    if (this._overflowMenuKeyHandler) {
+      document.removeEventListener('keydown', this._overflowMenuKeyHandler, true);
+      this._overflowMenuKeyHandler = undefined;
+    }
+  }
+
+  /**
+   * Cleans up all state when the overflow menu closes (Esc, Tab, item click, or
+   * outside click). Called from _optionChanged('overflowMenuVisible').
+   */
+  _closeOverflowMenuState(): void {
+    const wasTab = this._overflowMenuClosedByTab;
+    this._insideActiveItem = false;
+    this._overflowMenuClosedByTab = false;
+    this._detachOverflowMenuKeyHandler();
+    if (!wasTab) {
+      const $overflowFT = this._getOverflowButtonFocusTarget();
+      const el = $overflowFT?.get(0) as HTMLElement | undefined;
+      // Defer focus so the popup's hide animation does not intercept focus.
+      if (el) {
+        setTimeout(() => { el.focus(); }, 0);
+      }
+    }
+  }
+
   _handleFocusIn(e: { target: EventTarget | null }): void {
     const targetEl = e.target as Element;
     const focusableItems = this._getFocusableItems();
@@ -680,7 +797,14 @@ class Toolbar extends ToolbarBase<Properties> {
     switch (name) {
       case 'menuContainer':
       case 'menuItemTemplate':
+        break;
       case 'overflowMenuVisible':
+        // When the overflow menu closes while we are in active-item mode, restore state
+        // and return focus to the "More" button (unless menu was closed by Tab, in which
+        // case the browser handles focus navigation naturally).
+        if (!value && this._insideActiveItem) {
+          this._closeOverflowMenuState();
+        }
         break;
       case 'multiline':
         this._invalidate();
@@ -697,6 +821,7 @@ class Toolbar extends ToolbarBase<Properties> {
 
   _dispose(): void {
     this._detachKeyboardNavigation();
+    this._detachOverflowMenuKeyHandler();
     super._dispose();
   }
 

From 0cb0bcb7c16abd2dabbb2f8b64d24fa28eb251db Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 14:17:09 +0200
Subject: [PATCH 08/11] fix(toolbar): fix overflow menu keyboard nav for nested
 dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Don't intercept ↑/↓ with modifier keys (Alt/Ctrl/Meta) — Alt+↓
  is the standard combobox open shortcut; let the widget handle it
- Don't intercept ↑/↓ when a nested popup is open (SelectBox/DropDownBox
  dropdown) or when focus left the overflow popup entirely
- Don't navigate overflow items when currentIdx < 0 (focus is outside
  the menu item list, e.g. in a SelectBox sub-popup)
- Don't intercept Esc when a nested popup is open — let the sub-widget
  close first; subsequent Esc closes the overflow menu
- Set focusStateEnabled=false on the DropDownMenu popup so the overlay
  does not steal focus back to itself after the show animation
- Focus first menu item via requestAnimationFrame to let the popup DOM
  finish rendering before focus is assigned

Verified behaviour:
- ↓ navigates past SelectBox INPUT to next item ✓
- Alt+↓ on SelectBox INPUT opens SelectBox dropdown ✓
- ↑/↓ inside open SelectBox list navigate its items ✓
- Esc1 closes SelectBox; Esc2 closes overflow, returns focus to More ✓
- 43/43 regression tests pass ✓

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../ui/toolbar/internal/toolbar.menu.ts       |  4 ++
 .../js/__internal/ui/toolbar/toolbar.ts       | 38 ++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts b/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts
index 3abd4963b1cc..df4f8bc28c07 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts
@@ -286,6 +286,10 @@ export default class DropDownMenu extends Widget<DropDownMenuProperties> {
       showTitle: false,
       fullScreen: false,
       ignoreChildEvents: false,
+      // Prevent the overlay from auto-focusing its content after the show
+      // animation completes. Focus management for the overflow menu popup is
+      // handled entirely by the toolbar's keyboard navigation logic.
+      focusStateEnabled: false,
       _ignoreCloseOnChildEscape: true,
       _fixWrapperPosition: true,
     });
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index 13525bc24720..49d9abbdac97 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -670,8 +670,13 @@ class Toolbar extends ToolbarBase<Properties> {
       )];
     };
 
-    const items = getFocusableMenuItems();
-    items[0]?.focus();
+    // Focus the first item after the popup finishes opening.
+    // The popup overlay previously stole focus via its onShown handler, but
+    // toolbar.menu.ts now has focusStateEnabled:false on the popup to prevent that.
+    // We still defer with rAF to let the popup finish rendering.
+    window.requestAnimationFrame(() => {
+      getFocusableMenuItems()[0]?.focus();
+    });
 
     // Attach a document-level capture listener to handle Esc/Tab/↑/↓ from the popup.
     // The popup is outside _$toolbarItemsContainer so the toolbar capture handler
@@ -684,20 +689,43 @@ class Toolbar extends ToolbarBase<Properties> {
     this._overflowMenuKeyHandler = (ev: Event): void => {
       const key = normalizeKeyName(ev as Parameters<typeof normalizeKeyName>[0]);
 
+      // If focus has moved into a sub-popup (e.g. SelectBox dropdown) or a nested
+      // overlay opened by a widget inside the overflow menu, let that widget handle
+      // keyboard events first. We detect this by checking whether focus left the
+      // overflow popup wrapper, or whether any overlay other than our own is open.
+      const overflowWrapper = document.querySelector('.dx-dropdownmenu-popup-wrapper');
+      const ae = document.activeElement as HTMLElement | null;
+      const focusInOverflow = !!overflowWrapper && !!ae && overflowWrapper.contains(ae);
+      const nestedPopupOpen = !!document.querySelector(
+        '.dx-popup-wrapper:not(.dx-dropdownmenu-popup-wrapper)',
+      );
+
       if (key === 'downArrow' || key === 'upArrow') {
+        // Don't intercept arrows with modifiers — Alt+↓ opens a SelectBox dropdown,
+        // etc. Also skip when a nested popup is open (SelectBox/DropDownBox dropdown)
+        // or when focus left the overflow popup entirely.
+        const evt = ev as KeyboardEvent;
+        if (evt.altKey || evt.ctrlKey || evt.metaKey) return;
+        if (nestedPopupOpen || !focusInOverflow) return;
+
         const menuItems = getFocusableMenuItems();
         if (!menuItems.length) return;
-        const currentIdx = menuItems.indexOf(document.activeElement as HTMLElement);
+        const currentIdx = menuItems.indexOf(ae);
+        if (currentIdx < 0) return; // focus not on a menu item — don't navigate
         let nextIdx = 0;
         if (key === 'downArrow') {
-          nextIdx = currentIdx < 0 ? 0 : Math.min(currentIdx + 1, menuItems.length - 1);
+          nextIdx = Math.min(currentIdx + 1, menuItems.length - 1);
         } else {
-          nextIdx = currentIdx < 0 ? menuItems.length - 1 : Math.max(currentIdx - 1, 0);
+          nextIdx = Math.max(currentIdx - 1, 0);
         }
         menuItems[nextIdx]?.focus();
         (ev as KeyboardEvent).preventDefault();
         (ev as KeyboardEvent).stopPropagation();
       } else if (key === 'escape') {
+        // Don't intercept Escape if a nested popup (SelectBox dropdown) is open —
+        // let the widget close its own popup first. A subsequent Escape will then
+        // reach us to close the overflow menu.
+        if (nestedPopupOpen || !focusInOverflow) return;
         // Close popup; _optionChanged handles cleanup and focus-return.
         instance.option('opened', false);
         (ev as KeyboardEvent).stopPropagation();

From 160fd1234768bb7d446c3b8ca2674e6dc746f6a0 Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Tue, 5 May 2026 14:57:48 +0200
Subject: [PATCH 09/11] fix(toolbar): open SelectBox popup on Enter/Space in
 overflow menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When focus lands on a SelectBox INPUT inside the overflow menu (after
navigating with ↑/↓), pressing Enter or Space now opens the SelectBox
popup — same behaviour as in the main toolbar.

- ↓ still navigates to the next overflow menu item (Alt+↓ or Enter/Space
  are the correct triggers for opening the SelectBox)
- Esc1 closes the SelectBox sub-popup; Esc2 closes the overflow menu
- 43/43 regression tests pass ✓

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../js/__internal/ui/toolbar/toolbar.ts         | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index 49d9abbdac97..2b961c6e679d 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -700,7 +700,22 @@ class Toolbar extends ToolbarBase<Properties> {
         '.dx-popup-wrapper:not(.dx-dropdownmenu-popup-wrapper)',
       );
 
-      if (key === 'downArrow' || key === 'upArrow') {
+      if (key === 'enter' || key === 'space') {
+        // When focus is on a DropDown-style INPUT inside the overflow menu (e.g.
+        // SelectBox), Enter/Space should open its popup — same as in the main toolbar.
+        // For plain buttons and ButtonGroups the browser default (click) is correct.
+        if (nestedPopupOpen || !focusInOverflow || !ae) return;
+        const selectBoxRoot = ae.closest<HTMLElement>('.dx-selectbox');
+        if (selectBoxRoot) {
+          const selectBoxInst = $(selectBoxRoot).data('dxSelectBox') as unknown as
+            { open: () => void } | undefined;
+          if (selectBoxInst) {
+            selectBoxInst.open();
+            (ev as KeyboardEvent).preventDefault();
+            (ev as KeyboardEvent).stopPropagation();
+          }
+        }
+      } else if (key === 'downArrow' || key === 'upArrow') {
         // Don't intercept arrows with modifiers — Alt+↓ opens a SelectBox dropdown,
         // etc. Also skip when a nested popup is open (SelectBox/DropDownBox dropdown)
         // or when focus left the overflow popup entirely.

From fc50d287e64eb1d778d46843b71c9e3dccbebc1c Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Wed, 6 May 2026 11:12:19 +0200
Subject: [PATCH 10/11] add outline

---
 packages/devextreme/playground/jquery.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index 13704a869885..2479799a5e69 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -42,6 +42,12 @@
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
     <style>
+        .dx-item-content:focus-within,
+        .dx-toolbar-menu-container:focus-within {
+            outline: 2px solid #555 !important;
+            outline-offset: 1px !important;
+        }
+
         .dx-resizable-handle::after {
             content: "";
             position: absolute;

From f50f8b0c568cc21ebe7e8c9e9c35c09a8112e5aa Mon Sep 17 00:00:00 2001
From: pharret31 <pharret31@gmail.com>
Date: Wed, 6 May 2026 11:46:39 +0200
Subject: [PATCH 11/11] fix(toolbar): delegate TextBox focus to container div
 in nav mode

In keyboard-navigation mode, toolbar previously focused the inner
<input> of dxTextBox items, causing the cursor to blink and the widget
to appear ready for typing before the user pressed Enter.

Changes:
- toolbar.utils.ts: resolveItemFocusTarget returns the .dx-textbox
  container div (element()) for dxTextBox items instead of _focusTarget()
  (the inner <input>)
- toolbar.ts _syncRovingTabIndex: always sets .dx-textbox input to
  tabindex=-1 so the input is never directly tab-reachable
- toolbar.ts isTextBox detection: changed from 'INPUT && !SelectBox'
  to 'classList.dx-textbox && !classList.dx-selectbox' to match the
  new container-based focus target
- toolbar.ts Enter handler: explicitly calls querySelector('input').focus()
  to enter edit mode when Enter is pressed on the TextBox container
- toolbar.ts _handleFocusIn: added isTransitionIntoTextBoxEdit guard to
  preserve _insideActiveItem=true when focus moves from container to
  inner input after Enter (prevents character keys from being blocked)
- kbn-regression-test.js: updated isTB detection to match new focus target

Fixes: TextBox shows blinking caret in navigation mode (pre-edit state)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .playwright-mcp/kbn-regression-test.js        |  3 +-
 .../js/__internal/ui/toolbar/toolbar.ts       | 35 ++++++++++++-------
 .../js/__internal/ui/toolbar/toolbar.utils.ts |  4 +++
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/.playwright-mcp/kbn-regression-test.js b/.playwright-mcp/kbn-regression-test.js
index 688d882e76d0..c250a1bfcc8c 100644
--- a/.playwright-mcp/kbn-regression-test.js
+++ b/.playwright-mcp/kbn-regression-test.js
@@ -60,7 +60,8 @@ async (page) => {
         const inBG = el.classList.contains('dx-buttongroup') || el.tagName === 'INPUT' && !!el.closest('.dx-buttongroup');
         const inDDB = !!el.closest('.dx-dropdownbutton');
         const isSB = el.tagName === 'INPUT' && !!el.closest('.dx-selectbox');
-        const isTB = el.tagName === 'INPUT' && !isSB;
+        // TextBox focus target is now the .dx-textbox container div (not the inner input)
+        const isTB = el.classList.contains('dx-textbox') && !el.classList.contains('dx-selectbox');
         const isTmpl = el.classList.contains('dx-item-content');
         const isStandaloneBG = inBG && !inDDB && !isSB;
         return { isSB, isTB, isTmpl, isStandaloneBG, inDDB };
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index 2b961c6e679d..4ffba9710c8b 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -358,6 +358,10 @@ class Toolbar extends ToolbarBase<Properties> {
 
     this._getOverflowButtonFocusTarget()?.attr('tabIndex', -1);
 
+    // TextBox items use the container div as the tab stop; keep the inner <input>
+    // non-tabbable so Tab does not land directly on it in toolbar-navigation mode.
+    this._$toolbarItemsContainer?.find('.dx-textbox input').attr('tabIndex', -1);
+
     const focusableItems = this._getFocusableItems();
     if (!focusableItems.length) return;
 
@@ -456,7 +460,7 @@ class Toolbar extends ToolbarBase<Properties> {
     const isInsideDropDownButton = !!activeEl.closest('.dx-dropdownbutton');
     const isInput = activeEl.tagName === 'INPUT';
     const isSelectBox = isInput && !!activeEl.closest('.dx-selectbox');
-    const isTextBox = isInput && !isSelectBox;
+    const isTextBox = activeEl.classList.contains('dx-textbox') && !activeEl.classList.contains('dx-selectbox');
     const isTemplateContainer = activeEl.classList.contains('dx-item-content');
     const isOverflowButton = !!activeEl.closest('.dx-toolbar-menu-container');
 
@@ -487,7 +491,9 @@ class Toolbar extends ToolbarBase<Properties> {
         if (key === 'enter') {
           // Only Enter activates editing mode (not Space).
           this._insideActiveItem = true;
-          return; // pass through to input
+          e.preventDefault();
+          activeEl.querySelector<HTMLInputElement>('input')?.focus();
+          return;
         }
         // Space: stay in toolbar mode, block insertion.
         e.preventDefault();
@@ -803,19 +809,22 @@ class Toolbar extends ToolbarBase<Properties> {
     this._lastFocusFromMouse = false;
 
     if (isOnFocusTarget) {
-      // For a mouse click on a TextBox, immediately activate edit mode so the user can
-      // type without pressing Enter first. For all other items, always reset to toolbar mode.
-      const isFocusTargetInput = focusTargetEl?.tagName === 'INPUT';
-      const isFocusTargetSelectBox = isFocusTargetInput && !!focusTargetEl?.closest?.('.dx-selectbox');
-      const isFocusTargetTextBox = isFocusTargetInput && !isFocusTargetSelectBox;
-
-      this._insideActiveItem = fromMouse && isFocusTargetTextBox;
+      // Keyboard navigation focused the exact focus target element.
+      // TextBox containers are never focused by mouse (the inner input is), so this
+      // path never activates TextBox edit mode — always reset to toolbar mode.
+      this._insideActiveItem = false;
     } else {
-      // Focus landed on a child element inside the item (e.g. mouse click on an inner
-      // input/button inside a template). Enter edit mode for template containers;
-      // reset to toolbar mode for everything else (guards against stale state).
+      // Focus landed inside a child element (e.g. mouse click on an inner input/button).
+      // Enter edit mode for template containers and for mouse clicks into a TextBox
+      // (so the user can type immediately without pressing Enter first).
+      // Also preserve edit mode when focus programmatically moves from the TextBox
+      // container to its inner <input> (i.e. after Enter activates edit mode).
       const isFocusTargetTemplate = !!focusTargetEl?.classList.contains('dx-item-content');
-      this._insideActiveItem = isFocusTargetTemplate;
+      const isMouseClickIntoTextBox = fromMouse && !!focusTargetEl?.classList.contains('dx-textbox');
+      const isTransitionIntoTextBoxEdit = !!focusTargetEl?.classList.contains('dx-textbox') && this._insideActiveItem;
+      this._insideActiveItem = isFocusTargetTemplate
+        || isMouseClickIntoTextBox
+        || isTransitionIntoTextBoxEdit;
     }
 
     this._activeItemIndex = index;
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
index 5dbe1c380b98..837d1679821e 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.utils.ts
@@ -56,6 +56,10 @@ export function resolveItemFocusTarget(
 
     if (widget === 'dxDropDownButton') {
       $focusTarget = $focusTarget?.find(`.${BUTTON_GROUP_CLASS}`);
+    } else if (widget === 'dxTextBox') {
+      // Use the container div (not the inner <input>) as the toolbar focus target so
+      // the blinking caret is hidden until the user presses Enter to enter edit mode.
+      $focusTarget = $(itemInstance.element());
     } else {
       $focusTarget = $focusTarget ?? $(itemInstance.element());
     }