fix: prevent year scroller from getting focused in Chrome (#8174) (CP: 24.4)

packages/date-picker/src/vaadin-infinite-scroller.js

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
-import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
@@ -54,7 +53,7 @@ template.innerHTML = `
     }
   </style>
 
-  <div id="scroller">
+  <div id="scroller" tabindex="-1">
     <div class="buffer"></div>
     <div class="buffer"></div>
     <div id="fullHeight"></div>
@@ -198,12 +197,6 @@ export class InfiniteScroller extends HTMLElement {
       this._buffers = [...this.shadowRoot.querySelectorAll('.buffer')];
 
       this.$.fullHeight.style.height = `${this._initialScroll * 2}px`;
-
-      // Firefox interprets elements with overflow:auto as focusable
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
-      if (isFirefox) {
-        this.$.scroller.tabIndex = -1;
-      }
     }
   }
 

packages/date-picker/test/dom/__snapshots__/date-picker-year-scroller.test.snap.js

@@ -0,0 +1,21 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["vaadin-date-picker-year-scroller shadow default"] = 
+`<div
+  id="scroller"
+  tabindex="-1"
+>
+  <div class="buffer">
+  </div>
+  <div class="buffer">
+  </div>
+  <div
+    id="fullHeight"
+    style="height: 1e+06px;"
+  >
+  </div>
+</div>
+`;
+/* end snapshot vaadin-date-picker-year-scroller shadow default */
+

packages/date-picker/test/dom/date-picker-year-scroller.test.js

@@ -0,0 +1,18 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import '../../src/vaadin-date-picker-year-scroller.js';
+
+describe('vaadin-date-picker-year-scroller', () => {
+  let yearScroller;
+
+  beforeEach(async () => {
+    yearScroller = fixtureSync('<vaadin-date-picker-year-scroller></vaadin-date-picker-year-scroller>');
+    await nextFrame();
+  });
+
+  describe('shadow', () => {
+    it('default', async () => {
+      await expect(yearScroller).shadowDom.to.equalSnapshot();
+    });
+  });
+});