@refinitiv-ui/elements 5.7.0 → 5.9.0-alpha.0

package/lib/calendar/index.js

@@ -2,15 +2,21 @@ import { __decorate } from "tslib";
 import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
 import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { cache } from '@refinitiv-ui/core/lib/directives/cache.js';
+import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 import { VERSION } from '../version.js';
 import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment } from '@refinitiv-ui/utils/lib/date.js';
+import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/lib/date.js';
+import { left, right, up, down, first, last } from '@refinitiv-ui/utils/lib/navigation.js';
 import { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './utils.js';
 import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { RenderView, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
+import { RenderView, CalendarLocaleScope, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
 import './locales.js';
 import '../button/index.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
 /**
  * Standard calendar element
  *
@@ -28,6 +34,11 @@ import '../button/index.js';
 let Calendar = class Calendar extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'group';
+        /**
+         * Reference to the view button
+         */
+        this.viewBtnRef = createRef();
         this._min = '';
         this._max = '';
         /**
@@ -62,8 +73,20 @@ let Calendar = class Calendar extends ControlElement {
         /**
          * Used for internal navigation between render views
          */
-        this.renderView = RenderView.DAY;
-        this.isDateAvailable = null; /* a constructed filter based on multiple local filters */
+        this._renderView = RenderView.DAY;
+        /**
+         * Used for keyboard navigation when trying
+         * to restore focus on re-render and control navigation
+         */
+        this._activeCellIndex = null;
+        // Used to store current navigation map
+        this.navigationGrid = [];
+        /**
+         * Connected to role. If false, the values are not announced in the screen reader
+         */
+        this.announceValues = true;
+        // Cashed filter, which is constructed based on multiple local filters
+        this.isDateAvailable = null;
     }
     /**
      * Element version number
@@ -83,14 +106,14 @@ let Calendar = class Calendar extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part=navigation], [part=navigation] section {
+      [part~=navigation], [part~=navigation] section {
         display: flex;
         flex-flow: row nowrap;
       }
-      [part=navigation] {
+      [part~=navigation] {
         justify-content: space-between;
       }
-      [part=navigation] > div {
+      [part~=navigation] > div {
         display: flex;
         flex: 1;
         justify-content: center;
@@ -101,7 +124,6 @@ let Calendar = class Calendar extends ControlElement {
         bottom: 0;
         left: 0;
         right: 0;
-        pointer-events: none;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -131,7 +153,10 @@ let Calendar = class Calendar extends ControlElement {
         width: calc(100% / ${DAY_VIEW.columnCount});
         padding-top: calc(100% / ${DAY_VIEW.columnCount});
       }
-      [part~=cell][tabindex] {
+      [part~=cell-content]:not([tabindex]) {
+        pointer-events: none;
+      }
+      [part~=selection] {
         cursor: pointer;
       }
     `;
@@ -187,6 +212,7 @@ let Calendar = class Calendar extends ControlElement {
         const oldView = this._view;
         if (oldView !== view) {
             this._view = view;
+            this.resetActiveCellIndex();
             this.requestUpdate('view', oldView);
         }
     }
@@ -199,6 +225,7 @@ let Calendar = class Calendar extends ControlElement {
      * 0 - for Sunday, 6 - for Saturday
      * @param firstDayOfWeek The first day of the week
      * @type {number | null}
+     * @default null
      */
     set firstDayOfWeek(firstDayOfWeek) {
         firstDayOfWeek %= 7;
@@ -226,6 +253,7 @@ let Calendar = class Calendar extends ControlElement {
      * Set multiple selected values
      * @param values Values to set
      * @type {string[]}
+     * @default []
      */
     set values(values) {
         const oldValues = this._values;
@@ -238,27 +266,82 @@ let Calendar = class Calendar extends ControlElement {
     get values() {
         return this._values.concat();
     }
+    get renderView() {
+        return this._renderView;
+    }
+    set renderView(renderView) {
+        const oldRenderView = this._renderView;
+        if (oldRenderView !== renderView) {
+            this._renderView = renderView;
+            // always reset active cell to not focus on potentially invalid cell
+            this.resetActiveCellIndex();
+            this.requestUpdate('renderView', oldRenderView);
+        }
+    }
+    get activeCellIndex() {
+        return this._activeCellIndex;
+    }
+    set activeCellIndex(activeCellIndex) {
+        const oldCellIndex = this._activeCellIndex;
+        if (String(activeCellIndex) !== String(oldCellIndex)) {
+            this._activeCellIndex = activeCellIndex;
+            this.requestUpdate('activeCellIndex', oldCellIndex);
+        }
+    }
     /**
-     * Get weekday numbers.
-     * Sort the list based on first day of the week
+     * Silently reset cell index without calling request update
+     * @returns {void}
      */
-    get weekdaysNames() {
-        const firstDayOfWeek = this.firstDayOfWeek;
-        const localWeekdaysNames = this.localWeekdaysNames;
-        return localWeekdaysNames.slice(firstDayOfWeek).concat(localWeekdaysNames.slice(0, firstDayOfWeek));
+    resetActiveCellIndex() {
+        this._activeCellIndex = null;
+    }
+    /**
+     * Get an active element
+     */
+    get activeElement() {
+        return this.shadowRoot.activeElement;
+    }
+    /**
+     * Get selectable date button element by index
+     * @param index Cell index
+     * @returns button HTML date button element or null
+     */
+    getDateButtonByIndex(index) {
+        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selection]'));
+        return elements.find((element) => this.isDateButton(element) && String(element.index) === String(index));
     }
     /**
-     * Get localised month names from January to December
+     * Get active date button element
+     * @returns button HTML date button element or null
      */
-    get monthsNames() {
-        return this.localMonthsNames;
+    get activeDateButton() {
+        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selection]');
+    }
+    /**
+     * Return true if passed target is HTML
+     * date button element that can be selected
+     * @param target Target to check
+     * @returns isDateButtonElement
+     */
+    isDateButton(target) {
+        return target.index !== undefined;
+    }
+    static get observedAttributes() {
+        const observed = super.observedAttributes;
+        return ['role'].concat(observed);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'role') {
+            this.announceValues = !(!newValue || newValue === 'none' || newValue === 'presentation');
+        }
     }
     /**
      * Perform asynchronous update
      * @returns promise
      */
     async performUpdate() {
-        const localFirstDayOfWeek = Number(await this.tPromise('FIRST_DAY_OF_WEEK'));
+        const localFirstDayOfWeek = Number(await this.dateTPromise('FIRST_DAY_OF_WEEK'));
         this.localFirstDayOfWeek = isNaN(localFirstDayOfWeek) ? FIRST_DAY_OF_WEEK : (localFirstDayOfWeek % 7);
         void super.performUpdate();
     }
@@ -269,14 +352,39 @@ let Calendar = class Calendar extends ControlElement {
     */
     update(changedProperties) {
         if (!this.localMonthsNames || changedProperties.has(TranslatePropertyKey)) {
-            this.localMonthsNames = monthsNames(getLocale(this));
+            const locale = getLocale(this);
+            this.localMonthsNames = monthsNames(locale);
         }
         if (!this.localWeekdaysNames || changedProperties.has(TranslatePropertyKey)) {
-            this.localWeekdaysNames = weekdaysNames(getLocale(this));
+            const locale = getLocale(this);
+            const longWeekdaysNames = weekdaysNames(locale, 'long');
+            this.localWeekdaysNames = weekdaysNames(locale).map((narrow, index) => {
+                return { narrow, long: longWeekdaysNames[index] };
+            });
         }
         this.shouldConstructFilters(changedProperties) && this.constructFilters();
         super.update(changedProperties);
     }
+    /**
+     * Called after render life-cycle finished
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // This code is here to ensure that focus is not lost
+        // while navigating through the render views using keyboard
+        if (this.focused && changedProperties.has('renderView') && this.viewBtnRef.value && this.activeElement !== this.viewBtnRef.value) {
+            this.viewBtnRef.value.focus();
+        }
+        const cellIndex = this.activeCellIndex;
+        if (cellIndex && changedProperties.has('activeCellIndex')) {
+            const dateButtonEl = this.getDateButtonByIndex(cellIndex);
+            if (dateButtonEl && this.activeElement !== dateButtonEl) {
+                dateButtonEl.focus();
+            }
+        }
+    }
     /**
      * Run when an element has been first updated
      * @param changedProperties properties that was changed on first update
@@ -284,7 +392,7 @@ let Calendar = class Calendar extends ControlElement {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.renderRoot.addEventListener('keydown', event => this.onTableKeyDown(event));
+        this.renderRoot.addEventListener('keydown', event => this.onKeyDown(event));
     }
     /**
      * Show invalid view message
@@ -416,78 +524,88 @@ let Calendar = class Calendar extends ControlElement {
             rangeTo
         };
     }
+    /**
+     * Set navigation map based on rows
+     * @param rows A collection of rows with cells
+     * @returns {void}
+     */
+    setNavigationMap(rows) {
+        this.navigationGrid = rows.map(row => row.map(cell => cell.value && !cell.disabled ? 1 : 0));
+    }
     /**
      * Run when next button is tapped.
      * Change current view to next view
+     * @param event Next view tap event
      * @returns {void}
      */
-    onNextTap() {
-        let viewSegment = toDateSegment(this.view);
-        switch (this.renderView) {
-            case RenderView.DAY:
-                viewSegment = toDateSegment(addMonths(this.view, 1));
-                break;
-            case RenderView.MONTH:
-                viewSegment.year += 1;
-                break;
-            case RenderView.YEAR:
-                viewSegment.year += YEARS_PER_YEAR_VIEW;
-                break;
-            // no default
+    onNextTap(event) {
+        if (!event.defaultPrevented) {
+            this.toNextView();
         }
-        this.notifyViewChange(viewSegment);
     }
     /**
      * Run when previous button is tapped.
      * Change current view to previous view
+     * @param event Previous view tap event
      * @returns {void}
      */
-    onPreviousTap() {
-        let viewSegment = toDateSegment(this.view);
-        switch (this.renderView) {
-            case RenderView.DAY:
-                viewSegment = toDateSegment(subMonths(this.view, 1));
-                break;
-            case RenderView.MONTH:
-                viewSegment.year -= 1;
-                break;
-            case RenderView.YEAR:
-                viewSegment.year -= YEARS_PER_YEAR_VIEW;
-                break;
-            // no default
+    onPreviousTap(event) {
+        if (!event.defaultPrevented) {
+            this.toPreviousView();
         }
-        this.notifyViewChange(viewSegment);
     }
     /**
      * Run when change view button is tapped.
      * Switch between views
+     * @param event Render view tap event
      * @returns {void}
      */
-    onRenderViewTap() {
-        this.renderView = this.renderView === RenderView.DAY ? RenderView.YEAR : RenderView.DAY;
+    onRenderViewTap(event) {
+        if (!event.defaultPrevented) {
+            this.renderView = this.renderView === RenderView.DAY ? RenderView.YEAR : RenderView.DAY;
+        }
     }
     /**
      * Run when key down event happens on calendar
      * @param event Keyboard event
      * @returns {void}
      */
-    onTableKeyDown(event) {
+    onKeyDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
         switch (event.key) {
-            case ' ':
-            case 'Enter':
-            case 'Spacebar':
-                event.preventDefault();
-                this.onTableTap(event);
-                break;
             case 'Esc':
             case 'Escape':
                 if (this.renderView === RenderView.YEAR || this.renderView === RenderView.MONTH) {
-                    event.preventDefault();
                     this.renderView = RenderView.DAY;
+                    break;
                 }
+                return;
+            case 'Up': // IE11
+            case 'ArrowUp':
+                void this.onNavigation('ArrowUp');
                 break;
-            // no default
+            case 'Down':
+            case 'ArrowDown':
+                void this.onNavigation('ArrowDown');
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                void this.onNavigation('ArrowLeft');
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                void this.onNavigation('ArrowRight');
+                break;
+            case 'Home':
+            case 'End':
+                void this.onNavigation(event.key);
+                break;
+            default:
+                return;
         }
+        event.preventDefault();
     }
     /**
      * Run when tap event happens ot table.
@@ -496,10 +614,14 @@ let Calendar = class Calendar extends ControlElement {
      * @returns {void}
      */
     onTableTap(event) {
-        const cell = event.target; /* here we just emulate interface */
-        if (!cell || !cell.value) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const cell = event.target;
+        if (!cell || !this.isDateButton(cell) || !cell.value) {
             return;
         }
+        this.activeCellIndex = cell.index;
         const cellSegment = toDateSegment(cell.value);
         const viewSegment = toDateSegment(this.view);
         if (this.renderView === RenderView.YEAR) { /* YEAR -> MONTH */
@@ -519,6 +641,117 @@ let Calendar = class Calendar extends ControlElement {
         }
         this.onTapSelectValue(cell.value);
     }
+    /**
+     * Navigate over the grid
+     * @param key Navigation direction
+     * @returns navigation promise
+     */
+    async onNavigation(key) {
+        const grid = this.navigationGrid;
+        switch (key) {
+            case 'Home':
+                this.activeCellIndex = first(grid);
+                return;
+            case 'End':
+                this.activeCellIndex = last(grid);
+                return;
+            // no default
+        }
+        // no previously selected cell, but there is cell which is a candidate for navigation
+        const activeDateEl = this.activeDateButton;
+        if (!this.activeCellIndex && activeDateEl) {
+            this.activeCellIndex = activeDateEl.index;
+            // current cell is already in focus (e.g. via Tab key, continue navigation from that point)
+            if (!(this.activeElement === activeDateEl)) {
+                return;
+            }
+        }
+        const activeCellIndex = this.activeCellIndex;
+        // All cells are disabled
+        if (!activeCellIndex) {
+            return;
+        }
+        // active cell is selected
+        if (activeCellIndex) {
+            let newActiveCell;
+            switch (key) {
+                case 'ArrowUp':
+                    newActiveCell = up(grid, activeCellIndex);
+                    break;
+                case 'ArrowDown':
+                    newActiveCell = down(grid, activeCellIndex);
+                    break;
+                case 'ArrowLeft':
+                    newActiveCell = left(grid, activeCellIndex);
+                    break;
+                case 'ArrowRight':
+                    newActiveCell = right(grid, activeCellIndex);
+                    break;
+                // no default
+            }
+            // Standard navigation withing the same view
+            if (newActiveCell) {
+                this.activeCellIndex = newActiveCell;
+                return;
+            }
+        }
+        // Jump to the next view
+        switch (key) {
+            // case 'ArrowUp': // it feels better not having Up/Down in these case
+            case 'ArrowLeft':
+                this.toPreviousView();
+                await this.updateComplete; // must wait until the render cycle has finished
+                await this.onNavigation('End');
+                break;
+            // case 'ArrowDown':
+            case 'ArrowRight':
+                this.toNextView();
+                await this.updateComplete;
+                await this.onNavigation('Home');
+                break;
+            // no default
+        }
+    }
+    /**
+     * Navigate to the next view
+     * @returns {void}
+     */
+    toNextView() {
+        let viewSegment = toDateSegment(this.view);
+        switch (this.renderView) {
+            case RenderView.DAY:
+                viewSegment = toDateSegment(addMonths(this.view, 1));
+                break;
+            case RenderView.MONTH:
+                viewSegment.year += 1;
+                break;
+            case RenderView.YEAR:
+                viewSegment.year += YEARS_PER_YEAR_VIEW;
+                break;
+            // no default
+        }
+        this.notifyViewChange(viewSegment);
+    }
+    /**
+     * Navigate to the previous view
+     * @returns {void}
+     */
+    toPreviousView() {
+        let viewSegment = toDateSegment(this.view);
+        switch (this.renderView) {
+            case RenderView.DAY:
+                viewSegment = toDateSegment(subMonths(this.view, 1));
+                break;
+            case RenderView.MONTH:
+                viewSegment.year -= 1;
+                break;
+            case RenderView.YEAR:
+                viewSegment.year -= YEARS_PER_YEAR_VIEW;
+                break;
+            // no default
+        }
+        this.notifyViewChange(viewSegment);
+    }
     /**
      * Run when tap event happened on DAY view and the cell has the values
      * Try to select/deselect cell value
@@ -531,12 +764,14 @@ let Calendar = class Calendar extends ControlElement {
         }
         let values;
         if (this.multiple) {
-            values = this.values.filter(oldValue => {
-                return oldValue !== value;
-            });
-            if (this.values.length === values.length) {
+            values = this.values.concat([]);
+            const valueIdx = this.values.indexOf(value);
+            if (valueIdx === -1) {
                 values.push(value);
             }
+            else {
+                values.splice(valueIdx, 1);
+            }
         }
         else if (this.range) {
             if (!this.values.length) {
@@ -552,12 +787,16 @@ let Calendar = class Calendar extends ControlElement {
                     values = [value];
                 }
             }
-            else {
+            else if (this.values.indexOf(value) === -1) {
                 values = [value];
             }
+            else {
+                // remove range if start/end index match
+                values = [];
+            }
         }
         else {
-            values = [value];
+            values = this.value === value ? [] : [value];
         }
         this.notifyValuesChange(values);
     }
@@ -601,11 +840,7 @@ let Calendar = class Calendar extends ControlElement {
         if (isIE && isBC) {
             return html `${formatLocaleDate(date, getLocale(this), includeMonth, includeEra)}`;
         }
-        return html `${this.t('VIEW_FORMAT', {
-            date,
-            includeMonth,
-            includeEra
-        }, ViewFormatTranslateParams)}`;
+        return html `${this.dateT('VIEW_FORMAT', { date, includeMonth, includeEra }, ViewFormatTranslateParams)}`;
     }
     /**
      * Get a string representation of current view
@@ -628,14 +863,49 @@ let Calendar = class Calendar extends ControlElement {
         }
     }
     /**
-     * Render cell content template.
-     * If the cell is selectable (aka has value) add selection part
-     * @param text Text to render
-     * @param selectable True if cell may be selected
-     * @returns template result
+     * Set an active state of the cell based
+     * @param rows A collection of rows with cells
+     * @returns {void}
      */
-    renderContentBox(text = '', selectable = false) {
-        return html `<div part="cell-content${selectable ? ' selection' : ''}">${text}</div>`;
+    setActiveCell(rows) {
+        const setActive = (cell) => {
+            if (cell) {
+                cell.active = true;
+            }
+        };
+        const columnIdx = this.activeCellIndex ? this.activeCellIndex[0] : NaN;
+        const rowIdx = this.activeCellIndex ? this.activeCellIndex[1] : NaN;
+        // Selected cell is active or today cell or first available cell
+        let activeCell;
+        let nowCell;
+        let firstCell;
+        let selectedCell;
+        for (let i = 0; i < rows.length; i += 1) {
+            const row = rows[i];
+            for (let e = 0; e < row.length; e += 1) {
+                const cell = row[e];
+                if (cell.disabled || !cell.value) {
+                    continue;
+                }
+                if (i === rowIdx && e === columnIdx) {
+                    activeCell = cell;
+                }
+                if (!selectedCell && cell.selected) {
+                    selectedCell = cell;
+                }
+                if (cell.now) {
+                    nowCell = cell;
+                }
+                if (!firstCell) {
+                    firstCell = cell;
+                }
+            }
+        }
+        // If a cell that was active before last render is not available now, remove index
+        if (!activeCell && this.activeCellIndex) {
+            this.resetActiveCellIndex(); // set on private to not cause another re-render
+        }
+        setActive(activeCell || selectedCell || nowCell || firstCell);
     }
     /**
      * Get year view template
@@ -651,18 +921,18 @@ let Calendar = class Calendar extends ControlElement {
         for (let i = 0; i < YEAR_VIEW.totalCount; i += 1) {
             if (i % YEAR_VIEW.columnCount === 0) {
                 cells = [];
-                rows.push({
-                    cells
-                });
+                rows.push(cells);
             }
             const year = startIdx + i;
             const value = utcFormat({ year, month: 0, day: 1 }, DateFormat.yyyyMMdd);
-            cell = Object.assign({ view, text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`, value: `${year}`, now: isThisYear(value) }, this.getCellSelection(value, isSameYear));
+            cell = Object.assign({ view, text: year > 0 ? `${year}` : year === 0 ? '1' : `${Math.abs(year - 1)}`, value: `${year}`, now: isThisYear(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameYear));
             cells.push(cell);
             years.push(cell);
         }
         years[0].firstDate = true;
         years[years.length - 1].lastDate = true;
+        this.setActiveCell(rows);
+        this.setNavigationMap(rows);
         return html `${this.renderRows(rows)}`;
     }
     /**
@@ -674,7 +944,7 @@ let Calendar = class Calendar extends ControlElement {
         const columnCount = MONTH_VIEW.columnCount;
         const monthCount = 12;
         const totalCount = MONTH_VIEW.totalCount;
-        const monthsNames = this.monthsNames;
+        const monthsNames = this.localMonthsNames;
         const before = (totalCount - monthCount) / 2;
         const startIdx = monthCount - before % monthCount;
         const after = before + monthCount;
@@ -685,21 +955,21 @@ let Calendar = class Calendar extends ControlElement {
         for (let i = 0; i < totalCount; i += 1) {
             if (i % columnCount === 0) {
                 cells = [];
-                rows.push({
-                    cells
-                });
+                rows.push(cells);
             }
             const month = (startIdx + i) % monthCount; /* 0 for Jan, 11 for Dev */
             const year = currentYear + Math.floor((i - before) / monthCount);
             const segment = { year, month, day: 1 };
             const value = utcFormat(segment, DateFormat.yyyyMMdd);
             const idle = i < before || i >= after;
-            cell = Object.assign({ view, text: monthsNames[month], value: utcFormat(segment, DateFormat.yyyyMM), idle, now: isThisMonth(value) }, this.getCellSelection(value, isSameMonth));
+            cell = Object.assign({ view, text: monthsNames[month], value: utcFormat(segment, DateFormat.yyyyMM), idle, now: isThisMonth(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameMonth));
             cells.push(cell);
             months.push(cell);
         }
         months[0].firstDate = true;
         months[months.length - 1].lastDate = true;
+        this.setActiveCell(rows);
+        this.setNavigationMap(rows);
         return html `${this.renderRows(rows)}`;
     }
     /**
@@ -722,15 +992,14 @@ let Calendar = class Calendar extends ControlElement {
         for (let i = 0; i < DAY_VIEW.totalCount; i += 1) {
             if (i % DAY_VIEW.columnCount === 0) {
                 cells = [];
-                rows.push({
-                    cells
-                });
+                rows.push(cells);
             }
             const datePadding = i - padding + 1;
             if (datePadding <= 0) {
                 if (!this.fillCells) {
                     cells.push({
-                        view
+                        view,
+                        index: [cells.length, rows.length - 1]
                     });
                     continue;
                 }
@@ -741,7 +1010,8 @@ let Calendar = class Calendar extends ControlElement {
             else if (datePadding > viewMonth.days) {
                 if (!this.fillCells) {
                     cells.push({
-                        view
+                        view,
+                        index: [cells.length, rows.length - 1]
                     });
                     continue;
                 }
@@ -757,14 +1027,16 @@ let Calendar = class Calendar extends ControlElement {
             const value = utcFormat({ year, month, day }, DateFormat.yyyyMMdd);
             const disabled = this.isDateAvailable ? !this.isDateAvailable(value) : false;
             const dayCell = Object.assign({ view, text: day.toString(), value,
-                disabled, idle: month !== viewMonth.month || year !== viewMonth.year, now: isToday(value) }, this.getCellSelection(value, isSameDay));
+                disabled, idle: month !== viewMonth.month || year !== viewMonth.year, now: isToday(value), index: [cells.length, rows.length - 1] }, this.getCellSelection(value, isSameDay));
             cells.push(dayCell);
             days.push(dayCell);
         }
         days[0].firstDate = true;
         days[days.length - 1].lastDate = true;
+        this.setActiveCell(rows);
+        this.setNavigationMap(rows);
         return html `
-      ${this.renderWeekdayNames}
+      ${guard([this.firstDayOfWeek, this.lang], () => this.renderWeekdayNames)}
       ${this.renderRows(rows)}
     `;
     }
@@ -772,23 +1044,50 @@ let Calendar = class Calendar extends ControlElement {
      * Get weekday names template
      */
     get renderWeekdayNames() {
+        const firstDayOfWeek = this.firstDayOfWeek;
+        const weekdaysNames = this.localWeekdaysNames.slice(firstDayOfWeek).concat(this.localWeekdaysNames.slice(0, firstDayOfWeek));
         return html `
-      <div part="row day-name-row">${this.weekdaysNames.map(day => html `<div part="cell day-name">${this.renderContentBox(day)}</div>`)}</div>
-    `;
+      <div role="row"
+           part="row day-name-row">${weekdaysNames.map(day => html `
+        <div scope="col" role="columnheader" part="cell day-name" abbr="${day.long}">
+          <div part="cell-content">${day.narrow}</div>
+        </div>
+      `)}</div>`;
     }
     /**
      * Render a view based on the current render view
      */
     get viewRender() {
+        let renderView;
         switch (this.renderView) {
             case RenderView.MONTH:
-                return this.monthView;
+                renderView = this.monthView;
+                break;
             case RenderView.YEAR:
-                return this.yearView;
+                renderView = this.yearView;
+                break;
             case RenderView.DAY:
             default:
-                return this.dayView;
+                renderView = this.dayView;
+        }
+        return html `${cache(renderView)}`;
+    }
+    /**
+     * Get cell translate label key based on selected state
+     * @param cell Cell
+     * @returns key Translate label key
+     */
+    getCellLabelKey(cell) {
+        if (cell.selected && cell.now) {
+            return 'SELECTED_NOW';
+        }
+        if (cell.selected) {
+            return 'SELECTED';
         }
+        if (cell.now) {
+            return 'NOW';
+        }
+        return 'CELL_LABEL';
     }
     /**
      * Render cell template. Cell can be a day, month or year
@@ -796,10 +1095,13 @@ let Calendar = class Calendar extends ControlElement {
      * @returns template result
      */
     renderCell(cell) {
+        const isSelectable = cell.value !== undefined && !cell.disabled;
         return html `<div
+      role="gridcell"
       part="cell ${cell.view}"
+      aria-selected="${ifDefined(isSelectable ? (cell.selected ? 'true' : 'false') : undefined)}"
+      ?active=${cell.active}
       ?disabled=${cell.disabled}
-      .value=${cell.value}
       ?idle=${cell.idle}
       ?today=${cell.now}
       ?first-date=${cell.firstDate}
@@ -807,9 +1109,18 @@ let Calendar = class Calendar extends ControlElement {
       ?selected=${cell.selected}
       ?range=${cell.range}
       ?range-from=${cell.rangeFrom}
-      ?range-to=${cell.rangeTo}
-      tabindex=${ifDefined(cell.value !== undefined && !cell.disabled ? 0 : undefined)}
-     >${this.renderContentBox(cell.text, cell.value !== undefined)}</div>`;
+      ?range-to=${cell.rangeTo}>
+        <div role="${ifDefined(cell.value ? 'button' : undefined)}"
+             tabindex=${ifDefined(isSelectable ? (cell.active ? 0 : -1) : undefined)}
+             aria-label="${ifDefined(isSelectable && !isIE ? this.t(this.getCellLabelKey(cell), {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            value: parse(cell.value),
+            view: this.renderView
+        }) : undefined)}"
+             part="cell-content${isSelectable ? ' selection' : ''}"
+             .value=${cell.value}
+             .index=${cell.index}>${cell.text}</div>
+    </div>`;
     }
     /**
      * Render view rows
@@ -817,32 +1128,80 @@ let Calendar = class Calendar extends ControlElement {
      * @returns template result
      */
     renderRows(rows) {
-        return rows.map(row => html `<div part="row">${row.cells.map(cell => this.renderCell(cell))}</div>`);
+        return rows.map(row => html `<div role="row" part="row">${row.map(cell => this.renderCell(cell))}</div>`);
     }
     /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
+     * Render button navigation template
+     * @returns template result
      */
-    render() {
-        return html `
-      <div part="navigation">
+    get buttonNavigationTemplate() {
+        let prevBtnAriaLabel = this.t('PREVIOUS_MONTH');
+        let nextBtnAriaLabel = this.t('NEXT_MONTH');
+        let viewBtnAriaLabel = this.t('YEAR_SELECTOR');
+        switch (this.renderView) {
+            case RenderView.YEAR:
+                prevBtnAriaLabel = this.t('PREVIOUS_DECADE');
+                nextBtnAriaLabel = this.t('NEXT_DECADE');
+                viewBtnAriaLabel = this.t('DATE_SELECTOR');
+                break;
+            case RenderView.MONTH:
+                prevBtnAriaLabel = this.t('PREVIOUS_YEAR');
+                nextBtnAriaLabel = this.t('NEXT_YEAR');
+                viewBtnAriaLabel = this.t('DATE_SELECTOR');
+                break;
+            // RenderView.DAY
+            // no default
+        }
+        return html `<div part="navigation">
         <ef-button
           part="btn-prev"
+          aria-label="${prevBtnAriaLabel}"
           icon="left"
           @tap=${this.onPreviousTap}></ef-button>
         <ef-button
+          ${ref(this.viewBtnRef)}
+          aria-description="${viewBtnAriaLabel}"
           part="btn-view"
           textpos="before"
           .icon="${this.renderView === RenderView.DAY ? 'down' : 'up'}"
           @tap="${this.onRenderViewTap}">${this.formattedViewRender}</ef-button>
         <ef-button
           part="btn-next"
+          aria-label="${nextBtnAriaLabel}"
           icon="right"
           @tap=${this.onNextTap}></ef-button>
-      </div>
-      <div part="table"
-        @tap=${this.onTableTap}>${this.viewRender}</div>
+      </div>`;
+    }
+    /**
+     * A template used to notify currently selected value for screen readers
+     * @returns template result
+     */
+    get selectionTemplate() {
+        if (isIE || !this.announceValues) { /* IE11 has significant performance complications */
+            return;
+        }
+        return html `<div
+      part="aria-selection"
+      aria-live="polite"
+      aria-label="${this.value
+            ? this.range
+                ? this.t('SELECTED_RANGE', { from: parse(this.values[0]), to: this.values[1] ? parse(this.values[1]) : null })
+                : this.t('SELECTED_DATE', { value: parse(this.value), count: this.values.length })
+            : this.t('SELECTED_NONE', { multiple: this.multiple, range: this.range })}"></div>`;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      ${guard([this.values, this.lang, this.range, this.multiple, this.announceValues], () => this.selectionTemplate)}
+      ${guard([this.view, this.renderView, this.lang], () => this.buttonNavigationTemplate)}
+      <div role="grid"
+           aria-multiselectable="${this.range || this.multiple}"
+           part="table"
+           @tap=${this.onTableTap}>${this.viewRender}</div>
       <div part="footer"><slot name="footer"></slot></div>
     `;
     }
@@ -889,15 +1248,24 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'fill-cells' })
 ], Calendar.prototype, "fillCells", void 0);
+__decorate([
+    translate({ mode: 'directive', scope: CalendarLocaleScope })
+], Calendar.prototype, "dateT", void 0);
+__decorate([
+    translate({ mode: 'promise', scope: CalendarLocaleScope })
+], Calendar.prototype, "dateTPromise", void 0);
 __decorate([
     translate({ mode: 'directive', scope: 'ef-calendar' })
 ], Calendar.prototype, "t", void 0);
 __decorate([
-    translate({ mode: 'promise', scope: 'ef-calendar' })
-], Calendar.prototype, "tPromise", void 0);
+    state()
+], Calendar.prototype, "renderView", null);
 __decorate([
-    property({ type: String })
-], Calendar.prototype, "renderView", void 0);
+    state()
+], Calendar.prototype, "activeCellIndex", null);
+__decorate([
+    state()
+], Calendar.prototype, "announceValues", void 0);
 Calendar = __decorate([
     customElement('ef-calendar', {
         alias: 'coral-calendar'