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

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.9.0-alpha.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.2-alpha.0...@refinitiv-ui/elements@5.9.0-alpha.0) (2021-12-14)
+
+
+### Features
+
+* **calendar:** add accessibility ([#73](https://github.com/Refinitiv/refinitiv-ui/issues/73)) ([a2576cc](https://github.com/Refinitiv/refinitiv-ui/commit/a2576cc8a1f0229bb5988af0c9d0bbf8ce7f765c))
+
+
+
+
+
+## [5.8.2-alpha.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.1...@refinitiv-ui/elements@5.8.2-alpha.0) (2021-12-13)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [5.8.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.0...@refinitiv-ui/elements@5.8.1) (2021-12-07)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+# [5.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.7.0...@refinitiv-ui/elements@5.8.0) (2021-12-03)
+
+
+### Bug Fixes
+
+* change default role to more generic type for better extendibility ([#100](https://github.com/Refinitiv/refinitiv-ui/issues/100)) ([fe999dc](https://github.com/Refinitiv/refinitiv-ui/commit/fe999dc66b5f42581a37329ced697ae6ac2dc929))
+* **combo-box:** fix arrow icon not show in Solar when disabled ([55c1008](https://github.com/Refinitiv/refinitiv-ui/commit/55c1008b7b63f915a7575059c6539e63a757e389))
+* **combo-box:** import counter instead of pill ([6410c03](https://github.com/Refinitiv/refinitiv-ui/commit/6410c03dd12077f25347dddb249b6a6700186abc))
+
+
+### Features
+
+* **list:** improve screen reader ([0bc3a8c](https://github.com/Refinitiv/refinitiv-ui/commit/0bc3a8c9c4051200cd1a5c8ed655d1d3ebbd9021))
+* **select:** improve screen reader support ([#80](https://github.com/Refinitiv/refinitiv-ui/issues/80)) ([a43fbcd](https://github.com/Refinitiv/refinitiv-ui/commit/a43fbcd4b23b2f508ddc94b8007913f66da1ae89))
+
+
+
+
+
 # [5.7.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.6.0...@refinitiv-ui/elements@5.7.0) (2021-11-22)
 
 

package/lib/autosuggest/custom-elements.json

@@ -26,7 +26,7 @@
           "name": "more-search-text",
           "description": "Custom text for More Search",
           "type": "string",
-          "default": "\"defaultMoreSearchText\""
+          "default": "\"More results for {0}\""
         },
         {
           "name": "loading",
@@ -55,12 +55,12 @@
       ],
       "properties": [
         {
-          "name": "defaultDebounceRate",
+          "name": "defaultDebounceRate (readonly)",
           "type": "100",
           "default": "100"
         },
         {
-          "name": "defaultMoreSearchText",
+          "name": "defaultMoreSearchText (readonly)",
           "type": "\"More results for {0}\"",
           "default": "\"More results for {0}\""
         },
@@ -89,7 +89,7 @@
           "attribute": "more-search-text",
           "description": "Custom text for More Search",
           "type": "string",
-          "default": "\"defaultMoreSearchText\""
+          "default": "\"More results for {0}\""
         },
         {
           "name": "loading",
@@ -177,6 +177,16 @@
           "description": "Fired when suggestions changed"
         }
       ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Slot to add custom contents at the top of autosuggest popup"
+        },
+        {
+          "name": "footer",
+          "description": "Slot to add custom contents at the bottom of autosuggest popup"
+        }
+      ],
       "methods": [
         {
           "name": "onInputValueChange",

package/lib/autosuggest/custom-elements.md

@@ -8,20 +8,20 @@ custom rendering, pagination, asynchronous data request, etc.
 
 ## Properties
 
-| Property         | Attribute          | Type                                         | Default                 | Description                                      |
-|------------------|--------------------|----------------------------------------------|-------------------------|--------------------------------------------------|
-| `attach`         | `attach`           | `AutosuggestTargetElement \| string \| null` | null                    | An HTML Element or CSS selector                  |
-| `debounceRate`   | `debounce-rate`    | `number`                                     | "100"                   | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
-| `highlightable`  |                    | `AutosuggestHighlightable`                   | "itemHighlightable"     | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
-| `htmlRenderer`   | `html-renderer`    | `boolean`                                    | false                   | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
-| `loading`        | `loading`          | `boolean`                                    | false                   | If set to true show loading mask                 |
-| `moreResults`    | `more-results`     | `boolean`                                    | false                   | If set to true display 'Has more results' item   |
-| `moreSearchText` | `more-search-text` | `string`                                     | "defaultMoreSearchText" | Custom text for More Search                      |
-| `opened`         | `opened`           | `boolean`                                    | false                   | Auto suggest popup's open state                  |
-| `query`          |                    | `AutosuggestQuery \| null`                   | null                    | An object that represents a query from attach target |
-| `renderer`       |                    | `AutosuggestRenderer`                        | "itemRenderer"          | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
-| `requestOnFocus` | `request-on-focus` | `boolean`                                    | false                   | Request suggestions when attach target is focused |
-| `suggestions`    |                    | `AutosuggestItem[]`                          | []                      | A list of suggestion items                       |
+| Property         | Attribute          | Type                                         | Default                | Description                                      |
+|------------------|--------------------|----------------------------------------------|------------------------|--------------------------------------------------|
+| `attach`         | `attach`           | `AutosuggestTargetElement \| string \| null` | null                   | An HTML Element or CSS selector                  |
+| `debounceRate`   | `debounce-rate`    | `number`                                     | "100"                  | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
+| `highlightable`  |                    | `AutosuggestHighlightable`                   | "itemHighlightable"    | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
+| `htmlRenderer`   | `html-renderer`    | `boolean`                                    | false                  | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
+| `loading`        | `loading`          | `boolean`                                    | false                  | If set to true show loading mask                 |
+| `moreResults`    | `more-results`     | `boolean`                                    | false                  | If set to true display 'Has more results' item   |
+| `moreSearchText` | `more-search-text` | `string`                                     | "More results for {0}" | Custom text for More Search                      |
+| `opened`         | `opened`           | `boolean`                                    | false                  | Auto suggest popup's open state                  |
+| `query`          |                    | `AutosuggestQuery \| null`                   | null                   | An object that represents a query from attach target |
+| `renderer`       |                    | `AutosuggestRenderer`                        | "itemRenderer"         | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
+| `requestOnFocus` | `request-on-focus` | `boolean`                                    | false                  | Request suggestions when attach target is focused |
+| `suggestions`    |                    | `AutosuggestItem[]`                          | []                     | A list of suggestion items                       |
 
 ## Methods
 
@@ -45,3 +45,10 @@ custom rendering, pagination, asynchronous data request, etc.
 | `suggestions-clear-requested` | Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to [] |
 | `suggestions-fetch-requested` | Fired when auto suggest requests the data        |
 | `suggestions-query`           | Fired when input value has changed and the query must be set |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Slot to add custom contents at the bottom of autosuggest popup |
+| `header` | Slot to add custom contents at the top of autosuggest popup |

package/lib/autosuggest/index.d.ts

@@ -24,6 +24,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
+ *
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 export declare class Autosuggest extends Overlay {
     /**
@@ -83,6 +86,7 @@ export declare class Autosuggest extends Overlay {
     moreResults: boolean;
     /**
      * Custom text for More Search
+     * @default More results for {0}
      */
     moreSearchText: string;
     /**

package/lib/autosuggest/index.js

@@ -31,6 +31,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
+ *
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     /**
@@ -53,6 +56,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         this.moreResults = false;
         /**
          * Custom text for More Search
+         * @default More results for {0}
          */
         this.moreSearchText = Autosuggest_1.defaultMoreSearchText;
         /**

package/lib/calendar/constants.d.ts

@@ -20,3 +20,7 @@ export declare const MONTH_VIEW: {
     columnCount: number;
     totalCount: number;
 };
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export declare const CalendarLocaleScope: string;

package/lib/calendar/constants.js

@@ -1,3 +1,4 @@
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";
@@ -21,3 +22,7 @@ export const MONTH_VIEW = {
     columnCount: 4,
     totalCount: 4 * 4
 };
+/**
+ * A symbol to ensure these locales cannot be overridden
+ */
+export const CalendarLocaleScope = uuid();

package/lib/calendar/custom-elements.json

@@ -61,7 +61,8 @@
         {
           "name": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "fill-cells",
@@ -154,7 +155,8 @@
           "name": "values",
           "attribute": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "fillCells",

package/lib/calendar/custom-elements.md

@@ -9,14 +9,14 @@ Standard calendar element
 | `disabled`       | `disabled`          | `boolean`                | false   | Set disabled state                               |
 | `fillCells`      | `fill-cells`        | `boolean`                | false   | Fill head and tail cell dates                    |
 | `filter`         |                     | `CalendarFilter \| null` | null    | Custom filter, used for enabling/disabling certain dates |
-| `firstDayOfWeek` | `first-day-of-week` | `number \| null`         |         | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `firstDayOfWeek` | `first-day-of-week` | `number \| null`         | null    | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
 | `max`            | `max`               | `string`                 | ""      | Set maximum date                                 |
 | `min`            | `min`               | `string`                 | ""      | Set minimum date                                 |
 | `multiple`       | `multiple`          | `boolean`                | false   | Set to switch to multiple select mode            |
 | `range`          | `range`             | `boolean`                | false   | Set to switch to range select mode               |
 | `readonly`       | `readonly`          | `boolean`                | false   | Set readonly state                               |
 | `value`          | `value`             | `string`                 | ""      | Current date time value                          |
-| `values`         | `values`            | `string[]`               |         | Set multiple selected values                     |
+| `values`         | `values`            | `string[]`               | []      | Set multiple selected values                     |
 | `view`           | `view`              | `string`                 | ""      | Current calendar view date                       |
 | `weekdaysOnly`   | `weekdays-only`     | `boolean`                | false   | Only enable weekdays                             |
 | `weekendsOnly`   | `weekends-only`     | `boolean`                | false   | Only enable weekends                             |

package/lib/calendar/index.d.ts

@@ -1,10 +1,11 @@
 import { JSXInterface } from '../jsx';
 import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues, MultiValue } from '@refinitiv-ui/core';
 import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
-import type { CalendarFilter } from './types';
+import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-export type { CalendarFilter };
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
+export { CalendarFilter };
 /**
  * Standard calendar element
  *
@@ -25,6 +26,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -32,6 +34,10 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
+    /**
+     * Reference to the view button
+     */
+    private viewBtnRef;
     private _min;
     /**
     * Set minimum date
@@ -78,6 +84,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * 0 - for Sunday, 6 - for Saturday
      * @param firstDayOfWeek The first day of the week
      * @type {number | null}
+     * @default null
      */
     set firstDayOfWeek(firstDayOfWeek: number);
     get firstDayOfWeek(): number;
@@ -101,6 +108,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Set multiple selected values
      * @param values Values to set
      * @type {string[]}
+     * @default []
      */
     set values(values: string[]);
     get values(): string[];
@@ -108,25 +116,63 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Fill head and tail cell dates
      */
     fillCells: boolean;
+    /**
+     * Calendar internal translation strings
+     */
+    protected dateT: TranslateDirective;
+    protected dateTPromise: TranslatePromise;
     /**
      * Used for translations
      */
     protected t: TranslateDirective;
-    protected tPromise: TranslatePromise;
     /**
      * Used for internal navigation between render views
      */
-    private renderView;
-    private isDateAvailable;
+    private _renderView;
+    private get renderView();
+    private set renderView(value);
     /**
-     * Get weekday numbers.
-     * Sort the list based on first day of the week
+     * Used for keyboard navigation when trying
+     * to restore focus on re-render and control navigation
      */
-    private get weekdaysNames();
+    private _activeCellIndex;
+    private get activeCellIndex();
+    private set activeCellIndex(value);
     /**
-     * Get localised month names from January to December
+     * Silently reset cell index without calling request update
+     * @returns {void}
      */
-    private get monthsNames();
+    private resetActiveCellIndex;
+    private navigationGrid;
+    /**
+     * Connected to role. If false, the values are not announced in the screen reader
+     */
+    private announceValues;
+    /**
+     * Get an active element
+     */
+    private get activeElement();
+    /**
+     * Get selectable date button element by index
+     * @param index Cell index
+     * @returns button HTML date button element or null
+     */
+    private getDateButtonByIndex;
+    /**
+     * Get active date button element
+     * @returns button HTML date button element or null
+     */
+    private get activeDateButton();
+    /**
+     * Return true if passed target is HTML
+     * date button element that can be selected
+     * @param target Target to check
+     * @returns isDateButtonElement
+     */
+    private isDateButton;
+    private isDateAvailable;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Perform asynchronous update
      * @returns promise
@@ -138,6 +184,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
     * @returns {void}
     */
     protected update(changedProperties: PropertyValues): void;
+    /**
+     * Called after render life-cycle finished
+     * @param changedProperties Properties which have changed
+     * @return {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Run when an element has been first updated
      * @param changedProperties properties that was changed on first update
@@ -196,21 +248,30 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns cell selection model
      */
     private getCellSelection;
+    /**
+     * Set navigation map based on rows
+     * @param rows A collection of rows with cells
+     * @returns {void}
+     */
+    private setNavigationMap;
     /**
      * Run when next button is tapped.
      * Change current view to next view
+     * @param event Next view tap event
      * @returns {void}
      */
     private onNextTap;
     /**
      * Run when previous button is tapped.
      * Change current view to previous view
+     * @param event Previous view tap event
      * @returns {void}
      */
     private onPreviousTap;
     /**
      * Run when change view button is tapped.
      * Switch between views
+     * @param event Render view tap event
      * @returns {void}
      */
     private onRenderViewTap;
@@ -219,7 +280,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @param event Keyboard event
      * @returns {void}
      */
-    private onTableKeyDown;
+    private onKeyDown;
     /**
      * Run when tap event happens ot table.
      * Select the values or switch the view
@@ -227,6 +288,22 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns {void}
      */
     private onTableTap;
+    /**
+     * Navigate over the grid
+     * @param key Navigation direction
+     * @returns navigation promise
+     */
+    private onNavigation;
+    /**
+     * Navigate to the next view
+     * @returns {void}
+     */
+    private toNextView;
+    /**
+     * Navigate to the previous view
+     * @returns {void}
+     */
+    private toPreviousView;
     /**
      * Run when tap event happened on DAY view and the cell has the values
      * Try to select/deselect cell value
@@ -259,13 +336,11 @@ export declare class Calendar extends ControlElement implements MultiValue {
      */
     private get formattedViewRender();
     /**
-     * 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}
      */
-    private renderContentBox;
+    private setActiveCell;
     /**
      * Get year view template
      */
@@ -286,6 +361,12 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Render a view based on the current render view
      */
     private get viewRender();
+    /**
+     * Get cell translate label key based on selected state
+     * @param cell Cell
+     * @returns key Translate label key
+     */
+    private getCellLabelKey;
     /**
      * Render cell template. Cell can be a day, month or year
      * @param cell Cell object
@@ -298,6 +379,16 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @returns template result
      */
     private renderRows;
+    /**
+     * Render button navigation template
+     * @returns template result
+     */
+    private get buttonNavigationTemplate();
+    /**
+     * A template used to notify currently selected value for screen readers
+     * @returns template result
+     */
+    private get selectionTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.