Toolbar: support keyboard navigation according to APG W3C

e2e/testcafe-devextreme/tests/navigation/toolbar/keyboard.ts

@@ -0,0 +1,141 @@
+import { Selector, ClientFunction } from 'testcafe';
+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 isFocusInsideItem = ClientFunction((itemIndex: number) => {
+  const items = document.querySelectorAll(
+    '#toolbar .dx-toolbar-item',
+  );
+  const item = items[itemIndex];
+  return item ? item.contains(document.activeElement) : false;
+});
+
+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;
+
+toolbarWidgets.forEach(({ widget, options }) => {
+  test(`${widget}: Tab leaves and Shift+Tab returns focus`, async (t) => {
+    const externalBefore = Selector('#externalBefore');
+    const externalAfter = Selector('#externalAfter');
+
+    await t.click(externalBefore);
+    await t
+      .expect(externalBefore.focused)
+      .ok('external before button should be focused');
+
+    await t.pressKey('tab');
+    await t
+      .expect(isFocusInsideItem(0))
+      .ok('first toolbar item should be focused after Tab');
+
+    await t.pressKey('right');
+    await t
+      .expect(isFocusInsideItem(1))
+      .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(isFocusInsideItem(1))
+      .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');
+  });
+});

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';

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -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();
       },

packages/devextreme/js/__internal/ui/list/list.base.ts

@@ -69,7 +69,7 @@ import { getElementMargin } from '@ts/ui/scroll_view/utils/get_element_style';
 
 const LIST_CLASS = 'dx-list';
 const LIST_ITEMS_CLASS = 'dx-list-items';
-const LIST_ITEM_CLASS = 'dx-list-item';
+export const LIST_ITEM_CLASS = 'dx-list-item';
 const LIST_ITEM_SELECTOR = `.${LIST_ITEM_CLASS}`;
 const LIST_ITEM_ICON_CONTAINER_CLASS = 'dx-list-item-icon-container';
 const LIST_ITEM_ICON_CLASS = 'dx-list-item-icon';

packages/devextreme/js/__internal/ui/popup/m_popup.ts

@@ -683,6 +683,7 @@ class Popup<
       disabled,
       rtlEnabled,
       items,
+      focusStateEnabled: false,
       useDefaultButtons: useDefaultToolbarButtons,
       useFlatButtons: useFlatToolbarButtons,
       integrationOptions,