fix: set aria-hidden on year scroller container (#3349)

vaadin · Jan 25, 2022 · 4e7ca75 · 4e7ca75
1 parent 6956971
commit 4e7ca75
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/date-picker/src/vaadin-date-picker-overlay-content.js b/packages/date-picker/src/vaadin-date-picker-overlay-content.js
@@ -204,6 +204,7 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
           buffer-size="12"
           active="[[initialPosition]]"
           part="years"
+          aria-hidden="true"
         >
           <template>
             <div

diff --git a/packages/date-picker/test/wai-aria.test.js b/packages/date-picker/test/wai-aria.test.js
@@ -133,14 +133,18 @@ describe('WAI-ARIA', () => {
     });
 
     describe('year scroller contents', () => {
-      let yearScrollerContents;
+      let scroller, yearScrollerContents;
 
       beforeEach(async () => {
-        const scroller = overlay.$.yearScroller;
+        scroller = overlay.$.yearScroller;
         await activateScroller(scroller);
         yearScrollerContents = scroller.querySelectorAll('div > [part="year-number"]');
       });
 
+      it('should set aria-hidden on the year scroller', () => {
+        expect(scroller.getAttribute('aria-hidden')).to.equal('true');
+      });
+
       it('should contain button role for years', () => {
         // Indicate years as clickable.
         const years = Array.from(yearScrollerContents).filter((el) => /\d+/.test(el.textContent));