DevExpress · EugeniyKiyashko · May 14, 2026 · May 14, 2026 · May 15, 2026 · May 15, 2026
@@ -0,0 +1,179 @@
+import { Selector } from 'testcafe';
+import Toolbar from 'devextreme-testcafe-models/toolbar/toolbar';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { appendElementTo } from '../../../helpers/domUtils';
+
+fixture.disablePageReloads`Toolbar_keyboard_navigation`
+  .page(url(__dirname, '../../container.html'));
+
+const toolbarWidgets = [
+  {
+    widget: 'dxButton',
+    options: { text: 'Button' },
+  },
+  {
+    widget: 'dxTextBox',
+    options: { value: 'text', showClearButton: false },
+  },
+  {
+    widget: 'dxAutocomplete',
+    options: { value: 'auto', showClearButton: false },
+  },
+  {
+    widget: 'dxCheckBox',
+    options: { value: true },
+  },
+  {
+    widget: 'dxDateBox',
+    options: {
+      value: new Date(2021, 9, 17),
+      openOnFieldClick: false,
+      showClearButton: false,
+      showDropDownButton: false,
+    },
+  },
+  {
+    widget: 'dxSelectBox',
+    options: {
+      items: ['Item 1', 'Item 2'],
+      value: 'Item 1',
+      showClearButton: false,
+      showDropDownButton: false,
+    },
+  },
+  {
+    widget: 'dxMenu',
+    options: {
+      items: [{ text: 'Menu Item 1' }, { text: 'Menu Item 2' }],
+    },
+  },
+  {
+    widget: 'dxTabs',
+    options: {
+      items: [{ text: 'Tab 1' }, { text: 'Tab 2' }],
+    },
+  },
+  {
+    widget: 'dxButtonGroup',
+    options: {
+      items: [{ text: 'Left' }, { text: 'Right' }],
+    },
+  },
+  {
+    widget: 'dxDropDownButton',
+    options: {
+      text: 'Drop',
+      items: [{ text: 'Action 1' }, { text: 'Action 2' }],
+    },
+  },
+] as const;
+
+const setupOverflowMenuFixture = async (): Promise<void> => {
+  await appendElementTo('#container', 'div', 'toolbar');
+  await appendElementTo('#container', 'div', 'externalAfter');
+
+  await createWidget('dxToolbar', {
+    items: [
+      { widget: 'dxButton', locateInMenu: 'never', options: { text: 'Visible' } },
+      { widget: 'dxButton', locateInMenu: 'always', options: { text: 'Menu A' } },
+      { widget: 'dxButton', locateInMenu: 'always', options: { text: 'Menu B' } },
+    ],
+  }, '#toolbar');
+
+  await createWidget('dxButton', { text: 'External After' }, '#externalAfter');
+};
+
+test('Tab inside overflow menu closes popup and moves focus past the toolbar', async (t) => {
+  const externalAfter = Selector('#externalAfter');
+  const toolbar = new Toolbar('#toolbar');
+  const menu = toolbar.getOverflowMenu();
+
+  await t.click(menu.element);
+  await t.expect(menu.option('opened')).eql(true);
+
+  await t.pressKey('tab');
+
+  await t.expect(menu.option('opened')).eql(false);
+  await t.expect(externalAfter.focused).ok();
+}).before(setupOverflowMenuFixture);
+
+test('Outside click closes overflow menu without stealing focus to overflow button', async (t) => {
+  const externalAfter = Selector('#externalAfter');
+  const toolbar = new Toolbar('#toolbar');
+  const menu = toolbar.getOverflowMenu();
+
+  await t.click(menu.element);
+  await t.expect(menu.option('opened')).eql(true);
+
+  await t.click(externalAfter);
+
+  await t.expect(menu.option('opened')).eql(false);
+  await t.expect(externalAfter.focused).ok();
+  await t.expect(menu.isFocused).notOk();
+}).before(setupOverflowMenuFixture);
+
+toolbarWidgets.forEach(({ widget, options }) => {
+  test(`${widget}: Tab leaves and Shift+Tab returns focus`, async (t) => {
+    const externalBefore = Selector('#externalBefore');
+    const externalAfter = Selector('#externalAfter');
+    const toolbar = new Toolbar('#toolbar');
+
+    await t.click(externalBefore);
+    await t
+      .expect(externalBefore.focused)
+      .ok('external before button should be focused');
+
+    await t.pressKey('tab');
+    await t
+      .expect(toolbar.getItem(0).find(':focus').exists)
+      .ok('first toolbar item should be focused after Tab');
+
+    await t.pressKey('right');
+    await t
+      .expect(toolbar.getItem(1).find(':focus').exists)
+      .ok(`${widget} should be focused after arrow right`);
+
+    await t.pressKey('tab');
+    await t
+      .expect(externalAfter.focused)
+      .ok('external after button should be focused after Tab');
+
+    await t.pressKey('shift+tab');
+    await t
+      .expect(toolbar.getItem(1).find(':focus').exists)
+      .ok(`${widget} should be focused after Shift+Tab`);
+  }).before(async () => {
+    await appendElementTo('#container', 'div', 'externalBefore');
+    await appendElementTo('#container', 'div', 'toolbar');
+    await appendElementTo('#container', 'div', 'externalAfter');
+
+    await createWidget('dxButton', {
+      text: 'External Before',
+    }, '#externalBefore');
+
+    await createWidget('dxToolbar', {
+      items: [
+        {
+          location: 'before',
+          widget: 'dxButton',
+          options: { text: 'Prev', focusStateEnabled: true },
+        },
+        {
+          location: 'before',
+          widget,
+          options: { ...options, focusStateEnabled: true },
+        },
+        {
+          location: 'before',
+          widget: 'dxButton',
+          options: { text: 'Next', focusStateEnabled: true },
+        },
+      ],
+    }, '#toolbar');
+
+    await createWidget('dxButton', {
+      text: 'External After',
+    }, '#externalAfter');
+  });
+});
@@ -214,6 +214,7 @@ test('Toolbar buttons in menu appearance', async (t) => {
   await createWidget('dxToolbar', {
     width: 50,
     multiline: false,
+    focusStateEnabled: false,
     items,
   });
 });
@@ -260,6 +261,7 @@ test('Toolbar buttons as custom template appearance', async (t) => {
   }));
 
   await createWidget('dxToolbar', {
+    focusStateEnabled: false,
     width: 50,
     multiline: false,
     items,
@@ -311,6 +313,7 @@ test('Toolbar button group appearance', async (t) => {
   });
 
   await createWidget('dxToolbar', {
+    focusStateEnabled: false,
     width: 50,
     items,
   });
@@ -363,6 +366,7 @@ test('Toolbar button group as custom template appearance', async (t) => {
   });
 
   await createWidget('dxToolbar', {
+    focusStateEnabled: false,
     width: 50,
     items,
   });

@@ -1,4 +1,4 @@
-@use "./mixins" as *;
+@use "../mixins" as *;
 
 // adduse
 

@@ -0,0 +1,49 @@
+@mixin dx-toolbar-focus-outline(
+  $accent-color,
+  $border-radius,
+) {
+  .dx-toolbar-item.dx-state-focused {
+    [tabindex="0"]:focus-visible {
+      outline: 2px solid $accent-color;
+      outline-offset: 1px;
+      border-radius: $border-radius;
+    }
+  }
+
+  .dx-toolbar-menu-container {
+    [tabindex="0"]:focus-visible {
+      outline: 2px solid $accent-color;
+      outline-offset: 1px;
+      border-radius: $border-radius;
+    }
+  }
+
+  .dx-toolbar-item[tabindex="0"].dx-state-focused:has(.dx-menu:not(.dx-state-focused)) {
+    .dx-menu {
+      outline: 2px solid $accent-color;
+      outline-offset: 1px;
+      border-radius: $border-radius;
+    }
+  }
+
+  .dx-dropdownmenu-popup-wrapper.dx-toolbar-focus-state-enabled {
+    .dx-dropdownmenu-list {
+      .dx-list-item {
+        [tabindex="0"]:focus-visible {
+          outline: 2px solid $accent-color;
+          outline-offset: 1px;
+          border-radius: $border-radius;
+        }
+      }
+
+      .dx-list-item[tabindex="0"]:has(.dx-menu:not(.dx-state-focused)) {
+        .dx-menu {
+          outline: 2px solid $accent-color;
+          outline-offset: 1px;
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
@@ -12,6 +12,7 @@
 @use "../checkBox/sizes" as *;
 @use "mixins" as *;
 @use "../../base/toolbar";
+@use "../../base/toolbar/mixins" as *;
 
 // adduse
 @use "../dropDownMenu";
@@ -180,3 +181,5 @@
     line-height: 0;
   }
 }
+
+@include dx-toolbar-focus-outline($base-accent, $fluent-base-border-radius);
@@ -1,5 +1,6 @@
 @use "sizes" as *;
 @use "../typography/sizes" as *;
+@use "../colors" as *;
 
 @mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) {
   padding: $padding;

@@ -10,6 +10,7 @@
 @use "../button/sizes" as *;
 @use "mixins" as *;
 @use "../../base/toolbar";
+@use "../../base/toolbar/mixins" as *;
 
 // adduse
 @use "../dropDownMenu";
@@ -99,3 +100,5 @@
     }
   }
 }
+
+@include dx-toolbar-focus-outline($base-accent, $base-border-radius);
@@ -1,4 +1,5 @@
 @use "sizes" as *;
+@use "../colors" as *;
 
 @mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) {
   padding: $padding;

@@ -12,6 +12,7 @@
 @use "../checkBox/sizes" as *;
 @use "mixins" as *;
 @use "../../base/toolbar";
+@use "../../base/toolbar/mixins" as *;
 
 // adduse
 @use "../dropDownMenu";
@@ -207,3 +208,4 @@
   padding: 4px;
 }
 
+@include dx-toolbar-focus-outline($base-accent, $material-base-border-radius);
@@ -1,5 +1,6 @@
 @use "sizes" as *;
 @use "../typography/sizes" as *;
+@use "../colors" as *;
 
 @mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) {
   padding: $padding;

diff --git a/packages/devextreme/js/__internal/core/widget/widget.ts b/packages/devextreme/js/__internal/core/widget/widget.ts
@@ -29,7 +29,7 @@ import type { OptionChanged } from '@ts/core/widget/types';
 import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
 
 export const WIDGET_CLASS = 'dx-widget';
-const DISABLED_STATE_CLASS = 'dx-state-disabled';
+export const DISABLED_STATE_CLASS = 'dx-state-disabled';
 export const ACTIVE_STATE_CLASS = 'dx-state-active';
 export const FOCUSED_STATE_CLASS = 'dx-state-focused';
 export const HOVER_STATE_CLASS = 'dx-state-hover';

@@ -133,6 +133,7 @@ export class HeaderPanel extends ColumnsView {
     const options: { toolbarOptions: ToolbarProperties<DefaultToolbarItem | ToolbarItem> } = {
       toolbarOptions: {
         items: sortedToolbarItems,
+        focusStateEnabled: false,
         visible: userToolbarOptions?.visible,
         disabled: userToolbarOptions?.disabled,
         onItemRendered(e) {

@@ -171,6 +171,8 @@ export class SchedulerHeader extends Widget<HeaderOptions> {
 
     return {
       ...toolbar,
+      // @ts-expect-error ts-error
+      focusStateEnabled: false,
       items: parsedItems,
     };
   }

@@ -278,6 +278,7 @@ class ChatTextArea extends TextArea<Properties> {
 
     const toolbarOptions = {
       items: toolbarItems,
+      focusStateEnabled: false,
     };
 
     this._$toolbar = $('<div>')

diff --git a/packages/devextreme/js/__internal/ui/diagram/ui.diagram.toolbar.ts b/packages/devextreme/js/__internal/ui/diagram/ui.diagram.toolbar.ts
@@ -326,6 +326,7 @@ class DiagramToolbar extends DiagramPanel {
         this._prepareToolbarItems(afterCommands, 'after', this._executeCommand),
       );
     this._toolbarInstance = this._createComponent($toolbar, Toolbar, {
+      focusStateEnabled: false,
       dataSource,
     });
   }

@@ -158,10 +158,12 @@ class DropDownEditor<
           : this._getFirstPopupElement();
 
         if ($focusableElement) {
+          const $input = $focusableElement.hasClass('dx-texteditor') ? $focusableElement.find('.dx-texteditor-input').first() : $();
+          const $focusTarget = $input.length ? $input : $focusableElement;
           // @ts-expect-error ts-error
-          eventsEngine.trigger($focusableElement, 'focus');
+          eventsEngine.trigger($focusTarget, 'focus');
           // @ts-expect-error ts-error
-          $focusableElement.select();
+          $focusTarget.select();
         }
         e.preventDefault();
       },