fix: reset tabindex to -1 when initializing menu item (#339)

vaadin · Mar 14, 2024 · 7090226 · 7090226
1 parent 91b28a6
commit 7090226
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/src/vaadin-contextmenu-items-mixin.html b/src/vaadin-contextmenu-items-mixin.html
@@ -225,6 +225,7 @@
 
         if (component instanceof Vaadin.ItemElement) {
           component.setAttribute('role', 'menuitem');
+          component.tabIndex = -1;
           component.classList.add('vaadin-menu-item');
         } else if (component.localName === 'hr') {
           component.setAttribute('role', 'separator');

diff --git a/test/items.html b/test/items.html
@@ -32,6 +32,12 @@
     describe('items', () => {
       let rootMenu, subMenu, target;
 
+      const createComponent = (text) => {
+        const item = document.createElement('vaadin-context-menu-item');
+        item.textContent = text;
+        return item;
+      };
+
       const menuComponents = (menu = rootMenu) => {
         return Array.from(menu.$.overlay.content.firstElementChild.children);
       };
@@ -84,7 +90,15 @@
                 ]},
               ]
             },
-            {text: 'foo-1'}
+            {text: 'foo-1'},
+            {
+              text: 'foo-2',
+              children: [
+                {component: createComponent('foo-2-0')},
+                {component: createComponent('foo-2-1')},
+                {component: createComponent('foo-2-2')}
+              ]
+            }
           ];
           open();
           flush(() => {
@@ -396,6 +410,34 @@
           expect(spy).to.be.calledOnce;
         });
 
+        it('should focus first item after re-opening when using components', async() => {
+          subMenu.close();
+          rootMenu.$.overlay.focus();
+
+          const rootItem = getMenuItems(rootMenu)[2];
+
+          // Open the sub-menu with item components
+          open(rootItem);
+          await nextRender();
+          const subMenu2 = getSubMenu(rootMenu);
+          const items = getMenuItems(subMenu2);
+
+          // Arrow Down to focus next item
+          items[0].focus();
+          fire(items[0], 'keydown', {}, {keyCode: 40, key: 'ArrowDown'});
+          expect(items[1].hasAttribute('focus-ring')).to.be.true;
+
+          // Arrow Left to close the sub-menu
+          fire(items[1], 'keydown', {}, {keyCode: 37, key: 'ArrowLeft'});
+          await nextRender();
+          expect(rootItem.hasAttribute('focus-ring')).to.be.true;
+
+          // Re-open sub-menu and check focus
+          open(rootItem);
+          await nextRender();
+          expect(items[0].hasAttribute('focus-ring')).to.be.true;
+        });
+
         // elementFromPoint doesn't work properly with shadydom on ios 10.3
         if (!window.ShadyDOM) {
           it('should have modeless sub menus', () => {