@vaadin/date-picker 23.0.0-alpha4 → 23.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "23.0.0-alpha4",
+  "version": "23.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,23 +33,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "23.0.0-alpha4",
-    "@vaadin/component-base": "23.0.0-alpha4",
-    "@vaadin/field-base": "23.0.0-alpha4",
-    "@vaadin/input-container": "23.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha4",
-    "@vaadin/vaadin-overlay": "23.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha4"
+    "@vaadin/button": "23.0.0-beta3",
+    "@vaadin/component-base": "23.0.0-beta3",
+    "@vaadin/field-base": "23.0.0-beta3",
+    "@vaadin/input-container": "23.0.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta3",
+    "@vaadin/vaadin-overlay": "23.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "23.0.0-alpha4",
-    "@vaadin/polymer-legacy-adapter": "23.0.0-alpha4",
+    "@vaadin/dialog": "23.0.0-beta3",
+    "@vaadin/polymer-legacy-adapter": "23.0.0-beta3",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "81e2deee5147bb7c1f4884760f4598613306f1fb"
+  "gitHead": "4c87216666541f9eb58f56c475964727822aad53"
 }

package/src/vaadin-date-picker-light.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
@@ -98,8 +97,6 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
           </vaadin-date-picker-overlay-content>
         </template>
       </vaadin-date-picker-overlay>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"> </iron-media-query>
     `;
   }
 

package/src/vaadin-date-picker-mixin.js

@@ -6,6 +6,7 @@
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
@@ -319,11 +320,6 @@ export const DatePickerMixin = (subclass) =>
           value: document.createElement('div').style.webkitOverflowScrolling === ''
         },
 
-        /** @private */
-        _ignoreAnnounce: {
-          value: true
-        },
-
         /** @private */
         _focusOverlayOnOpen: Boolean,
 
@@ -335,8 +331,7 @@ export const DatePickerMixin = (subclass) =>
     static get observers() {
       return [
         '_selectedDateChanged(_selectedDate, i18n.formatDate)',
-        '_focusedDateChanged(_focusedDate, i18n.formatDate)',
-        '_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)'
+        '_focusedDateChanged(_focusedDate, i18n.formatDate)'
       ];
     }
 
@@ -423,6 +418,12 @@ export const DatePickerMixin = (subclass) =>
         }
       });
 
+      this.addController(
+        new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
+          this._fullscreen = matches;
+        })
+      );
+
       this.addController(new VirtualKeyboardController(this));
     }
 
@@ -582,7 +583,9 @@ export const DatePickerMixin = (subclass) =>
     _inputElementChanged(input) {
       super._inputElementChanged(input);
       if (input) {
+        input.autocomplete = 'off';
         input.setAttribute('role', 'combobox');
+        input.setAttribute('aria-haspopup', 'dialog');
         input.setAttribute('aria-expanded', !!this.opened);
         this._applyInputValue(this._selectedDate);
       }
@@ -709,7 +712,7 @@ export const DatePickerMixin = (subclass) =>
       }
 
       if (this._focusOverlayOnOpen) {
-        this._overlayContent.focus();
+        this._overlayContent.focusDateElement();
         this._focusOverlayOnOpen = false;
       } else {
         this._focus();
@@ -718,8 +721,6 @@ export const DatePickerMixin = (subclass) =>
       if (this._noInput && this.focusElement) {
         this.focusElement.blur();
       }
-
-      this._ignoreAnnounce = false;
     }
 
     // A hack needed for iOS to prevent dropdown from being clipped in an
@@ -764,8 +765,6 @@ export const DatePickerMixin = (subclass) =>
 
     /** @protected */
     _onOverlayClosed() {
-      this._ignoreAnnounce = true;
-
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
       if (this._touchPrevented) {
@@ -890,15 +889,14 @@ export const DatePickerMixin = (subclass) =>
         case 'ArrowUp':
           // prevent scrolling the page with arrows
           e.preventDefault();
-
           if (this.opened) {
-            this._overlayContent.focus();
-            this._overlayContent._onKeydown(e);
+            // The overlay can be opened with ctrl + option + shift in VoiceOver
+            // and without this logic, it won't be possible to focus the dialog opened this way.
+            this._overlayContent.focusDateElement();
           } else {
             this._focusOverlayOnOpen = true;
             this.open();
           }
-
           break;
         case 'Enter': {
           const parsedDate = this._getParsedDate();
@@ -944,8 +942,7 @@ export const DatePickerMixin = (subclass) =>
             if (e.shiftKey) {
               this._overlayContent.focusCancel();
             } else {
-              this._overlayContent.focus();
-              this._overlayContent.revealDate(this._focusedDate);
+              this._overlayContent.focusDate(this._focusedDate);
             }
           }
           break;
@@ -993,13 +990,6 @@ export const DatePickerMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _announceFocusedDate(_focusedDate, opened, _ignoreAnnounce) {
-      if (opened && !_ignoreAnnounce) {
-        this._overlayContent.announceFocusedDate();
-      }
-    }
-
     /** @private */
     get _overlayContent() {
       return this.$.overlay.content.querySelector('#overlay-content');

package/src/vaadin-date-picker-overlay-content.js

@@ -3,24 +3,24 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/button/src/vaadin-button.js';
 import './vaadin-month-calendar.js';
 import './vaadin-infinite-scroller.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateEquals, extractDateParts, getClosestDate, getISOWeekNumber } from './vaadin-date-picker-helper.js';
+import { dateEquals, extractDateParts, getClosestDate } from './vaadin-date-picker-helper.js';
 
 /**
  * @extends HTMLElement
  * @private
  */
-class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
+class DatePickerOverlayContent extends ControllerMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -150,17 +150,8 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
           z-index: 1;
           padding: 8px;
         }
-
-        #announcer {
-          display: inline-block;
-          position: fixed;
-          clip: rect(0, 0, 0, 0);
-          clip-path: inset(100%);
-        }
       </style>
 
-      <div id="announcer" role="alert" aria-live="polite">[[i18n.calendar]]</div>
-
       <div part="overlay-header" on-touchend="_preventDefault" desktop$="[[_desktopMode]]" aria-hidden="true">
         <div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
         <div part="clear-button" showclear$="[[_showClear(selectedDate)]]"></div>
@@ -190,9 +181,9 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
               show-week-numbers="[[showWeekNumbers]]"
               min-date="[[minDate]]"
               max-date="[[maxDate]]"
-              focused$="[[_focused]]"
               part="month"
               theme$="[[theme]]"
+              on-keydown="__onMonthCalendarKeyDown"
             >
             </vaadin-month-calendar>
           </template>
@@ -204,11 +195,11 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
           buffer-size="12"
           active="[[initialPosition]]"
           part="years"
+          aria-hidden="true"
         >
           <template>
             <div
               part="year-number"
-              role="button"
               current$="[[_isCurrentYear(index)]]"
               selected$="[[_isSelectedYear(index, selectedDate)]]"
             >
@@ -225,12 +216,14 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
           part="today-button"
           theme="tertiary"
           disabled="[[!_isTodayAllowed(minDate, maxDate)]]"
+          on-keydown="__onTodayButtonKeyDown"
         >
           [[i18n.today]]
         </vaadin-button>
-        <vaadin-button id="cancelButton" part="cancel-button" theme="tertiary"> [[i18n.cancel]] </vaadin-button>
+        <vaadin-button id="cancelButton" part="cancel-button" theme="tertiary" on-keydown="__onCancelButtonKeyDown">
+          [[i18n.cancel]]
+        </vaadin-button>
       </div>
-      <iron-media-query query="(min-width: 375px)" query-matches="{{_desktopMode}}"></iron-media-query>
     `;
   }
 
@@ -275,6 +268,11 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
 
       _desktopMode: Boolean,
 
+      _desktopMediaQuery: {
+        type: String,
+        value: '(min-width: 375px)'
+      },
+
       _translateX: {
         observer: '_translateXChanged'
       },
@@ -305,8 +303,6 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
        */
       maxDate: Date,
 
-      _focused: Boolean,
-
       /**
        * Input label
        */
@@ -318,13 +314,15 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
     return this.getAttribute('dir') === 'rtl';
   }
 
+  get focusableDateElement() {
+    return [...this.shadowRoot.querySelectorAll('vaadin-month-calendar')]
+      .map((calendar) => calendar.focusableDateElement)
+      .find(Boolean);
+  }
+
   ready() {
     super.ready();
-    this.setAttribute('tabindex', 0);
-    this.addEventListener('keydown', this._onKeydown.bind(this));
     addListener(this, 'tap', this._stopPropagation);
-    this.addEventListener('focus', this._onOverlayFocus.bind(this));
-    this.addEventListener('blur', this._onOverlayBlur.bind(this));
     addListener(this.$.scrollers, 'track', this._track.bind(this));
     addListener(this.shadowRoot.querySelector('[part="clear-button"]'), 'tap', this._clear.bind(this));
     addListener(this.shadowRoot.querySelector('[part="today-button"]'), 'tap', this._onTodayTap.bind(this));
@@ -336,6 +334,12 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
       'tap',
       this._toggleYearScroller.bind(this)
     );
+
+    this.addController(
+      new MediaQueryController(this._desktopMediaQuery, (matches) => {
+        this._desktopMode = matches;
+      })
+    );
   }
 
   /**
@@ -352,25 +356,6 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
     setTouchAction(this.$.scrollers, 'pan-y');
   }
 
-  announceFocusedDate() {
-    const focusedDate = this._currentlyFocusedDate();
-    let messages = [];
-    if (dateEquals(focusedDate, new Date())) {
-      messages.push(this.i18n.today);
-    }
-    messages = messages.concat([
-      this.i18n.weekdays[focusedDate.getDay()],
-      focusedDate.getDate(),
-      this.i18n.monthNames[focusedDate.getMonth()],
-      focusedDate.getFullYear()
-    ]);
-    if (this.showWeekNumbers && this.i18n.firstDayOfWeek === 1) {
-      messages.push(this.i18n.week);
-      messages.push(getISOWeekNumber(focusedDate));
-    }
-    announce(messages.join(' '));
-  }
-
   /**
    * Focuses the cancel button
    */
@@ -422,14 +407,6 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
     }
   }
 
-  _onOverlayFocus() {
-    this._focused = true;
-  }
-
-  _onOverlayBlur() {
-    this._focused = false;
-  }
-
   _initialPositionChanged(initialPosition) {
     this.scrollToDate(initialPosition);
   }
@@ -521,6 +498,7 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
       this.$.monthScroller.position = targetPosition;
       this._targetPosition = undefined;
       this._repositionYearScroller();
+      this.__tryFocusDate();
       return;
     }
 
@@ -562,6 +540,7 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
 
         this.$.monthScroller.position = this._targetPosition;
         this._targetPosition = undefined;
+        this.__tryFocusDate();
       }
 
       setTimeout(this._repositionYearScroller.bind(this), 1);
@@ -702,150 +681,168 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
     e.preventDefault();
   }
 
-  _onKeydown(e) {
-    var focus = this._currentlyFocusedDate();
-
-    // Cannot use (today/cancel).focused flag because vaadin-text-field removes it
-    // previously in the keydown event.
-    const isToday = e.composedPath().indexOf(this.$.todayButton) >= 0;
-    const isCancel = e.composedPath().indexOf(this.$.cancelButton) >= 0;
-    const isScroller = !isToday && !isCancel;
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
-    const navigationKeys = [
-      ' ',
-      'ArrowDown',
-      'ArrowUp',
-      'ArrowRight',
-      'ArrowLeft',
-      'Enter',
-      'End',
-      'Escape',
-      'Home',
-      'PageUp',
-      'PageDown',
-      'Tab'
-    ];
-
-    const eventKey = e.key;
-    if (eventKey === 'Tab') {
-      // We handle tabs here and don't want to bubble up.
-      e.stopPropagation();
-
-      const isFullscreen = this.hasAttribute('fullscreen');
-      const isShift = e.shiftKey;
-
-      if (isFullscreen) {
-        e.preventDefault();
-      } else if ((isShift && isScroller) || (!isShift && isCancel)) {
-        // Return focus back to the input field
-        e.preventDefault();
-        this.dispatchEvent(new CustomEvent('focus-input', { bubbles: true, composed: true }));
-      } else if (isShift && isToday) {
-        // Browser returns focus back to the scrollable area. We need to set
-        // the focused flag, and move the scroll to focused date.
-        this._focused = true;
-        setTimeout(() => this.revealDate(this.focusedDate), 1);
-      } else {
-        // Browser moves the focus out of the scroller, hence focused flag must
-        // set to false.
-        this._focused = false;
-      }
-    } else if (navigationKeys.includes(eventKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      switch (eventKey) {
-        case 'ArrowDown':
-          this._moveFocusByDays(7);
-          this.focus();
-          break;
-        case 'ArrowUp':
-          this._moveFocusByDays(-7);
-          this.focus();
-          break;
-        case 'ArrowRight':
-          if (isScroller) {
-            this._moveFocusByDays(this.__isRTL ? -1 : 1);
-          }
-          break;
-        case 'ArrowLeft':
-          if (isScroller) {
-            this._moveFocusByDays(this.__isRTL ? 1 : -1);
-          }
-          break;
-        case 'Enter':
-          if (isScroller || isCancel) {
-            this._close();
-          } else if (isToday) {
-            this._onTodayTap();
-          }
-          break;
-        case ' ':
-          if (isCancel) {
-            this._close();
-          } else if (isToday) {
-            this._onTodayTap();
-          } else {
-            var focusedDate = this.focusedDate;
-            if (dateEquals(focusedDate, this.selectedDate)) {
-              this.selectedDate = '';
-              this.focusedDate = focusedDate;
-            } else {
-              this.selectedDate = focusedDate;
-            }
-          }
-          break;
-        case 'Home':
-          this._moveFocusInsideMonth(focus, 'minDate');
-          break;
-        case 'End':
-          this._moveFocusInsideMonth(focus, 'maxDate');
-          break;
-        case 'PageDown':
-          this._moveFocusByMonths(e.shiftKey ? 12 : 1);
-          break;
-        case 'PageUp':
-          this._moveFocusByMonths(e.shiftKey ? -12 : -1);
-          break;
-        case 'Escape':
-          this._cancel();
-          break;
-        default:
-          break;
-      }
+  __toggleDate(date) {
+    if (dateEquals(date, this.selectedDate)) {
+      this.selectedDate = '';
+      this.focusedDate = date;
+    } else {
+      this.selectedDate = date;
     }
   }
 
-  _currentlyFocusedDate() {
-    return this.focusedDate || this.selectedDate || this.initialPosition || new Date();
+  __onMonthCalendarKeyDown(event) {
+    let handled = false;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        this._moveFocusByDays(7);
+        handled = true;
+        break;
+      case 'ArrowUp':
+        this._moveFocusByDays(-7);
+        handled = true;
+        break;
+      case 'ArrowRight':
+        this._moveFocusByDays(this.__isRTL ? -1 : 1);
+        handled = true;
+        break;
+      case 'ArrowLeft':
+        this._moveFocusByDays(this.__isRTL ? 1 : -1);
+        handled = true;
+        break;
+      case 'Enter':
+        this.selectedDate = this.focusedDate;
+        this._close();
+        handled = true;
+        break;
+      case ' ':
+        this.__toggleDate(this.focusedDate);
+        handled = true;
+        break;
+      case 'Home':
+        this._moveFocusInsideMonth(this.focusedDate, 'minDate');
+        handled = true;
+        break;
+      case 'End':
+        this._moveFocusInsideMonth(this.focusedDate, 'maxDate');
+        handled = true;
+        break;
+      case 'PageDown':
+        this._moveFocusByMonths(event.shiftKey ? 12 : 1);
+        handled = true;
+        break;
+      case 'PageUp':
+        this._moveFocusByMonths(event.shiftKey ? -12 : -1);
+        handled = true;
+        break;
+      case 'Escape':
+        this._cancel();
+        handled = true;
+        break;
+      default:
+        break;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  __onTodayButtonKeyDown(event) {
+    if (this.hasAttribute('fullscreen')) {
+      event.stopPropagation();
+      return;
+    }
+
+    if (event.key === 'Tab' && event.shiftKey) {
+      event.stopPropagation();
+
+      // Browser returns focus back to the calendar.
+      // We need to move the scroll to focused date.
+      setTimeout(() => this.revealDate(this.focusedDate), 1);
+    }
+
+    if (event.key === 'Escape') {
+      this._cancel();
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  __onCancelButtonKeyDown(event) {
+    if (this.hasAttribute('fullscreen')) {
+      event.stopPropagation();
+      return;
+    }
+
+    if (event.key === 'Tab' && !event.shiftKey) {
+      // Return focus back to the input field
+      event.preventDefault();
+      event.stopPropagation();
+      this.dispatchEvent(new CustomEvent('focus-input', { bubbles: true, composed: true }));
+    }
+
+    if (event.key === 'Escape') {
+      this._cancel();
+      event.preventDefault();
+      event.stopPropagation();
+    }
   }
 
-  _focusDate(dateToFocus) {
+  __tryFocusDate() {
+    const dateToFocus = this.__pendingDateFocus;
+    if (dateToFocus) {
+      // Check the date element with tabindex="0"
+      const dateElement = this.focusableDateElement;
+
+      if (dateElement && dateEquals(dateElement.date, this.__pendingDateFocus)) {
+        delete this.__pendingDateFocus;
+        dateElement.focus();
+      }
+    }
+  }
+
+  async focusDate(date, keepMonth) {
+    const dateToFocus = date || this.selectedDate || this.initialPosition || new Date();
     this.focusedDate = dateToFocus;
-    this._focusedMonthDate = dateToFocus.getDate();
+    if (!keepMonth) {
+      this._focusedMonthDate = dateToFocus.getDate();
+    }
+    await this.focusDateElement();
+  }
+
+  async focusDateElement() {
+    this.__pendingDateFocus = this.focusedDate;
+
+    await new Promise((resolve) => {
+      requestAnimationFrame(resolve);
+    });
+
+    this.__tryFocusDate();
   }
 
   _focusClosestDate(focus) {
-    this._focusDate(getClosestDate(focus, [this.minDate, this.maxDate]));
+    this.focusDate(getClosestDate(focus, [this.minDate, this.maxDate]));
   }
 
   _moveFocusByDays(days) {
-    var focus = this._currentlyFocusedDate();
+    var focus = this.focusedDate;
     var dateToFocus = new Date(0, 0);
     dateToFocus.setFullYear(focus.getFullYear());
     dateToFocus.setMonth(focus.getMonth());
     dateToFocus.setDate(focus.getDate() + days);
 
     if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this._focusDate(dateToFocus);
+      this.focusDate(dateToFocus);
     } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
       // Move to min or max date
       if (days > 0) {
         // down or right
-        this._focusDate(this.maxDate);
+        this.focusDate(this.maxDate);
       } else {
         // up or left
-        this._focusDate(this.minDate);
+        this.focusDate(this.minDate);
       }
     } else {
       // Move to closest allowed date
@@ -854,7 +851,7 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 
   _moveFocusByMonths(months) {
-    var focus = this._currentlyFocusedDate();
+    var focus = this.focusedDate;
     var dateToFocus = new Date(0, 0);
     dateToFocus.setFullYear(focus.getFullYear());
     dateToFocus.setMonth(focus.getMonth() + months);
@@ -867,15 +864,15 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
     }
 
     if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this.focusedDate = dateToFocus;
+      this.focusDate(dateToFocus, true);
     } else if (this._dateAllowed(focus, this.minDate, this.maxDate)) {
       // Move to min or max date
       if (months > 0) {
         // pagedown
-        this._focusDate(this.maxDate);
+        this.focusDate(this.maxDate);
       } else {
         // pageup
-        this._focusDate(this.minDate);
+        this.focusDate(this.minDate);
       }
     } else {
       // Move to closest allowed date
@@ -896,10 +893,10 @@ class DatePickerOverlayContent extends ThemableMixin(DirMixin(PolymerElement)) {
     }
 
     if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {
-      this._focusDate(dateToFocus);
+      this.focusDate(dateToFocus);
     } else if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {
       // Move to minDate or maxDate
-      this._focusDate(this[property]);
+      this.focusDate(this[property]);
     } else {
       // Move to closest allowed date
       this._focusClosestDate(focusedDate);

package/src/vaadin-date-picker-overlay.js

@@ -13,6 +13,8 @@ registerStyles('vaadin-date-picker-overlay', datePickerOverlayStyles, {
   moduleId: 'vaadin-date-picker-overlay-styles'
 });
 
+let memoizedTemplate;
+
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
  *
@@ -23,6 +25,15 @@ class DatePickerOverlay extends DisableUpgradeMixin(PositionMixin(OverlayElement
   static get is() {
     return 'vaadin-date-picker-overlay';
   }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+    }
+
+    return memoizedTemplate;
+  }
 }
 
 customElements.define(DatePickerOverlay.is, DatePickerOverlay);

package/src/vaadin-date-picker.js

@@ -3,13 +3,11 @@
  * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/iron-media-query/iron-media-query.js';
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
@@ -144,8 +142,8 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix"></div>
-          <div part="toggle-button" slot="suffix" role="button"></div>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div part="toggle-button" slot="suffix" aria-hidden="true" on-click="_toggle"></div>
         </vaadin-input-container>
 
         <div part="helper-text">
@@ -186,8 +184,6 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
           ></vaadin-date-picker-overlay-content>
         </template>
       </vaadin-date-picker-overlay>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"> </iron-media-query>
     `;
   }
 
@@ -213,7 +209,9 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
       })
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
-    addListener(this.shadowRoot.querySelector('[part="toggle-button"]'), 'tap', this._toggle.bind(this));
+
+    const toggleButton = this.shadowRoot.querySelector('[part="toggle-button"]');
+    toggleButton.addEventListener('mousedown', (e) => e.preventDefault());
   }
 
   /** @private */

package/src/vaadin-month-calendar.js

@@ -5,6 +5,7 @@
  */
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js';
@@ -13,7 +14,7 @@ import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-
  * @extends HTMLElement
  * @private
  */
-class MonthCalendar extends ThemableMixin(PolymerElement) {
+class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -21,15 +22,23 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
           display: block;
         }
 
-        [part='weekdays'],
-        #days {
+        #monthGrid {
+          display: block;
+        }
+
+        #monthGrid thead,
+        #monthGrid tbody {
+          display: block;
+          width: 100%;
+        }
+
+        [part='weekdays'] {
           display: flex;
-          flex-wrap: wrap;
           flex-grow: 1;
         }
 
-        #days-container,
-        #weekdays-container {
+        #days-container tr,
+        #weekdays-container tr {
           display: flex;
         }
 
@@ -40,6 +49,11 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
           flex-shrink: 0;
         }
 
+        [part='date'] {
+          outline: none;
+        }
+
+        [part='week-number'][hidden],
         [part='week-numbers'][hidden],
         [part='weekday'][hidden] {
           display: none;
@@ -47,8 +61,11 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
 
         [part='weekday'],
         [part='date'] {
+          display: block;
           /* Would use calc(100% / 7) but it doesn't work nice on IE */
           width: 14.285714286%;
+          padding: 0;
+          font-weight: normal;
         }
 
         [part='weekday']:empty,
@@ -58,42 +75,59 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
         }
       </style>
 
-      <div part="month-header" role="heading">[[_getTitle(month, i18n.monthNames)]]</div>
-      <div id="monthGrid" on-touchend="_preventDefault" on-touchstart="_onMonthGridTouchStart">
-        <div id="weekdays-container">
-          <div hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]" part="weekday"></div>
-          <div part="weekdays">
+      <div part="month-header" id="month-header" aria-hidden="true">[[_getTitle(month, i18n.monthNames)]]</div>
+      <table
+        id="monthGrid"
+        role="grid"
+        aria-labelledby="month-header"
+        on-touchend="_preventDefault"
+        on-touchstart="_onMonthGridTouchStart"
+      >
+        <thead id="weekdays-container">
+          <tr role="row" part="weekdays">
+            <th
+              part="weekday"
+              aria-hidden="true"
+              hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]"
+            ></th>
             <template
               is="dom-repeat"
               items="[[_getWeekDayNames(i18n.weekdays, i18n.weekdaysShort, showWeekNumbers, i18n.firstDayOfWeek)]]"
             >
-              <div part="weekday" role="heading" aria-label$="[[item.weekDay]]">[[item.weekDayShort]]</div>
-            </template>
-          </div>
-        </div>
-        <div id="days-container">
-          <div part="week-numbers" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]">
-            <template is="dom-repeat" items="[[_getWeekNumbers(_days)]]">
-              <div part="week-number" role="heading" aria-label$="[[i18n.week]] [[item]]">[[item]]</div>
-            </template>
-          </div>
-          <div id="days">
-            <template is="dom-repeat" items="[[_days]]">
-              <!-- prettier-ignore -->
-              <div
-                part="date"
-                today$="[[_isToday(item)]]"
-                selected$="[[_dateEquals(item, selectedDate)]]"
-                focused$="[[_dateEquals(item, focusedDate)]]"
-                date="[[item]]"
-                disabled$="[[!_dateAllowed(item, minDate, maxDate)]]"
-                role$="[[_getRole(item)]]"
-                aria-label$="[[_getAriaLabel(item)]]"
-                aria-disabled$="[[_getAriaDisabled(item, minDate, maxDate)]]">[[_getDate(item)]]</div>
+              <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]">[[item.weekDayShort]]</th>
             </template>
-          </div>
-        </div>
-      </div>
+          </tr>
+        </thead>
+        <tbody id="days-container">
+          <template is="dom-repeat" items="[[_weeks]]" as="week">
+            <tr role="row">
+              <td
+                part="week-number"
+                aria-hidden="true"
+                hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]"
+              >
+                [[__getWeekNumber(week)]]
+              </td>
+              <template is="dom-repeat" items="[[week]]">
+                <td
+                  role="gridcell"
+                  part="date"
+                  date="[[item]]"
+                  today$="[[_isToday(item)]]"
+                  focused$="[[__isDayFocused(item, focusedDate)]]"
+                  tabindex$="[[__getDayTabindex(item, focusedDate)]]"
+                  selected$="[[__isDaySelected(item, selectedDate)]]"
+                  disabled$="[[__isDayDisabled(item, minDate, maxDate)]]"
+                  aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]"
+                  aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate)]]"
+                  aria-label$="[[__getDayAriaLabel(item)]]"
+                  >[[_getDate(item)]]</td
+                >
+              </template>
+            </tr>
+          </template>
+        </tbody>
+      </table>
     `;
   }
 
@@ -162,6 +196,11 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
         computed: '_getDays(month, i18n.firstDayOfWeek, minDate, maxDate)'
       },
 
+      _weeks: {
+        type: Array,
+        computed: '_getWeeks(_days)'
+      },
+
       disabled: {
         type: Boolean,
         reflectToAttribute: true,
@@ -171,7 +210,10 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
   }
 
   static get observers() {
-    return ['_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)'];
+    return [
+      '_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)',
+      '__focusedDateChanged(focusedDate, _days)'
+    ];
   }
 
   /** @protected */
@@ -180,12 +222,10 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
     addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
   }
 
-  _dateEquals(date1, date2) {
-    return dateEquals(date1, date2);
-  }
-
-  _dateAllowed(date, min, max) {
-    return dateAllowed(date, min, max);
+  get focusableDateElement() {
+    return [...this.shadowRoot.querySelectorAll('[part=date]')].find((datePart) => {
+      return dateEquals(datePart.date, this.focusedDate);
+    });
   }
 
   /* Returns true if all the dates in the month are out of the allowed range */
@@ -212,7 +252,7 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
       return false;
     }
 
-    return !this._dateAllowed(firstDate, minDate, maxDate) && !this._dateAllowed(lastDate, minDate, maxDate);
+    return !dateAllowed(firstDate, minDate, maxDate) && !dateAllowed(lastDate, minDate, maxDate);
   }
 
   _getTitle(month, monthNames) {
@@ -260,6 +300,14 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
     return weekDayNames;
   }
 
+  __focusedDateChanged(focusedDate, days) {
+    if (days.some((date) => dateEquals(date, focusedDate))) {
+      this.removeAttribute('aria-hidden');
+    } else {
+      this.setAttribute('aria-hidden', 'true');
+    }
+  }
+
   _getDate(date) {
     return date ? date.getDate() : '';
   }
@@ -278,7 +326,7 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
   }
 
   _isToday(date) {
-    return this._dateEquals(new Date(), date);
+    return dateEquals(new Date(), date);
   }
 
   _getDays(month, firstDayOfWeek) {
@@ -308,25 +356,14 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
     return days;
   }
 
-  _getWeekNumber(date, days) {
-    if (date === undefined || days === undefined) {
-      return;
-    }
-
-    if (!date) {
-      // Get the first non-null date from the days array.
-      date = days.reduce((acc, d) => {
-        return !acc && d ? d : acc;
-      });
-    }
-
-    return getISOWeekNumber(date);
-  }
-
-  _getWeekNumbers(dates) {
-    return dates
-      .map((date) => this._getWeekNumber(date, dates))
-      .filter((week, index, arr) => arr.indexOf(week) === index);
+  _getWeeks(days) {
+    return days.reduce((acc, day, i) => {
+      if (i % 7 === 0) {
+        acc.push([]);
+      }
+      acc[acc.length - 1].push(day);
+      return acc;
+    }, []);
   }
 
   _handleTap(e) {
@@ -340,11 +377,43 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
     e.preventDefault();
   }
 
-  _getRole(date) {
-    return date ? 'button' : 'presentation';
+  __getWeekNumber(days) {
+    const date = days.reduce((acc, d) => {
+      return !acc && d ? d : acc;
+    });
+
+    return getISOWeekNumber(date);
+  }
+
+  __isDayFocused(date, focusedDate) {
+    return dateEquals(date, focusedDate);
+  }
+
+  __isDaySelected(date, selectedDate) {
+    return dateEquals(date, selectedDate);
+  }
+
+  __getDayAriaSelected(date, selectedDate) {
+    if (this.__isDaySelected(date, selectedDate)) {
+      return 'true';
+    }
+  }
+
+  __isDayDisabled(date, minDate, maxDate) {
+    return !dateAllowed(date, minDate, maxDate);
+  }
+
+  __getDayAriaDisabled(date, min, max) {
+    if (date === undefined || min === undefined || max === undefined) {
+      return;
+    }
+
+    if (this.__isDayDisabled(date, min, max)) {
+      return 'true';
+    }
   }
 
-  _getAriaLabel(date) {
+  __getDayAriaLabel(date) {
     if (!date) {
       return '';
     }
@@ -365,11 +434,18 @@ class MonthCalendar extends ThemableMixin(PolymerElement) {
     return ariaLabel;
   }
 
-  _getAriaDisabled(date, min, max) {
-    if (date === undefined || min === undefined || max === undefined) {
-      return;
+  __getDayTabindex(date, focusedDate) {
+    if (this.__isDayFocused(date, focusedDate)) {
+      return '0';
     }
-    return this._dateAllowed(date, min, max) ? 'false' : 'true';
+
+    return '-1';
+  }
+
+  __getWeekNumbers(dates) {
+    return dates
+      .map((date) => this.__getWeekNumber(date, dates))
+      .filter((week, index, arr) => arr.indexOf(week) === index);
   }
 }