@refinitiv-ui/elements 5.11.0 → 5.12.0-dev.0

package/lib/button/index.d.ts

@@ -58,10 +58,16 @@ export declare class Button extends ControlElement {
      */
     ariaPressed: string;
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Aria indicating state of toggle button.
+     * Used when role is radio.
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     protected update(changedProperties: PropertyValues): void;
     /**
      * the lifecycle method called when properties changed first time

package/lib/button/index.js

@@ -65,6 +65,12 @@ let Button = class Button extends ControlElement {
          * @ignore
          */
         this.ariaPressed = '';
+        /**
+         * Aria indicating state of toggle button.
+         * Used when role is radio.
+         * @ignore
+         */
+        this.ariaChecked = '';
     }
     /**
      * Element version number
@@ -74,13 +80,18 @@ let Button = class Button extends ControlElement {
         return VERSION;
     }
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     update(changedProperties) {
         if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
-            this.ariaPressed = String(this.active);
+            if (this.getAttribute('role') === 'radio') {
+                this.ariaChecked = String(this.active);
+            }
+            else {
+                this.ariaPressed = String(this.active);
+            }
         }
         super.update(changedProperties);
     }
@@ -215,6 +226,13 @@ __decorate([
         converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
     })
 ], Button.prototype, "ariaPressed", void 0);
+__decorate([
+    property({ type: String,
+        reflect: true,
+        attribute: 'aria-checked',
+        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
+    })
+], Button.prototype, "ariaChecked", void 0);
 Button = __decorate([
     customElement('ef-button', {
         alias: 'coral-button'

package/lib/button-bar/index.d.ts

@@ -9,6 +9,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns version number
      */
     static get version(): string;
+    /**
+     * Element's role attribute for accessibility
+     * `role` should be `radiogroup` when it is managed.
+     */
+    protected defaultRole: 'toolbar' | 'radiogroup';
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -30,6 +35,45 @@ export declare class ButtonBar extends BasicElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    private manageTabIndex;
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    private isNested;
     /**
      * Handles tap event
      * @param event the param is the event of click and tap handlers
@@ -47,6 +91,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     private getElementsOfSlot;
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    private getFocusableButtons;
     /**
      * Filter Button classes by the toggles property
      * @param buttons the array of Button items is the converted nodes of the default slot

package/lib/button-bar/index.js

@@ -1,20 +1,30 @@
+var ButtonBar_1;
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../version.js';
 import { Button } from '../button/index.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
-let ButtonBar = class ButtonBar extends BasicElement {
+let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
     constructor() {
         super(...arguments);
+        /**
+         * Element's role attribute for accessibility
+         * `role` should be `radiogroup` when it is managed.
+         */
+        this.defaultRole = 'toolbar';
         /**
          * Manages user interaction, only allowing one toggle button to be active at any one time.
          */
         this.managed = false;
+        /**
+         * Default slot
+         */
+        this.defaultSlot = createRef();
     }
     /**
      * Element version number
@@ -84,6 +94,130 @@ let ButtonBar = class ButtonBar extends BasicElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('tap', this.onTapHandler);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.manageTabIndex();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Tab':
+                // To prevent inserting button case, make sure there is only one tabIndex=0 in the buttons
+                this.manageTabIndex();
+                break;
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.onTapHandler(event);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                // Prevent calling twice if this component is nested
+                !this.isNested() && this.navigateToSibling('next');
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                // Managed works as role radiogroup so `Up` and `Down` key can navigate among radios in the group
+                this.managed && this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                !this.isNested() && this.navigateToSibling('previous');
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.managed && this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                !this.isNested() && this.first();
+                break;
+            case 'End':
+                !this.isNested() && this.last();
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        const focusedButtonIndex = buttons.findIndex(button => button === document.activeElement);
+        const nextButton = direction === 'next'
+            ? buttons[focusedButtonIndex + 1] || buttons[0]
+            : buttons[focusedButtonIndex - 1] || buttons[buttons.length - 1];
+        nextButton.focus();
+        this.rovingTabIndex(nextButton, buttons);
+    }
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    first() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[0].focus();
+        this.rovingTabIndex(buttons[0], buttons);
+    }
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    last() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[buttons.length - 1].focus();
+        this.rovingTabIndex(buttons[buttons.length - 1], buttons);
+    }
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    rovingTabIndex(target, buttons) {
+        buttons.forEach((button) => {
+            button.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    manageTabIndex() {
+        if (this.isNested()) {
+            return;
+        }
+        const buttons = this.getFocusableButtons();
+        if (buttons && buttons.length > 0) {
+            // Set tabindex=0 to previous focused button when new button added If not found set it to first button instead
+            let focusedButtonIndex = buttons.findIndex(button => document.activeElement === button);
+            if (focusedButtonIndex === -1) {
+                focusedButtonIndex = 0;
+            }
+            this.rovingTabIndex(buttons[focusedButtonIndex], buttons);
+        }
+    }
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    isNested() {
+        return this.parentElement instanceof ButtonBar_1;
     }
     /**
      * Handles tap event
@@ -99,6 +233,8 @@ let ButtonBar = class ButtonBar extends BasicElement {
             event.stopPropagation();
             this.manageButtons(target);
         }
+        target.focus();
+        this.rovingTabIndex(target, this.getFocusableButtons());
     }
     /**
      * Get the target Button item and handle it with other managed Button items
@@ -120,8 +256,15 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     getElementsOfSlot() {
-        return this.defaultSlot.assignedNodes()
-            .filter(node => node instanceof Element);
+        var _a;
+        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+    }
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    getFocusableButtons() {
+        return [...this.querySelectorAll('ef-button,coral-button')].filter(button => !button.disabled);
     }
     /**
      * Filter Button classes by the toggles property
@@ -138,16 +281,13 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @return {TemplateResult}  Render template
      */
     render() {
-        return html `<slot></slot>`;
+        return html `<slot ${ref(this.defaultSlot)} ></slot>`;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ButtonBar.prototype, "managed", void 0);
-__decorate([
-    query('slot:not([name])')
-], ButtonBar.prototype, "defaultSlot", void 0);
-ButtonBar = __decorate([
+ButtonBar = ButtonBar_1 = __decorate([
     customElement('ef-button-bar', {
         alias: 'coral-split-button'
     })

package/lib/multi-input/index.js

@@ -445,7 +445,7 @@ let MultiInput = class MultiInput extends ControlElement {
     onPillClearsHandler(event) {
         const pill = event.target;
         const index = pill.getAttribute('index');
-        if (index == null) {
+        if (index === null) {
             return;
         }
         const items = this.composer.queryItems(() => true);

package/lib/number-field/index.js

@@ -658,6 +658,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * @inheritDoc
      */
     /* istanbul ignore next */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setSelectionRange(startSelection, endSelection, selectionDirection) {
         throw new Error('Failed to execute \'setSelectionRange\' on \'NumberField\': The element does not support selection.');
     }

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '5.11.0';
+export const VERSION = '5.12.0-dev.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "5.11.0",
+  "version": "5.12.0-dev.0",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -590,17 +590,13 @@
     "lint": "node cli lint",
     "lint:fix": "node cli lint --fix",
     "prepublishOnly": "node scripts/release",
-    "api-analyzer": "node ../../scripts/release/api-analyzer.js"
+    "api-analyzer": "node ../../scripts/release/api-analyzer.js",
+    "version": "node ../../scripts/version"
   },
   "dependencies": {
     "@refinitiv-ui/browser-sparkline": "1.1.7",
-    "@refinitiv-ui/core": "^5.4.0",
-    "@refinitiv-ui/halo-theme": "^5.4.3",
-    "@refinitiv-ui/i18n": "^5.2.6",
-    "@refinitiv-ui/phrasebook": "^5.4.1",
-    "@refinitiv-ui/solar-theme": "^5.6.2",
-    "@refinitiv-ui/translate": "^5.3.0",
-    "@refinitiv-ui/utils": "^5.1.1",
+    "@refinitiv-ui/halo-theme": "^5.4.4-dev.0",
+    "@refinitiv-ui/solar-theme": "^5.6.3-dev.0",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -609,12 +605,24 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/demo-block": "^5.1.7",
-    "@refinitiv-ui/test-helpers": "^5.1.2",
+    "@refinitiv-ui/core": "^5.4.1-dev.0",
+    "@refinitiv-ui/demo-block": "^5.1.8-dev.0",
+    "@refinitiv-ui/i18n": "^5.2.7-dev.0",
+    "@refinitiv-ui/phrasebook": "^5.4.2-dev.0",
+    "@refinitiv-ui/test-helpers": "^5.1.3-dev.0",
+    "@refinitiv-ui/translate": "^5.3.1-dev.0",
+    "@refinitiv-ui/utils": "^5.1.2-dev.0",
     "@types/d3-interpolate": "^3.0.1"
   },
+  "peerDependencies": {
+    "@refinitiv-ui/core": "^5.4.1-dev.0",
+    "@refinitiv-ui/i18n": "^5.2.7-dev.0",
+    "@refinitiv-ui/phrasebook": "^5.4.2-dev.0",
+    "@refinitiv-ui/translate": "^5.3.1-dev.0",
+    "@refinitiv-ui/utils": "^5.1.2-dev.0"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bbdecc10ca2ccb017f0b534bf9639d1d19ba8f0f"
+  "gitHead": "593b957791e180fd1167f4045027ccc011143290"
 }