') },
+ { locateInMenu: 'never', widget: 'dxButton', options: { text: 'A' } },
+ { locateInMenu: 'never', widget: 'dxButton', options: { text: 'B' } },
+ ],
+ }).dxToolbar('instance');
+
+ const $available = toolbar._getAvailableItems();
+ const $itemA = $available.eq(0);
+ const $itemB = $available.eq(1);
+
+ this.$element.trigger($.Event('focusin', { target: getItemFocusTarget($itemB).get(0) }));
+ this.clock.tick(0);
+
+ dispatchKeydown(getItemFocusTarget($itemB).get(0), 'Home');
+ this.clock.tick(0);
+
+ const { focusedElement } = toolbar.option();
+ assert.strictEqual($(focusedElement).get(0), $itemA.get(0),
+ 'Home landed on first focusable item, ignoring leading separator');
+ });
+
+ QUnit.test('End ignores non-focusable item at the end', function(assert) {
+ const toolbar = this.$element.dxToolbar({
+ items: [
+ { locateInMenu: 'never', widget: 'dxButton', options: { text: 'A' } },
+ { locateInMenu: 'never', widget: 'dxButton', options: { text: 'B' } },
+ { locateInMenu: 'never', template: () => $('
').text('Label') },
+ ],
+ }).dxToolbar('instance');
+
+ const $available = toolbar._getAvailableItems();
+ const $itemA = $available.eq(0);
+ const $itemB = $available.eq(1);
+
+ this.$element.trigger($.Event('focusin', { target: getItemFocusTarget($itemA).get(0) }));
+ this.clock.tick(0);
+
+ dispatchKeydown(getItemFocusTarget($itemA).get(0), 'End');
+ this.clock.tick(0);
+
+ const { focusedElement } = toolbar.option();
+ assert.strictEqual($(focusedElement).get(0), $itemB.get(0),
+ 'End landed on last focusable item, ignoring trailing label');
+ });
+
+ QUnit.test('non-focusable item does not receive tabindex=0 on init', function(assert) {
+ this.$element.dxToolbar({
+ items: [
+ { locateInMenu: 'never', widget: 'dxButton', options: { text: 'A' } },
+ { locateInMenu: 'never', template: () => $('') },
+ { locateInMenu: 'never', template: () => $('').text('Label') },
+ { locateInMenu: 'never', widget: 'dxButton', options: { text: 'B' } },
+ ],
+ });
+
+ const $allItems = this.$element.find(`.${TOOLBAR_ITEM_CLASS}`);
+ const $separatorItem = $allItems.eq(1);
+ const $labelItem = $allItems.eq(2);
+
+ assert.strictEqual($separatorItem.find('[tabindex="0"]').length, 0,
+ 'separator item has no element with tabindex=0');
+ assert.strictEqual($separatorItem.attr('tabindex'), undefined,
+ 'separator item container has no tabindex attribute');
+ assert.strictEqual($labelItem.find('[tabindex="0"]').length, 0,
+ 'label item has no element with tabindex=0');
+ assert.strictEqual($labelItem.attr('tabindex'), undefined,
+ 'label item container has no tabindex attribute');
+ });
+});
+
+QUnit.module('Enter/Exit: dxMenu (APG Menu Button)', moduleConfig, function() {
+ const menuItems = [
+ { text: 'File', items: [{ text: 'New' }, { text: 'Open' }] },
+ { text: 'Edit', items: [{ text: 'Cut' }, { text: 'Copy' }] },
+ ];
+
+ function createMenuToolbar($el) {
+ return $el.dxToolbar({
+ items: [
+ { widget: 'dxButton', options: { text: 'Prev' } },
+ { widget: 'dxMenu', options: { items: menuItems } },
+ { widget: 'dxButton', options: { text: 'Next' } },
+ ],
+ }).dxToolbar('instance');
+ }
+
+ QUnit.test('dxMenu is a single toolbar stop — ArrowRight skips past it', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(0).get(0));
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.strictEqual($(toolbar.option('focusedElement')).get(0), $items.eq(1).get(0),
+ 'ArrowRight from button lands on dxMenu item');
+
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.strictEqual($(toolbar.option('focusedElement')).get(0), $items.eq(2).get(0),
+ 'second ArrowRight skips past dxMenu to Next button');
+ });
+
+ QUnit.test('dxMenu root does NOT get dx-state-focused on toolbar navigation', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ toolbar._focusItemWidget($items.eq(1));
+ this.clock.tick(0);
+
+ assert.strictEqual($items.eq(1).find('.dx-menu').first().hasClass('dx-state-focused'), false,
+ '.dx-menu root does NOT have dx-state-focused during toolbar navigation (before Enter)');
+ });
+
+ QUnit.test('Enter activates menu — focus moves inside .dx-menu', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ assert.ok(
+ $items.eq(1).get(0).contains(getActiveElement()),
+ 'focus is inside the dxMenu toolbar item',
+ );
+ });
+
+ QUnit.test('first menu-item gets dx-state-focused after Enter', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ const $firstMenuItem = $items.eq(1).find('.dx-menu-item').first();
+ assert.ok($firstMenuItem.hasClass('dx-state-focused'),
+ 'first .dx-menu-item has dx-state-focused after Enter');
+ });
+
+ QUnit.test('ArrowRight inside menu navigates to next root item (not toolbar)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.strictEqual($(toolbar.option('focusedElement')).get(0), $items.eq(1).get(0),
+ 'toolbar focusedElement stays on dxMenu item');
+
+ const $menu = $items.eq(1).find('.dx-menu');
+ const menuInstance = $menu.dxMenu('instance');
+ const $menuItems = $menu.find('.dx-menu-item');
+
+ assert.strictEqual($(menuInstance.option('focusedElement')).get(0), $menuItems.eq(1).get(0),
+ 'menu focusedElement moved to second root item');
+ });
+
+ QUnit.test('ArrowLeft inside menu navigates to previous root item (not toolbar)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowRight');
+ this.clock.tick(0);
+
+ dispatchKeydown(getActiveElement(), 'ArrowLeft');
+ this.clock.tick(0);
+
+ const $menu = $items.eq(1).find('.dx-menu');
+ const menuInstance = $menu.dxMenu('instance');
+ const $menuItems = $menu.find('.dx-menu-item');
+
+ assert.strictEqual($(menuInstance.option('focusedElement')).get(0), $menuItems.eq(0).get(0),
+ 'menu focusedElement moved back to first root item');
+ });
+
+ QUnit.test('Escape exits menu — focus returns to .dx-toolbar-item (nav level)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ assert.strictEqual(getActiveElement(), $items.eq(1).get(0),
+ 'focus returned to .dx-toolbar-item after Escape (nav-level focus target)');
+ const $menuRoot = $items.eq(1).find('.dx-menu').first();
+ assert.strictEqual($menuRoot.hasClass('dx-state-focused'), false,
+ '.dx-menu root does NOT have dx-state-focused after Escape (back to toolbar nav level)');
+ });
+
+ QUnit.test('menu-item dx-state-focused removed after Escape', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ const $firstMenuItem = $items.eq(1).find('.dx-menu-item').first();
+ assert.ok($firstMenuItem.hasClass('dx-state-focused'),
+ 'menu-item has dx-state-focused while inside menu');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ assert.notOk($firstMenuItem.hasClass('dx-state-focused'),
+ 'menu-item lost dx-state-focused after Escape');
+ });
+
+ QUnit.test('after Escape, ArrowRight navigates toolbar to next item', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.strictEqual($(toolbar.option('focusedElement')).get(0), $items.eq(2).get(0),
+ 'ArrowRight navigates toolbar after Escape from menu');
+ });
+
+ QUnit.test('ArrowDown on root menu item opens submenu', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(300);
+
+ const $expanded = $items.eq(1).find('.dx-menu-item-expanded');
+ assert.ok($expanded.length > 0, 'submenu opened — menu item has expanded class');
+ });
+
+ QUnit.test('tabindex invariant after enter/exit cycle', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ const $tabZero = this.$element.find('[tabindex="0"]');
+ assert.strictEqual($tabZero.length, 1,
+ 'exactly one tabindex=0 after enter/exit/navigate cycle');
+ });
+
+ QUnit.test('tabindex=0 is on .dx-toolbar-item wrapper, not on .dx-menu root', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(0).get(0));
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.strictEqual($items.eq(1).attr('tabindex'), '0',
+ '.dx-toolbar-item is the Tab stop (tabindex=0)');
+ assert.strictEqual($items.eq(1).find('.dx-menu').first().attr('tabindex'), '-1',
+ '.dx-menu root is NOT a Tab stop (tabindex=-1, programmatic focus only)');
+ });
+
+ QUnit.test('dxMenu does not get dx-state-focused on toolbar navigation (before Enter)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ toolbar._focusItemWidget($items.eq(1));
+ this.clock.tick(0);
+
+ const $menuRoot = $items.eq(1).find('.dx-menu').first();
+ assert.strictEqual($menuRoot.hasClass('dx-state-focused'), false,
+ '.dx-menu root does not have dx-state-focused during toolbar navigation');
+
+ const $menuItems = $menuRoot.find('.dx-menu-item');
+ const anyMenuItemFocused = $menuItems.toArray().some(
+ (el) => $(el).hasClass('dx-state-focused')
+ );
+ assert.strictEqual(anyMenuItemFocused, false,
+ 'no .dx-menu-item is activated/highlighted during toolbar navigation (silent like texteditor)');
+
+ const menuInstance = $menuRoot.dxMenu('instance');
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ 'menu internal focusedElement is null (not auto-activated)');
+ });
+
+ QUnit.test('Non-activation keys at toolbar nav level do not activate dxMenu', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ toolbar._focusItemWidget($items.eq(1));
+ this.clock.tick(0);
+
+ const $menuRoot = $items.eq(1).find('.dx-menu').first();
+ const menuInstance = $menuRoot.dxMenu('instance');
+
+ ['a', 'F1', 'PageDown', 'PageUp', 'Tab'].forEach(function(key) {
+ dispatchKeydown($menuRoot.get(0), key);
+ this.clock.tick(0);
+
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ `dxMenu focusedElement is still null after "${key}" at nav level`);
+ assert.strictEqual($menuRoot.find('.dx-state-focused').length, 0,
+ `no .dx-menu-item is highlighted after "${key}" at nav level`);
+ }, this);
+ });
+
+ QUnit.test('Tab landing on .dx-toolbar-item does not auto-activate dxMenu', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(0).get(0));
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ $items.eq(1).get(0).focus();
+ this.clock.tick(0);
+
+ const $menuRoot = $items.eq(1).find('.dx-menu').first();
+ const menuInstance = $menuRoot.dxMenu('instance');
+
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ 'menu does not auto-activate when Tab lands on .dx-toolbar-item');
+ assert.strictEqual($menuRoot.hasClass('dx-state-focused'), false,
+ '.dx-menu root does not have dx-state-focused');
+ });
+
+ QUnit.test('Escape with open submenu closes submenu first; second Escape exits to toolbar nav', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(300);
+
+ const $expanded = $items.eq(1).find('.dx-menu-item-expanded');
+ assert.ok($expanded.length > 0, 'submenu is open after ArrowDown');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ const $menuRoot = $items.eq(1).find('.dx-menu').first();
+ const menuInstance = $menuRoot.dxMenu('instance');
+
+ assert.ok($items.eq(1).get(0).contains(getActiveElement()),
+ 'focus is still inside dxMenu toolbar item after first Escape');
+ assert.strictEqual($items.eq(1).find('.dx-menu-item-expanded').length, 0,
+ 'submenu is closed after first Escape');
+ assert.notStrictEqual(menuInstance.option('focusedElement'), null,
+ 'menu is still active (focusedElement set) after first Escape');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ assert.strictEqual(getActiveElement(), $items.eq(1).get(0),
+ 'focus returned to .dx-toolbar-item after second Escape (nav-level focus target)');
+ assert.strictEqual($menuRoot.find('.dx-state-focused').length, 0,
+ 'no menu-item is visually focused after exiting to nav level');
+ assert.strictEqual($menuRoot.hasClass('dx-state-focused'), false,
+ '.dx-menu root does not have dx-state-focused at nav level');
+ });
+
+ QUnit.test('ArrowDown at nav level does NOT activate dxMenu (menu is already visible)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'ArrowDown');
+ this.clock.tick(50);
+
+ const $menu = $items.eq(1).find('.dx-menu').first();
+ const menuInstance = $menu.dxMenu('instance');
+
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ 'dxMenu is NOT activated by ArrowDown — focusedElement stays null');
+ assert.strictEqual($menu.find('.dx-state-focused').length, 0,
+ 'no .dx-menu-item is highlighted after ArrowDown at nav level');
+ });
+
+ QUnit.test('ArrowUp at nav level does NOT activate dxMenu', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'ArrowUp');
+ this.clock.tick(50);
+
+ const $menu = $items.eq(1).find('.dx-menu').first();
+ const menuInstance = $menu.dxMenu('instance');
+
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ 'dxMenu is NOT activated by ArrowUp — focusedElement stays null');
+ assert.strictEqual($menu.find('.dx-state-focused').length, 0,
+ 'no .dx-menu-item is highlighted after ArrowUp at nav level');
+ });
+
+ QUnit.test('Re-activating dxMenu restores previously focused item (menu remembers position)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowRight');
+ this.clock.tick(50);
+
+ const $menu = $items.eq(1).find('.dx-menu').first();
+ const $menuItems = $menu.find('.dx-menu-item');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ assert.ok($menuItems.eq(1).hasClass('dx-state-focused'),
+ 'second menu-item (the last focused one) is restored on re-activation');
+ assert.notOk($menuItems.eq(0).hasClass('dx-state-focused'),
+ 'first menu-item is NOT focused (would be a regression to old behavior)');
+ });
+
+ QUnit.test('ArrowDown after opening submenu navigates within submenu (does not re-activate root)', function(assert) {
+ const toolbar = createMenuToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(1).get(0));
+ dispatchKeydown(this.$element.get(0), 'Enter');
+ this.clock.tick(50);
+
+ const $menu = $items.eq(1).find('.dx-menu').first();
+
+ dispatchKeydown(getActiveElement(), 'ArrowRight');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(300);
+
+ const $expandedBefore = $menu.find('.dx-menu-item-expanded');
+ assert.strictEqual($expandedBefore.length, 1, 'submenu open on the second root item');
+ const expandedElement = $expandedBefore.get(0);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(50);
+
+ const $expandedAfter = $menu.find('.dx-menu-item-expanded');
+ assert.strictEqual($expandedAfter.length, 1, 'submenu still open after second ArrowDown');
+ assert.strictEqual($expandedAfter.get(0), expandedElement,
+ 'submenu is still on the second root item (not jumped to the first)');
+ });
+});
+
+QUnit.module('Enter/Exit: dxMenu inside overflow list', moduleConfig, function() {
+ const menuItems = [
+ { text: 'File', items: [{ text: 'New' }, { text: 'Open' }] },
+ { text: 'Edit', items: [{ text: 'Cut' }, { text: 'Copy' }] },
+ ];
+
+ function setupOverflowWithMenu($el, clock) {
+ const toolbar = $el.dxToolbar({
+ items: [
+ { widget: 'dxButton', locateInMenu: 'never', options: { text: 'Visible' } },
+ { locateInMenu: 'always', widget: 'dxMenu', options: { items: menuItems } },
+ { widget: 'dxButton', locateInMenu: 'always', options: { text: 'After' } },
+ ],
+ }).dxToolbar('instance');
+
+ const $overflowBtn = $el.find(`.${DROP_DOWN_MENU_BUTTON_CLASS}`);
+ $overflowBtn.get(0).focus();
+ clock.tick(0);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ clock.tick(0);
+
+ const menu = toolbar._layoutStrategy._menu;
+ const list = menu._list;
+ const $menuListItem = list._getAvailableItems()
+ .toArray()
+ .map((el) => $(el))
+ .find(($i) => $i.find('.dx-menu').length > 0);
+
+ const $menuRoot = $menuListItem.find('.dx-menu').first();
+ const menuInstance = $menuRoot.dxMenu('instance');
+
+ return { list, $menuListItem, $menuRoot, menuInstance };
+ }
+
+ QUnit.test('Enter activates dxMenu — focus moves into .dx-menu, first item highlighted', function(assert) {
+ const { $menuListItem, $menuRoot, menuInstance } = setupOverflowWithMenu(this.$element, this.clock);
+
+ dispatchKeydown(getActiveElement(), 'Enter');
+ this.clock.tick(50);
+
+ assert.ok($menuListItem.get(0).contains(getActiveElement()),
+ 'focus is inside the list item that hosts dxMenu');
+ const $firstMenuItem = $menuRoot.find('.dx-menu-item').first();
+ assert.ok($firstMenuItem.hasClass('dx-state-focused'),
+ 'first .dx-menu-item has dx-state-focused after Enter');
+ assert.strictEqual($(menuInstance.option('focusedElement')).get(0), $firstMenuItem.get(0),
+ 'dxMenu focusedElement is on the first item');
+ });
+
+ QUnit.test('ArrowDown at list nav level navigates list — does NOT activate dxMenu', function(assert) {
+ const { list, $menuListItem, menuInstance } = setupOverflowWithMenu(this.$element, this.clock);
+
+ assert.strictEqual(getActiveElement(), $menuListItem.get(0),
+ 'DOM focus is on the list item wrapper before ArrowDown');
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(0);
+
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ 'dxMenu is NOT activated by ArrowDown — focusedElement stays null');
+ assert.notStrictEqual($(list.option('focusedElement')).get(0), $menuListItem.get(0),
+ 'list moved focus to the next list item');
+ });
+
+ QUnit.test('ArrowUp at list nav level navigates list — does NOT activate dxMenu', function(assert) {
+ const { list, $menuListItem, menuInstance } = setupOverflowWithMenu(this.$element, this.clock);
+
+ assert.strictEqual(getActiveElement(), $menuListItem.get(0),
+ 'DOM focus is on the list item wrapper before ArrowUp');
+
+ dispatchKeydown(getActiveElement(), 'ArrowUp');
+ this.clock.tick(0);
+
+ assert.strictEqual(menuInstance.option('focusedElement'), null,
+ 'dxMenu is NOT activated by ArrowUp — focusedElement stays null');
+ assert.notStrictEqual($(list.option('focusedElement')).get(0), $menuListItem.get(0),
+ 'list moved focus on ArrowUp');
+ });
+
+ QUnit.test('Tab from TextBox input closes overflow menu and keeps native tab navigation', function(assert) {
+ const toolbar = this.$element.dxToolbar({
+ items: [
+ { widget: 'dxButton', locateInMenu: 'never', options: { text: 'Visible' } },
+ { widget: 'dxTextBox', locateInMenu: 'always', options: { value: 'Text' } },
+ { widget: 'dxButton', locateInMenu: 'always', options: { text: 'After' } },
+ ],
+ }).dxToolbar('instance');
+
+ const $overflowBtn = this.$element.find(`.${DROP_DOWN_MENU_BUTTON_CLASS}`);
+ $overflowBtn.get(0).focus();
+ this.clock.tick(0);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(0);
+
+ const menu = toolbar._layoutStrategy._menu;
+ const $input = menu._list.$element().find('.dx-texteditor-input').first();
+ $input.get(0).focus();
+ this.clock.tick(0);
+
+ const event = new KeyboardEvent('keydown', {
+ key: 'Tab',
+ bubbles: true,
+ cancelable: true,
+ });
+ $input.get(0).dispatchEvent(event);
+ this.clock.tick(0);
+
+ assert.strictEqual(event.defaultPrevented, false,
+ 'Tab default action is not prevented');
+ assert.strictEqual(menu.option('opened'), false,
+ 'overflow menu is closed by Tab from TextBox input');
+ });
+
+ QUnit.test('ArrowRight inside menu navigates between root items (not list)', function(assert) {
+ const { list, $menuListItem, $menuRoot, menuInstance } = setupOverflowWithMenu(this.$element, this.clock);
+
+ dispatchKeydown(getActiveElement(), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowRight');
+ this.clock.tick(0);
+
+ const $menuItems = $menuRoot.find('.dx-menu-item');
+ assert.strictEqual($(menuInstance.option('focusedElement')).get(0), $menuItems.eq(1).get(0),
+ 'menu focusedElement moved to second root item');
+ assert.strictEqual($(list.option('focusedElement')).get(0), $menuListItem.get(0),
+ 'list focus stays on the dxMenu list item');
+ });
+
+ QUnit.test('Escape exits dxMenu — focus returns to list-item wrapper (nav level)', function(assert) {
+ const { $menuListItem, $menuRoot } = setupOverflowWithMenu(this.$element, this.clock);
+
+ dispatchKeydown(getActiveElement(), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ assert.strictEqual(getActiveElement(), $menuListItem.get(0),
+ 'focus returned to the list-item wrapper after Escape');
+ assert.strictEqual($menuRoot.find('.dx-state-focused').length, 0,
+ 'no menu-item is visually focused after exiting to list nav level');
+ });
+
+ QUnit.test('Escape with open submenu closes submenu first; second Escape exits to list nav', function(assert) {
+ const { $menuListItem, $menuRoot } = setupOverflowWithMenu(this.$element, this.clock);
+
+ dispatchKeydown(getActiveElement(), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowDown');
+ this.clock.tick(300);
+
+ assert.ok($menuRoot.find('.dx-menu-item-expanded').length > 0,
+ 'submenu is open after ArrowDown');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ assert.strictEqual($menuRoot.find('.dx-menu-item-expanded').length, 0,
+ 'submenu is closed after first Escape');
+ assert.ok($menuListItem.get(0).contains(getActiveElement()),
+ 'focus is still inside dxMenu list item after first Escape');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ assert.strictEqual(getActiveElement(), $menuListItem.get(0),
+ 'focus returned to list-item wrapper after second Escape');
+ assert.strictEqual($menuRoot.find('.dx-state-focused').length, 0,
+ 'no menu-item is visually focused after exit');
+ });
+
+ QUnit.test('Re-activating dxMenu restores previously focused item', function(assert) {
+ const { $menuRoot } = setupOverflowWithMenu(this.$element, this.clock);
+
+ dispatchKeydown(getActiveElement(), 'Enter');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'ArrowRight');
+ this.clock.tick(50);
+
+ const $menuItems = $menuRoot.find('.dx-menu-item');
+
+ dispatchKeydown(getActiveElement(), 'Escape');
+ this.clock.tick(50);
+
+ dispatchKeydown(getActiveElement(), 'Enter');
+ this.clock.tick(50);
+
+ assert.ok($menuItems.eq(1).hasClass('dx-state-focused'),
+ 'second menu-item (the last focused one) is restored on re-activation');
+ assert.notOk($menuItems.eq(0).hasClass('dx-state-focused'),
+ 'first menu-item is NOT focused (would be a regression)');
+ });
+
+ QUnit.test('tabindex=0 is on the list-item wrapper, not on .dx-menu root', function(assert) {
+ const { $menuListItem, $menuRoot } = setupOverflowWithMenu(this.$element, this.clock);
+
+ assert.strictEqual($menuListItem.attr('tabindex'), '0',
+ 'list-item is the Tab stop (tabindex=0)');
+ assert.strictEqual($menuRoot.attr('tabindex'), '-1',
+ '.dx-menu root is NOT a Tab stop (tabindex=-1)');
+ });
+});
+
+QUnit.module('Overflow menu: visual focus states', moduleConfig, function() {
+ function makeOverflowToolbar($el) {
+ return $el.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' } },
+ ],
+ }).dxToolbar('instance');
+ }
+
+ const getOverflowBtn = ($el) => $el.find(`.${DROP_DOWN_MENU_BUTTON_CLASS}`);
+
+ QUnit.test('overflow button is focused when navigated to via keyboard', function(assert) {
+ const toolbar = makeOverflowToolbar(this.$element);
+ const $overflowBtn = getOverflowBtn(this.$element);
+
+ toolbar.option('focusedElement', $overflowBtn.get(0));
+ toolbar._focusItemWidget($overflowBtn);
+ this.clock.tick(0);
+
+ assert.strictEqual(getActiveElement(), $overflowBtn.get(0),
+ 'overflow button is the active element');
+ });
+
+ QUnit.test('overflow button retains focus after Escape closes popup', function(assert) {
+ const toolbar = makeOverflowToolbar(this.$element);
+ const $overflowBtn = getOverflowBtn(this.$element);
+ const menu = toolbar._layoutStrategy._menu;
+
+ toolbar.option('focusedElement', $overflowBtn.get(0));
+ toolbar._focusItemWidget($overflowBtn);
+ this.clock.tick(0);
+
+ menu.openWithFocus('first');
+ this.clock.tick(0);
+
+ const list = menu._list;
+ const $firstItem = list._getAvailableItems().first();
+ const $focusTarget = getItemFocusTarget($firstItem);
+ dispatchKeydown($focusTarget.get(0), 'Escape');
+ this.clock.tick(0);
+
+ assert.notOk(menu.option('opened'), 'popup closed after Escape');
+ assert.strictEqual(getActiveElement(), $overflowBtn.get(0),
+ 'overflow button retains focus after popup closes');
+ });
+
+ QUnit.test('ArrowRight from visible button navigates focus to overflow button', function(assert) {
+ const toolbar = makeOverflowToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+ const $overflowBtn = getOverflowBtn(this.$element);
+
+ toolbar.option('focusedElement', $items.eq(0).get(0));
+ toolbar._focusItemWidget($items.eq(0));
+ this.clock.tick(0);
+
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.strictEqual($(toolbar.option('focusedElement')).get(0), $overflowBtn.get(0),
+ 'focusedElement is the overflow button');
+ assert.strictEqual(getActiveElement(), $overflowBtn.get(0),
+ 'overflow button is focused after navigation');
+ });
+
+ QUnit.test('previous button loses dx-state-focused when focus moves to overflow button', function(assert) {
+ const toolbar = makeOverflowToolbar(this.$element);
+ const $items = toolbar._getAvailableItems();
+
+ toolbar.option('focusedElement', $items.eq(0).get(0));
+ toolbar._focusItemWidget($items.eq(0));
+ this.clock.tick(0);
+
+ const $button = $items.eq(0).find('.dx-button');
+ assert.ok($button.hasClass('dx-state-focused'),
+ 'visible button has dx-state-focused before navigation');
+
+ dispatchKeydown(this.$element.get(0), 'ArrowRight');
+ this.clock.tick(0);
+
+ assert.notOk($button.hasClass('dx-state-focused'),
+ 'visible button lost dx-state-focused after focus moved');
+ });
+
+ QUnit.test('overflow list does not set aria-activedescendant on its container when item is focused', function(assert) {
+ const toolbar = makeOverflowToolbar(this.$element);
+ const menu = toolbar._layoutStrategy._menu;
+
+ menu.openWithFocus('first');
+ this.clock.tick(0);
+
+ const list = menu._list;
+ const $listEl = list.$element();
+
+ assert.strictEqual($listEl.attr('aria-activedescendant'), undefined,
+ 'list container has no aria-activedescendant (roving tabindex owns focus)');
+ });
+
+ QUnit.test('overflow list items do not receive a synthetic id attribute when focused', function(assert) {
+ const toolbar = makeOverflowToolbar(this.$element);
+ const menu = toolbar._layoutStrategy._menu;
+
+ menu.openWithFocus('first');
+ this.clock.tick(0);
+
+ const list = menu._list;
+ const $items = list._getAvailableItems();
+
+ $items.each(function() {
+ assert.strictEqual($(this).attr('id'), undefined,
+ 'list item has no synthetic id (roving tabindex owns focus)');
+ });
+ });
+});
+
+
+QUnit.module('Arrow navigation — RTL', moduleConfig, function() {
+ QUnit.test('ArrowLeft navigates to the visually-right item when rtlEnabled', function(assert) {
+ const toolbar = createToolbar(
+ [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ { rtlEnabled: true },
+ );
+ focusItemAt(toolbar, 0);
+
+ press('ArrowLeft');
+
+ assertFocusedItemAt(assert, toolbar, 1, 'ArrowLeft navigates forward in RTL');
+ });
+
+ QUnit.test('ArrowRight navigates to the visually-left item when rtlEnabled', function(assert) {
+ const toolbar = createToolbar(
+ [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ { rtlEnabled: true },
+ );
+ focusItemAt(toolbar, 2);
+
+ press('ArrowRight');
+
+ assertFocusedItemAt(assert, toolbar, 1, 'ArrowRight navigates backward in RTL');
+ });
+
+ QUnit.test('Home/End remain absolute regardless of RTL', function(assert) {
+ const toolbar = createToolbar(
+ [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ { rtlEnabled: true },
+ );
+ focusItemAt(toolbar, 1);
+
+ press('Home');
+ assertFocusedItemAt(assert, toolbar, 0, 'Home goes to first item in DOM order');
+
+ press('End');
+ assertFocusedItemAt(assert, toolbar, 2, 'End goes to last item in DOM order');
+ });
+
+ QUnit.test('RTL toggled at runtime flips the arrow semantics', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 0);
+
+ press('ArrowRight');
+ assertFocusedItemAt(assert, toolbar, 1, 'ArrowRight goes forward in LTR');
+
+ toolbar.option('rtlEnabled', true);
+ focusItemAt(toolbar, 0);
+
+ press('ArrowLeft');
+ assertFocusedItemAt(assert, toolbar, 1, 'ArrowLeft goes forward after switching to RTL');
+ });
+});
+
+QUnit.module('Arrow navigation — loopItemFocus', moduleConfig, function() {
+ QUnit.test('default loops at the right edge (ArrowRight on last → first)', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 2);
+
+ press('ArrowRight');
+
+ assertFocusedItemAt(assert, toolbar, 0, 'ArrowRight at last loops to first');
+ });
+
+ QUnit.test('default loops at the left edge (ArrowLeft on first → last)', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 0);
+
+ press('ArrowLeft');
+
+ assertFocusedItemAt(assert, toolbar, 2, 'ArrowLeft at first loops to last');
+ });
+
+ QUnit.test('loopItemFocus:false keeps focus on last item when pressing ArrowRight', function(assert) {
+ const toolbar = createToolbar(
+ [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ { loopItemFocus: false },
+ );
+ focusItemAt(toolbar, 2);
+
+ press('ArrowRight');
+
+ assertFocusedItemAt(assert, toolbar, 2, 'ArrowRight at last stays put when loopItemFocus:false');
+ });
+
+ QUnit.test('loopItemFocus:false keeps focus on first item when pressing ArrowLeft', function(assert) {
+ const toolbar = createToolbar(
+ [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ { loopItemFocus: false },
+ );
+ focusItemAt(toolbar, 0);
+
+ press('ArrowLeft');
+
+ assertFocusedItemAt(assert, toolbar, 0, 'ArrowLeft at first stays put when loopItemFocus:false');
+ });
+
+ QUnit.test('Home/End work identically regardless of loopItemFocus', function(assert) {
+ const toolbar = createToolbar(
+ [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ { loopItemFocus: false },
+ );
+ focusItemAt(toolbar, 1);
+
+ press('End');
+ assertFocusedItemAt(assert, toolbar, 2, 'End jumps to last');
+
+ press('Home');
+ assertFocusedItemAt(assert, toolbar, 0, 'Home jumps to first');
+ });
+});
+
+QUnit.module('Item-level tabIndex option', moduleConfig, function() {
+ QUnit.test('active item receives custom tabIndex from item.options.tabIndex', function(assert) {
+ const toolbar = createToolbar([
+ buttonItem('A'),
+ buttonItem('B', { options: { tabIndex: 5 } }),
+ buttonItem('C'),
+ ]);
+ focusItemAt(toolbar, 1);
+
+ const $items = toolbar._getAvailableItems();
+ assertActiveTabIndex(assert, $items.eq(1), 5,
+ 'item with options.tabIndex=5 keeps that value while active');
+ });
+
+ QUnit.test('inactive item with custom tabIndex falls back to -1', function(assert) {
+ const toolbar = createToolbar([
+ buttonItem('A'),
+ buttonItem('B', { options: { tabIndex: 5 } }),
+ buttonItem('C'),
+ ]);
+ focusItemAt(toolbar, 1);
+
+ press('ArrowRight');
+
+ const $items = toolbar._getAvailableItems();
+ assertActiveTabIndex(assert, $items.eq(1), -1,
+ 'previously active item with custom tabIndex returns to -1 when inactive');
+ assertActiveTabIndex(assert, $items.eq(2), 0,
+ 'newly active item gets default tabIndex=0');
+ });
+
+ QUnit.test('exactly one tab stop is maintained when using custom item tabIndex', function(assert) {
+ const toolbar = createToolbar([
+ buttonItem('A', { options: { tabIndex: 3 } }),
+ buttonItem('B', { options: { tabIndex: 5 } }),
+ buttonItem('C'),
+ ]);
+ focusItemAt(toolbar, 0);
+
+ const $tabStops = this.$element.find('[tabindex]:not([tabindex="-1"])').not('.dx-texteditor-input');
+ assert.strictEqual($tabStops.length, 1, 'exactly one positive-tabindex stop exists');
+ });
+});
+
+QUnit.module('Roving tabindex — incremental vs reset paths', moduleConfig, function() {
+ QUnit.test('ArrowRight uses the DOM-focused item when focusStateEnabled is false and focusedElement is stale', function(assert) {
+ const toolbar = createToolbar([buttonItem('Attach'), buttonItem('Send')], {
+ focusStateEnabled: false,
+ });
+ const $items = toolbar._getAvailableItems();
+ const $attach = $items.eq(0);
+ const $send = $items.eq(1);
+
+ focusItemAt(toolbar, 1);
+
+ findFocusTarget($send).attr('tabindex', '-1');
+ findFocusTarget($attach).attr('tabindex', '0');
+ findFocusTarget($attach).get(0).focus();
+
+ press('ArrowRight', findFocusTarget($attach).get(0));
+
+ assert.strictEqual(toolbar.option('focusedElement'), $send.get(0), 'focus moved from DOM-focused Attach to Send');
+ assert.strictEqual(getActiveElement(), findFocusTarget($send).get(0), 'Send button received DOM focus');
+ });
+
+ QUnit.test('ArrowRight uses the current roving tab stop when the keydown target is the toolbar root', function(assert) {
+ const toolbar = createToolbar([buttonItem('Attach'), buttonItem('Send')], {
+ focusStateEnabled: false,
+ });
+ const $items = toolbar._getAvailableItems();
+ const $send = $items.eq(1);
+
+ toolbar.option('focusedElement', null);
+
+ press('ArrowRight', toolbar.$element().get(0));
+
+ assert.strictEqual(toolbar.option('focusedElement'), $send.get(0), 'focus moved from current roving tab stop to Send');
+ assert.strictEqual(getActiveElement(), findFocusTarget($send).get(0), 'Send button received DOM focus');
+ });
+
+ QUnit.test('arrow navigation is incremental: unrelated items are not affected', function(assert) {
+ // Use 4 items so we can distinguish the two changed items from the untouched ones
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C'), buttonItem('D')]);
+ focusItemAt(toolbar, 1); // start on B
+
+ const $items = toolbar._getAvailableItems();
+
+ press('ArrowRight'); // only B and C should change
+
+ assert.strictEqual(parseInt(findFocusTarget($items.eq(0)).attr('tabindex'), 10), -1,
+ 'A is still -1 (was not re-scanned)');
+ assert.strictEqual(parseInt(findFocusTarget($items.eq(1)).attr('tabindex'), 10), -1,
+ 'B lost tabindex=0');
+ assert.strictEqual(parseInt(findFocusTarget($items.eq(2)).attr('tabindex'), 10), 0,
+ 'C gained tabindex=0');
+ assert.strictEqual(parseInt(findFocusTarget($items.eq(3)).attr('tabindex'), 10), -1,
+ 'D is still -1 (was not re-scanned)');
+ });
+
+ QUnit.test('item disabled option change triggers _resetRovingTabIndex (full pass)', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 0);
+
+ const resetSpy = sinon.spy(toolbar, '_resetRovingTabIndex');
+
+ const items = toolbar.option('items').slice();
+ items[1] = { ...items[1], disabled: true };
+ toolbar.option('items', items);
+ this.clock.tick(0);
+
+ assert.ok(resetSpy.called, '_resetRovingTabIndex was called after disabled change');
+
+ resetSpy.restore();
+ });
+
+ QUnit.test('items option change triggers _resetRovingTabIndex', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B')]);
+ focusItemAt(toolbar, 0);
+
+ const resetSpy = sinon.spy(toolbar, '_resetRovingTabIndex');
+
+ toolbar.option('items', [buttonItem('X'), buttonItem('Y'), buttonItem('Z')]);
+ this.clock.tick(0);
+
+ assert.ok(resetSpy.called, '_resetRovingTabIndex was called after items option change');
+
+ resetSpy.restore();
+ });
+
+ QUnit.test('after _resetRovingTabIndex, exactly one item has tabindex=0', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 1);
+
+ toolbar._resetRovingTabIndex();
+
+ assertOneTabStop(assert, this.$element,
+ 'one tab stop after explicit reset (focused item retains the stop)');
+ });
+
+ QUnit.test('ArrowRight: only the previously active and newly active items change tabindex', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 0);
+
+ const $items = toolbar._getAvailableItems();
+ const initialFirst = parseInt(findFocusTarget($items.eq(0)).attr('tabindex'), 10);
+
+ press('ArrowRight');
+
+ const afterFirst = parseInt(findFocusTarget($items.eq(0)).attr('tabindex'), 10);
+ const afterSecond = parseInt(findFocusTarget($items.eq(1)).attr('tabindex'), 10);
+ const afterThird = parseInt(findFocusTarget($items.eq(2)).attr('tabindex'), 10);
+
+ assert.strictEqual(initialFirst, 0, 'first started as the tab stop');
+ assert.strictEqual(afterFirst, -1, 'first lost the stop');
+ assert.strictEqual(afterSecond, 0, 'second became the stop');
+ assert.strictEqual(afterThird, -1, 'third remained untouched at -1');
+ });
+});
+
+QUnit.module('Focus restore on full re-render', moduleConfig, function() {
+ QUnit.test('option("items") keeps DOM focus on the same item', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ focusItemAt(toolbar, 1);
+
+ toolbar.option('items', [buttonItem('A'), buttonItem('B'), buttonItem('C')]);
+ this.clock.tick(0);
+
+ const $item1 = toolbar._getAvailableItems().eq(1);
+ assert.strictEqual(getActiveElement(), findFocusTarget($item1).get(0),
+ 'DOM focus restored to item #1 after full re-render');
+ assertOneTabStop(assert, this.$element);
+ });
+
+ QUnit.test('dataSource reload keeps DOM focus on the same item', function(assert) {
+ const toolbar = this.$element.dxToolbar({
+ dataSource: [buttonItem('A'), buttonItem('B'), buttonItem('C')],
+ }).dxToolbar('instance');
+ this.clock.tick(0);
+ focusItemAt(toolbar, 2);
+
+ toolbar.getDataSource().reload();
+ this.clock.tick(0);
+
+ const $item2 = toolbar._getAvailableItems().eq(2);
+ assert.strictEqual(getActiveElement(), findFocusTarget($item2).get(0),
+ 'DOM focus restored after dataSource reload');
+ assertOneTabStop(assert, this.$element);
+ });
+
+ QUnit.test('does not steal focus when the user is outside the toolbar', function(assert) {
+ const toolbar = createToolbar([buttonItem('A'), buttonItem('B')]);
+ const outside = $('