diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.kbn.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.kbn.ts
new file mode 100644
index 000000000000..8404eff2bfaa
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.kbn.ts
@@ -0,0 +1,576 @@
+ import eventsEngine from '@js/common/core/events/core/events_engine';
+import { addNamespace } from '@js/common/core/events/utils';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import type { Item } from '@js/ui/toolbar';
+
+import type Toolbar from './toolbar';
+
+const EVENT_NAMESPACE = 'dxToolbarKBN';
+
+const BUTTON_GROUP_CLASS = 'dx-buttongroup';
+const BUTTON_GROUP_ITEM_CLASS = 'dx-buttongroup-item';
+const TOOLBAR_ITEM_INVISIBLE_CLASS = 'dx-toolbar-item-invisible';
+const STATE_INVISIBLE_CLASS = 'dx-state-invisible';
+const TOOLBAR_MENU_CONTAINER_CLASS = 'dx-toolbar-menu-container';
+const TOOLBAR_MENU_ACTION_CLASS = 'dx-toolbar-menu-action';
+const DROP_DOWN_MENU_CLASS = 'dx-dropdownmenu';
+
+// Widget types that can appear as toolbar items and have a known focus target
+const KNOWN_WIDGET_TYPES = [
+  'dxAutocomplete',
+  'dxButton',
+  'dxCheckBox',
+  'dxDateBox',
+  'dxMenu',
+  'dxSelectBox',
+  'dxTabs',
+  'dxTextBox',
+  'dxButtonGroup',
+  'dxDropDownButton',
+];
+
+interface FocusableItem {
+  $toolbarItem: dxElementWrapper;
+  $focusTarget: dxElementWrapper;
+  itemData?: Item;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getWidgetInstance($el: dxElementWrapper): any | null {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const data = ($el.data as () => any)();
+  const components = data?.dxComponents as string[] | undefined;
+  const widgetName = components?.[0];
+  if (!widgetName) return null;
+
+  return data[widgetName] ?? null;
+}
+
+/**
+ * Finds the primary focusable DOM element inside a single toolbar item container.
+ *
+ * - For known DevExtreme widget types the widget instance's _focusTarget() is used.
+ * - For custom template items the first naturally focusable descendant is returned.
+ * - Returns null when no focusable element can be found (separators, static labels).
+ */
+function resolveFocusTarget(
+  $toolbarItem: dxElementWrapper,
+  itemData: Item,
+): dxElementWrapper | null {
+  const { widget } = itemData;
+
+  if (widget && KNOWN_WIDGET_TYPES.includes(widget)) {
+    const selector = widget.toLowerCase().replace('dx', '.dx-');
+    const $widgetRoot = $toolbarItem.find(selector).first();
+    if (!$widgetRoot.length) return null;
+
+    const instance = getWidgetInstance($widgetRoot);
+    if (!instance) return null;
+
+    let $target: dxElementWrapper | null = instance._focusTarget?.() ?? null;
+
+    if (widget === 'dxDropDownButton') {
+      $target = $target?.find(`.${BUTTON_GROUP_CLASS}`) ?? null;
+    } else if (!$target?.length) {
+      $target = $(instance.element());
+    }
+
+    return $target?.length ? $target : null;
+  }
+
+  // Custom template: take the first naturally keyboard-reachable element.
+  const $generic = $toolbarItem
+    .find('button:not([disabled]), input:not([disabled]), select:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])')
+    .first();
+
+  return $generic.length ? $generic : null;
+}
+
+/**
+ * Determines whether a toolbar item should participate in roving-tabindex navigation.
+ * Separators, hidden items, and disabled items are excluded.
+ */
+function isItemNavigable(
+  $toolbarItem: dxElementWrapper,
+  itemData: Item,
+  toolbarDisabled: boolean,
+): boolean {
+  if (toolbarDisabled) return false;
+  if (itemData.disabled ?? (itemData.options as Record<string, unknown> | undefined)?.disabled) {
+    return false;
+  }
+  if ($toolbarItem.hasClass(TOOLBAR_ITEM_INVISIBLE_CLASS)) return false;
+  if ($toolbarItem.hasClass(STATE_INVISIBLE_CLASS)) return false;
+  if ($toolbarItem.css('display') === 'none') return false;
+  return true;
+}
+
+/**
+ * ToolbarKBN — manages roving-tabindex keyboard navigation for a toolbar.
+ *
+ * Lifecycle:
+ *   1. Instantiate: `new ToolbarKBN(toolbar)`
+ *   2. Call `attach()` once the toolbar DOM is ready.
+ *   3. Call `refresh()` whenever the item set or disabled state changes.
+ *   4. Call `detach()` on toolbar dispose.
+ */
+export class ToolbarKBN {
+  private readonly _toolbar: Toolbar;
+
+  /** Index into the list returned by `_getFocusableItems()` that currently holds tabindex=0. */
+  private _rovingIndex = 0;
+
+  /** Virtual focus index within the overflow popup rows (-1 = none). */
+  private _popupFocusIdx = -1;
+
+  /** Tracks whether popup was open last time _getPopupRows() was called (to reset on re-open). */
+  private _wasPopupOpen = false;
+
+  private _isAttached = false;
+
+  // Native capture-phase handler + element reference, kept for removeEventListener.
+  private _captureKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  // Document-level capture handler for overflow popup navigation.
+  private _docKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  // focusout handler to clear stale BG dx-state-focused when Tab moves focus out of toolbar.
+  private _focusOutHandler: ((e: FocusEvent) => void) | null = null;
+
+  private _domEl: HTMLElement | null = null;
+
+  constructor(toolbar: Toolbar) {
+    this._toolbar = toolbar;
+  }
+
+  // ─── Public API ────────────────────────────────────────────────────────────
+
+  attach(): void {
+    if (this._isAttached) return;
+
+    // Use native capture-phase listener so the toolbar KBN fires BEFORE handlers
+    // on descendant widgets (e.g. ButtonGroup calls stopPropagation on ArrowRight
+    // in the bubble phase, which would prevent this handler from running).
+    this._captureKeydownHandler = (e: KeyboardEvent) => { this._handleKeyDown(e); };
+    // element() returns a jQuery-like dxElementWrapper; [0] gives the raw DOM node.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this._domEl = (this._toolbar.element() as any)[0] as HTMLElement;
+    this._domEl.addEventListener('keydown', this._captureKeydownHandler, { capture: true });
+
+    // Document-level capture handler for popup keyboard navigation (Issue 3).
+    // Must be document-level because the popup is rendered outside the toolbar DOM.
+    this._docKeydownHandler = (e: KeyboardEvent) => { this._handleDocKeyDown(e); };
+    document.addEventListener('keydown', this._docKeydownHandler, { capture: true });
+
+    const mousedownEvent = addNamespace('mousedown', EVENT_NAMESPACE);
+    eventsEngine.on(
+      this._toolbar.element(),
+      mousedownEvent,
+      (e: MouseEvent) => { this._handleMouseDown(e); },
+    );
+
+    // focusout listener: clears BG dx-state-focused when focus leaves the toolbar via Tab.
+    this._focusOutHandler = (e: FocusEvent) => {
+      const relatedTarget = e.relatedTarget as HTMLElement | null;
+      if (!this._domEl?.contains(relatedTarget)) {
+        this._clearBGFocusedState();
+      }
+    };
+    this._domEl.addEventListener('focusout', this._focusOutHandler);
+
+    this._isAttached = true;
+  }
+
+  detach(): void {
+    if (!this._isAttached) return;
+
+    if (this._captureKeydownHandler && this._domEl) {
+      this._domEl.removeEventListener('keydown', this._captureKeydownHandler, { capture: true });
+      this._captureKeydownHandler = null;
+    }
+
+    if (this._focusOutHandler && this._domEl) {
+      this._domEl.removeEventListener('focusout', this._focusOutHandler);
+      this._focusOutHandler = null;
+    }
+
+    this._domEl = null;
+
+    if (this._docKeydownHandler) {
+      document.removeEventListener('keydown', this._docKeydownHandler, { capture: true });
+      this._docKeydownHandler = null;
+    }
+
+    eventsEngine.off(this._toolbar.element(), `.${EVENT_NAMESPACE}`);
+    this._isAttached = false;
+  }
+
+  /**
+   * Re-scans focusable items and applies roving tabindex.
+   * Call after every markup change (items added/removed/disabled).
+   */
+  refresh(): void {
+    const items = this._getFocusableItems();
+    if (items.length === 0) return;
+
+    // Clamp the stored index so it remains valid after item set changes.
+    this._rovingIndex = Math.max(0, Math.min(this._rovingIndex, items.length - 1));
+    this._applyRovingTabindex(items);
+  }
+
+  // ─── Private helpers ───────────────────────────────────────────────────────
+
+  private _getFocusableItems(): FocusableItem[] {
+    const toolbar = this._toolbar;
+    const toolbarDisabled = !!toolbar.option('disabled');
+    const result: FocusableItem[] = [];
+
+    toolbar._getToolbarItems().forEach((itemData) => {
+      const $item = toolbar._findItemElementByItem(itemData);
+      if (!$item.length) return;
+      if (!isItemNavigable($item, itemData, toolbarDisabled)) return;
+
+      const $focusTarget = resolveFocusTarget($item, itemData);
+      if (!$focusTarget?.length) return;
+
+      result.push({ $toolbarItem: $item, $focusTarget, itemData });
+    });
+
+    // Include the overflow ("More") button if it exists and is visible.
+    const $overflowContainer = toolbar.$element()
+      .find(`.${TOOLBAR_MENU_CONTAINER_CLASS}`)
+      .not(`.${STATE_INVISIBLE_CLASS}`)
+      .first();
+
+    if ($overflowContainer.length) {
+      const $btn = $overflowContainer.find('.dx-button').first();
+      if ($btn.length) {
+        result.push({ $toolbarItem: $overflowContainer, $focusTarget: $btn });
+      }
+    }
+
+    return result;
+  }
+
+  private _applyRovingTabindex(items?: FocusableItem[]): void {
+    const focusableItems = items ?? this._getFocusableItems();
+    focusableItems.forEach(({ $focusTarget }, index) => {
+      $focusTarget.attr('tabindex', index === this._rovingIndex ? 0 : -1);
+    });
+  }
+
+  /**
+   * Intercepts Arrow / Home / End keys when focus is inside the current roving item.
+   *
+   * - Issue 2: Blocks navigation while a SelectBox dropdown is open.
+   * - Issue 1: Passes Left/Right through to ButtonGroup for internal navigation;
+   *   only intercepts at the first/last button boundary to exit the group.
+   */
+  private _handleKeyDown(e: KeyboardEvent): void {
+    const items = this._getFocusableItems();
+    if (!items.length) return;
+
+    const rovingItem = items[this._rovingIndex];
+    if (!rovingItem) return;
+
+    // Only act when focus is anywhere inside the current roving toolbar item.
+    const activeEl = document.activeElement;
+    if (!rovingItem.$toolbarItem.get(0).contains(activeEl)) return;
+
+    // Defensive guard: don't do toolbar nav while overflow popup is open.
+    if (this._isOverflowPopupOpen()) return;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const isVertical = ((this._toolbar.option as unknown as (key: string) => unknown)('orientation')) === 'vertical';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const isRTL = !!(this._toolbar.option as unknown as (key: string) => unknown)('rtlEnabled');
+
+    const nextKey = isVertical ? 'ArrowDown' : (isRTL ? 'ArrowLeft' : 'ArrowRight');
+    const prevKey = isVertical ? 'ArrowUp' : (isRTL ? 'ArrowRight' : 'ArrowLeft');
+
+    // Issue 2: block all navigation while a SelectBox in the current item is open.
+    if (this._isSelectBoxOpen(rovingItem)) return;
+
+    // Issue 1: ButtonGroup — KBN fully owns Left/Right navigation inside the group.
+    // BG's own keyboard handler requires a prior mousedown to activate, which doesn't
+    // happen during programmatic or Tab-based focus. KBN manually moves dx-state-focused
+    // to track the virtual cursor, and exits to the toolbar at first/last boundaries.
+    const bgInstance = this._getButtonGroupInstance(rovingItem);
+    if (bgInstance && (e.key === nextKey || e.key === prevKey)) {
+      const $bgEl = rovingItem.$toolbarItem.find(`.${BUTTON_GROUP_CLASS}`).first();
+      const $allItems = $bgEl.find(`.${BUTTON_GROUP_ITEM_CLASS}`);
+      const $focusedItem = $bgEl.find(`.${BUTTON_GROUP_ITEM_CLASS}.dx-state-focused`);
+      const isFirst = !$focusedItem.length || $focusedItem.is($allItems.first());
+      const isLast = $focusedItem.length > 0 && $focusedItem.is($allItems.last());
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.key === nextKey && isLast) {
+        // Exit BG to the right.
+        this._moveByOffset(1, items, 1);
+      } else if (e.key === prevKey && isFirst) {
+        // Exit BG to the left.
+        this._moveByOffset(-1, items, -1);
+      } else if (e.key === nextKey) {
+        // Move virtual focus to the next BG item.
+        const $next = $focusedItem.length
+          ? $focusedItem.next().filter(`.${BUTTON_GROUP_ITEM_CLASS}`)
+          : $allItems.first();
+        if ($next.length) {
+          $allItems.removeClass('dx-state-focused');
+          $next.addClass('dx-state-focused');
+        }
+      } else {
+        // Move virtual focus to the previous BG item.
+        const $prev = $focusedItem.length
+          ? $focusedItem.prev().filter(`.${BUTTON_GROUP_ITEM_CLASS}`)
+          : $allItems.last();
+        if ($prev.length) {
+          $allItems.removeClass('dx-state-focused');
+          $prev.addClass('dx-state-focused');
+        }
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case nextKey:
+        e.preventDefault();
+        e.stopPropagation();
+        this._moveByOffset(1, items, 1);
+        break;
+
+      case prevKey:
+        e.preventDefault();
+        e.stopPropagation();
+        this._moveByOffset(-1, items, -1);
+        break;
+
+      case 'Home':
+        e.preventDefault();
+        e.stopPropagation();
+        this._moveTo(0, items, 1);
+        break;
+
+      case 'End':
+        e.preventDefault();
+        e.stopPropagation();
+        this._moveTo(items.length - 1, items, -1);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  /** Updates the roving anchor to whichever toolbar item the user clicked. */
+  private _handleMouseDown(e: MouseEvent): void {
+    const items = this._getFocusableItems();
+    for (let i = 0; i < items.length; i += 1) {
+      if (items[i].$toolbarItem.get(0).contains(e.target as Element)) {
+        this._rovingIndex = i;
+        this._applyRovingTabindex(items);
+        break;
+      }
+    }
+  }
+
+  /** Moves focus by +1 or -1. Non-wrapping: stops at boundaries. */
+  private _moveByOffset(offset: number, items: FocusableItem[], direction?: 1 | -1): void {
+    const newIndex = this._rovingIndex + offset;
+    // KBN-8: non-wrapping — silently ignore out-of-range moves.
+    if (newIndex >= 0 && newIndex < items.length) {
+      this._moveTo(newIndex, items, direction ?? (offset > 0 ? 1 : -1));
+    }
+  }
+
+  /**
+   * Moves the roving anchor to `index` and focuses the target element.
+   * `direction` (1 = entering from left/top, -1 = entering from right/bottom) controls
+   * which ButtonGroup item gets the initial focused-element highlight on entry.
+   */
+  private _moveTo(index: number, items: FocusableItem[], direction: 1 | -1 = 1): void {
+    if (index < 0 || index >= items.length) return;
+
+    // Clear stale BG focused state when leaving a ButtonGroup item.
+    if (index !== this._rovingIndex) {
+      const prevItem = items[this._rovingIndex];
+      if (prevItem) {
+        this._clearBGFocusedState(prevItem);
+      }
+    }
+
+    this._rovingIndex = index;
+    this._applyRovingTabindex(items);
+    const item = items[index];
+    const el = item.$focusTarget.get(0) as HTMLElement | undefined;
+    el?.focus();
+
+    // Issue 1: pre-set ButtonGroup's focused item based on entry direction so the
+    // first Left/Right press within the group moves to the correct adjacent button.
+    const bgInstance = this._getButtonGroupInstance(item);
+    if (bgInstance) {
+      const $bgEl = item.$toolbarItem.find(`.${BUTTON_GROUP_CLASS}`).first();
+      const $allItems = $bgEl.find(`.${BUTTON_GROUP_ITEM_CLASS}`);
+      const $entryItem = direction >= 0 ? $allItems.first() : $allItems.last();
+      if ($entryItem.length) {
+        // Set via option so ButtonGroup tracks it internally
+        bgInstance.option('focusedElement', $entryItem.get(0));
+        // Also ensure the visual focused state matches
+        $allItems.removeClass('dx-state-focused');
+        $entryItem.addClass('dx-state-focused');
+      }
+    }
+  }
+
+  // ─── Issue 1: ButtonGroup helpers ─────────────────────────────────────────
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _getButtonGroupInstance(item: FocusableItem): any | null {
+    if (item.itemData?.widget !== 'dxButtonGroup') return null;
+    const $bg = item.$toolbarItem.find(`.${BUTTON_GROUP_CLASS}`).first();
+    return $bg.length ? getWidgetInstance($bg) : null;
+  }
+
+  /** Removes dx-state-focused from all ButtonGroup items in the given toolbar item (or all BGs if not provided). */
+  private _clearBGFocusedState(item?: FocusableItem): void {
+    const $scope = item
+      ? item.$toolbarItem
+      : this._toolbar.$element();
+    $scope.find(`.${BUTTON_GROUP_ITEM_CLASS}`).removeClass('dx-state-focused');
+  }
+
+  // ─── Issue 2: SelectBox open-state guard ──────────────────────────────────
+
+  private _isSelectBoxOpen(item: FocusableItem): boolean {
+    if (item.itemData?.widget !== 'dxSelectBox') return false;
+    const $sb = item.$toolbarItem.find('.dx-selectbox').first();
+    return !!($sb.length ? getWidgetInstance($sb)?.option('opened') : false);
+  }
+
+  // ─── Issue 3: Overflow popup navigation (virtual focus) ───────────────────
+  //
+  // DevExtreme's overlay captures HTML focus on the dx-overlay-content element
+  // whenever anything inside the popup receives .focus(). To work around this,
+  // popup navigation is fully virtual: HTML focus stays on the overflow button
+  // (inside the toolbar) and dx-state-focused is toggled on list rows as a
+  // visual cursor. stopImmediatePropagation at document-capture level is used to
+  // prevent the overlay's Tab trap from interfering.
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _getDropDownMenuInstance(): any | null {
+    const $ddm = this._toolbar.$element().find(`.${DROP_DOWN_MENU_CLASS}`).first();
+    return $ddm.length ? getWidgetInstance($ddm) : null;
+  }
+
+  private _isOverflowPopupOpen(): boolean {
+    return !!this._getDropDownMenuInstance()?.option('opened');
+  }
+
+  /**
+   * Returns action rows inside the overflow popup, resetting virtual focus
+   * index each time the popup is freshly opened.
+   */
+  private _getPopupRows(): HTMLElement[] {
+    const ddm = this._getDropDownMenuInstance();
+    const isOpen = !!ddm?.option('opened');
+    if (!isOpen) {
+      this._wasPopupOpen = false;
+      return [];
+    }
+    if (!this._wasPopupOpen) {
+      // Popup just opened — reset virtual cursor and clear any stale class.
+      this._popupFocusIdx = -1;
+      this._wasPopupOpen = true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    const $content = ddm._popup?.$content?.() as dxElementWrapper | undefined;
+    const contentEl = $content?.get(0) as HTMLElement | undefined;
+    if (!contentEl) return [];
+    return Array.from(
+      contentEl.querySelectorAll(`.${TOOLBAR_MENU_ACTION_CLASS}`),
+    ) as HTMLElement[];
+  }
+
+  /** Moves the virtual focus cursor to `idx` and updates dx-state-focused. */
+  private _setPopupVirtualFocus(rows: HTMLElement[], idx: number): void {
+    rows.forEach((r) => r.classList.remove('dx-state-focused'));
+    if (idx >= 0 && rows[idx]) {
+      rows[idx].classList.add('dx-state-focused');
+    }
+    this._popupFocusIdx = idx;
+  }
+
+  /** Closes the overflow popup and clears virtual focus state. */
+  private _closeOverflowPopup(): void {
+    const ddm = this._getDropDownMenuInstance();
+    // Clear visual state before closing so rows are clean on next open.
+    const rows = this._getPopupRows();
+    rows.forEach((r) => r.classList.remove('dx-state-focused'));
+    this._popupFocusIdx = -1;
+    this._wasPopupOpen = false;
+    ddm?.option('opened', false);
+  }
+
+  /**
+   * Document-level keydown handler (capture phase).
+   * When the overflow popup is open this intercepts navigation keys and drives
+   * virtual focus — it never calls .focus() on popup items, so the overlay
+   * cannot steal HTML focus away from the overflow button.
+   */
+  private _handleDocKeyDown(e: KeyboardEvent): void {
+    if (!this._isOverflowPopupOpen()) return;
+
+    const NAV_KEYS = ['ArrowDown', 'ArrowUp', 'Tab', 'Escape', 'Enter', ' '];
+    if (!NAV_KEYS.includes(e.key)) return;
+
+    // Consume the event before any other listener (e.g. the overlay Tab trap).
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    if (e.key === 'Escape') {
+      this._closeOverflowPopup();
+      // The overlay steals HTML focus from the overflow button when the popup opens.
+      // After closing, explicitly restore focus to the overflow button.
+      const items = this._getFocusableItems();
+      const rovingItem = items[this._rovingIndex];
+      const el = rovingItem?.$focusTarget.get(0) as HTMLElement | undefined;
+      el?.focus();
+      return;
+    }
+
+    const rows = this._getPopupRows();
+    if (!rows.length) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      // Activate the currently virtually-focused item.
+      if (this._popupFocusIdx >= 0 && rows[this._popupFocusIdx]) {
+        const clickTarget = rows[this._popupFocusIdx].querySelector<HTMLElement>(
+          '[tabindex="0"], button:not([disabled])',
+        );
+        clickTarget?.click();
+      }
+      // Popup closes via the click above (not via _closeOverflowPopup), so we must
+      // manually reset virtual-focus state and clean up CSS classes.
+      rows.forEach((r) => r.classList.remove('dx-state-focused'));
+      this._popupFocusIdx = -1;
+      this._wasPopupOpen = false;
+      // Restore HTML focus to the overflow button (overlay stole it when popup opened).
+      const items = this._getFocusableItems();
+      const rovingItem = items[this._rovingIndex];
+      const el = rovingItem?.$focusTarget.get(0) as HTMLElement | undefined;
+      el?.focus();
+      return;
+    }
+
+    // ArrowDown / Tab forward → next row; ArrowUp / Shift+Tab → previous row.
+    const isDown = e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey);
+    const cur = this._popupFocusIdx;
+    const next = isDown
+      ? (cur === -1 ? 0 : Math.min(cur + 1, rows.length - 1))
+      : (cur === -1 ? rows.length - 1 : Math.max(cur - 1, 0));
+    this._setPopupVirtualFocus(rows, next);
+  }
+}
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index ae02af7499e3..95f435042469 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -7,24 +7,32 @@ import { MultiLineStrategy } from './strategy/toolbar.multiline';
 import { SingleLineStrategy } from './strategy/toolbar.singleline';
 import type { ToolbarBaseProperties } from './toolbar.base';
 import ToolbarBase from './toolbar.base';
+import { ToolbarKBN } from './toolbar.kbn';
 import { toggleItemFocusableElementTabIndex } from './toolbar.utils';
 
 const TOOLBAR_MULTILINE_CLASS = 'dx-toolbar-multiline';
 const TOOLBAR_AUTO_HIDE_TEXT_CLASS = 'dx-toolbar-text-auto-hide';
 
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+
 export interface Properties extends ToolbarBaseProperties {
   menuContainer?: string | Element | undefined;
   overflowMenuVisible?: boolean;
+  /** Controls arrow-key navigation direction and sets aria-orientation. Default: 'horizontal'. */
+  orientation?: ToolbarOrientation;
 }
 class Toolbar extends ToolbarBase<Properties> {
   _layoutStrategy!: MultiLineStrategy | SingleLineStrategy;
 
+  _kbn!: ToolbarKBN;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       menuItemTemplate: 'menuItem',
       overflowMenuVisible: false,
       multiline: false,
+      orientation: 'horizontal',
     };
   }
 
@@ -49,12 +57,24 @@ class Toolbar extends ToolbarBase<Properties> {
     this._updateFocusableItemsTabIndex();
 
     this._layoutStrategy._initMarkup();
+
+    // KBN: initialise after layout strategy so the overflow button is rendered.
+    if (!this._kbn) {
+      this._kbn = new ToolbarKBN(this);
+    }
+    this._kbn.attach();
   }
 
   _renderToolbar(): void {
     super._renderToolbar();
 
     this._renderLayoutStrategy();
+    this._renderOrientation();
+  }
+
+  _renderOrientation(): void {
+    const orientation = ((this.option as unknown as (key: string) => unknown)('orientation') as ToolbarOrientation | undefined) ?? 'horizontal';
+    this.$element().attr('aria-orientation', orientation);
   }
 
   _itemContainer(): dxElementWrapper {
@@ -88,6 +108,9 @@ class Toolbar extends ToolbarBase<Properties> {
     super._postProcessRenderItems();
 
     this._layoutStrategy._renderMenuItems();
+
+    // KBN: refresh after all items (including overflow button) are finalised.
+    this._kbn?.refresh();
   }
 
   _renderItem(
@@ -149,6 +172,8 @@ class Toolbar extends ToolbarBase<Properties> {
     // @ts-expect-error ts-error
     if (property === 'disabled' || property === 'options.disabled') {
       toggleItemFocusableElementTabIndex(this, item);
+      // KBN: re-apply roving tabindex because the item set may have changed.
+      this._kbn?.refresh();
     }
 
     if (property === 'location') {
@@ -156,8 +181,21 @@ class Toolbar extends ToolbarBase<Properties> {
     }
   }
 
+  /**
+   * Overrides the default implementation to ensure the roving-tabindex model:
+   * only one item (the KBN anchor) holds tabindex=0 at any time.
+   *
+   * Strategy:
+   *   1. Call original logic (toggleItemFocusableElementTabIndex per item)
+   *      so disabled items get tabindex=-1.
+   *   2. Flatten every remaining tabindex=0 in the toolbar to -1.
+   *   3. ToolbarKBN.refresh() will set exactly the roving anchor back to 0.
+   */
   _updateFocusableItemsTabIndex(): void {
+    // Original: sets disabled items → -1, enabled items → 0.
     this._getToolbarItems().forEach((item) => toggleItemFocusableElementTabIndex(this, item));
+    // Flatten all 0s; KBN refresh() will restore the single roving anchor.
+    this.$element().find('[tabindex="0"]').attr('tabindex', -1);
   }
 
   _isMenuItem(itemData: Item): boolean {
@@ -181,16 +219,25 @@ class Toolbar extends ToolbarBase<Properties> {
       case 'multiline':
         this._invalidate();
         break;
+      case 'orientation':
+        this._renderOrientation();
+        break;
       case 'disabled':
         super._optionChanged(args);
 
         this._updateFocusableItemsTabIndex();
+        this._kbn?.refresh();
         break;
       default:
         super._optionChanged(args);
     }
   }
 
+  _dispose(): void {
+    this._kbn?.detach();
+    super._dispose();
+  }
+
   // it is not public
   updateDimensions(): void {
     this._dimensionChanged();
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index abaed02d03f2..81e81e3d74c3 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -41,22 +41,533 @@
     <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;
+}
+
+#btn-focus-after {
+  margin-top: 1rem;
+}
+
+    </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>
+        <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 id="btn-focus-after"></div>
+    </div>
+
+
         <script>
-            $(() => {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: () => { alert("clicked"); }
-                });
-            });
+
+          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 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 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: '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: 'center',
+      locateInMenu: 'never',
+      template() {
+        return $("<div class='toolbar-label'><b><a href='#'>Tom's</a> <a href='#'>Club</a></b> Products</div>");
+      },
+  },
+  {
+    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');
+      },
+    },
+  },
+  {
+    locateInMenu: 'always',
+    template() {
+      return $("<div class='toolbar-label'><b><a href='#'>Tom's</a> <a href='#'>Club</a></b> Products</div>");
+    },
+  },
+   {
+    locateInMenu: 'always',
+    location: 'before',
+    widget: 'dxSelectBox',
+    options: {
+      placeholder: 'Font',
+      displayExpr: 'text',
+      dataSource: fontFamilies,
+      inputAttr: { 'aria-label': 'Font' },
+      onItemClick() {
+        onFontFamilyClick();
+      },
+    },
+  },
+    {
+    location: 'always',
+    widget: 'dxButtonGroup',
+    options: {
+      displayExpr: 'text',
+      items: fontStyles,
+      keyExpr: 'icon',
+      stylingMode: 'outlined',
+      selectionMode: 'multiple',
+      onItemClick(e) {
+        onButtonClick(e.itemData.hint);
+      },
+    },
+  },
+];
+
+$(() => {
+  $('#resizable-container').dxResizable({
+    minWidth: 500,
+    minHeight: 150,
+    maxHeight: 370,
+    handles: 'right',
+    area: '.widget-container',
+  });
+
+  const toolbar = $('#toolbar').dxToolbar({
+    dataSource: toolbarItems,
+    // multiline: true,
+  }).dxToolbar('instance');
+
+  $('#btn-focus-after').dxButton({
+    text: 'Focusable element after toolbar',
+    onClick() {
+      DevExpress.ui.notify('The button has been clicked');
+    },
+  });
+});
+
         </script>
     </div>
 </body>