fix: remove tabindex from combo-box overlay (#1014)

src/vaadin-combo-box-dropdown.html

@@ -44,6 +44,9 @@
 
 <script>
   (function() {
+    let memoizedTemplate;
+
+
     /**
      * The overlay element.
      *
@@ -62,6 +65,15 @@
         return 'vaadin-combo-box-overlay';
       }
 
+      static get template() {
+        if (!memoizedTemplate) {
+          memoizedTemplate = super.template.cloneNode(true);
+          memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+        }
+
+        return memoizedTemplate;
+      }
+
       connectedCallback() {
         super.connectedCallback();
 

test/keyboard.html

@@ -170,6 +170,16 @@
 
         expect(getFocusedIndex()).to.equal(0);
       });
+
+      it('should not have a focusable overlay', () => {
+        const overlay = comboBox.$.overlay.$.dropdown.$.overlay.$.overlay;
+        expect(overlay.hasAttribute('tabindex')).to.be.false;
+      });
+
+      it('should have unfocusable items', () => {
+        const item = comboBox.$.overlay._selector.querySelector('vaadin-combo-box-item');
+        expect(item.getAttribute('tabindex')).to.equal('-1');
+      });
     });
 
     describe('selecting items', () => {

test/vaadin-combo-box-light.html

@@ -246,29 +246,6 @@
       describe('custom clear-button', () => {
         let clearButton;
 
-        /**
-         * Get the most specific element at the given viewport coordinates.
-         * Same as "document.elementFromPoint()" but recursively digging through
-         * shadow roots.
-         */
-        function elementFromPointDeep(x, y, root = document) {
-          const result = root.elementFromPoint(x, y);
-          if (!result) {
-            return null;
-          }
-          // Prevent infinite loop due to slotted elements with shadow roots
-          if (result === root.host) {
-            return result;
-          }
-          // At least Safari on iOS 9 doesn't have "elementFromPoint" on a
-          // shady root and in case of ShadyDOM we should already get the target
-          // we're looking for from the first "root.elementFromPoint"
-          if (result.shadowRoot && !(window.ShadyDOM && ShadyDOM.isShadyRoot(result.shadowRoot))) {
-            return elementFromPointDeep(x, y, result.shadowRoot);
-          }
-          return result;
-        }
-
         /**
          * Simulate a click at the position of the given element.
          * This can be used for more accurate testing of what would happen
@@ -289,7 +266,7 @@
           const y = Math.ceil(rect.top);
           // Get the element which would be targeted, when the user
           // tries to click on this position
-          let target = elementFromPointDeep(x, y, elem.ownerDocument);
+          let target = document.elementFromPoint(x, y);
           if (!target) {
             return;
           }
@@ -308,15 +285,18 @@
           comboBox.value = 'foo';
         });
 
-        it('should be clickable when overlay is open', () => {
-          const clickSpy = sinon.spy();
-          clearButton.addEventListener('click', clickSpy);
+        // elementFromPoint doesn't work properly with shadydom
+        if (!window.ShadyDOM) {
+          it('should be clickable when overlay is open', () => {
+            const clickSpy = sinon.spy();
+            clearButton.addEventListener('click', clickSpy);
 
-          comboBox.open();
-          clickAtPositionOf(clearButton);
+            comboBox.open();
+            clickAtPositionOf(clearButton);
 
-          expect(clickSpy.callCount).to.equal(1);
-        });
+            expect(clickSpy.callCount).to.equal(1);
+          });
+        }
 
         it('should fire `change` event on clear', () => {
           const changeSpy = sinon.spy();