@fluid-topics/ft-radio 1.1.75 → 1.1.77

package/build/ft-radio-group.d.ts

@@ -6,14 +6,20 @@ export declare class FtRadioGroup extends FtLitElement implements FtRadioGroupPr
     static elementDefinitions: {};
     name: string;
     role: string;
+    tabIndex: number;
     ariaLabelledBy: string;
     radioButtons: Array<FtRadio>;
+    currentSelectedIndex: number;
     static styles: import("lit").CSSResult;
     protected render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private onSlotChange;
     protected contentAvailableCallback(props: PropertyValues): void;
+    private onFocus;
+    private onFocusOut;
     private onChange;
     private onKeyDown;
-    private findFtRadio;
-    private focusCurrentValue;
+    private resolveCurrentSelectedIndex;
+    private focusCurrentChecked;
 }

package/build/ft-radio-group.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { html } from "lit";
 import { groupStyles } from "./ft-radio-group.styles";
 class FtRadioGroup extends FtLitElement {
@@ -13,7 +13,21 @@ class FtRadioGroup extends FtLitElement {
         super(...arguments);
         this.name = "";
         this.role = "radiogroup";
+        this.tabIndex = 0;
         this.ariaLabelledBy = "";
+        this.currentSelectedIndex = 0;
+        this.onFocus = () => {
+            if (this.tabIndex == 0) {
+                this.tabIndex = -1;
+                this.focusCurrentChecked();
+            }
+        };
+        this.onFocusOut = (e) => {
+            let nextFocusOutsideOfGroup = !this.contains(e.relatedTarget);
+            if (nextFocusOutsideOfGroup) {
+                this.tabIndex = 0;
+            }
+        };
     }
     render() {
         return html `
@@ -23,19 +37,29 @@ class FtRadioGroup extends FtLitElement {
             ></slot>
         `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focus", this.onFocus);
+        this.addEventListener("focusout", this.onFocusOut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("focus", this.onFocus);
+        this.removeEventListener("focusout", this.onFocusOut);
+    }
     onSlotChange() {
         this.radioButtons.forEach(rb => rb.name = this.name);
     }
     contentAvailableCallback(props) {
         super.contentAvailableCallback(props);
-        //make the first radio button focusable
-        this.radioButtons[0].setAttribute("tabindex", "0");
+        this.radioButtons.forEach(rb => rb.setInputTabIndex(-1)); // RadioButton is no more selectable alone
+        this.resolveCurrentSelectedIndex();
     }
     onChange(event) {
         event.stopPropagation();
         this.radioButtons.forEach(rb => rb.checked = event.detail.value === rb.value);
         this.dispatchEvent(new CustomEvent("change", { detail: event.detail.value }));
-        this.focusCurrentValue();
+        this.resolveCurrentSelectedIndex();
     }
     onKeyDown(event) {
         let blockUnwhishedReaction = false;
@@ -43,8 +67,7 @@ class FtRadioGroup extends FtLitElement {
             case "ArrowUp":
             case "ArrowLeft": {
                 blockUnwhishedReaction = true;
-                let searchElement = this.findFtRadio(event);
-                let indexToFocus = this.radioButtons.indexOf(searchElement) - 1;
+                let indexToFocus = this.currentSelectedIndex - 1;
                 this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].select();
                 this.radioButtons[indexToFocus < 0 ? this.radioButtons.length - 1 : indexToFocus].focus();
                 break;
@@ -52,14 +75,13 @@ class FtRadioGroup extends FtLitElement {
             case "ArrowDown":
             case "ArrowRight": {
                 blockUnwhishedReaction = true;
-                let indexToFocus = this.radioButtons.indexOf(this.findFtRadio(event)) + 1;
+                let indexToFocus = this.currentSelectedIndex + 1;
                 this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].select();
                 this.radioButtons[indexToFocus > this.radioButtons.length - 1 ? 0 : indexToFocus].focus();
                 break;
             }
             case "Enter": {
-                let indexToSelect = this.radioButtons.indexOf(this.findFtRadio(event));
-                this.radioButtons[indexToSelect].select();
+                this.radioButtons[this.currentSelectedIndex].select();
             }
         }
         if (blockUnwhishedReaction) {
@@ -67,11 +89,18 @@ class FtRadioGroup extends FtLitElement {
             event.preventDefault();
         }
     }
-    findFtRadio(event) {
-        return event.composedPath().find(element => element.tagName === "FT-RADIO");
+    resolveCurrentSelectedIndex() {
+        let checkedButtonIndex = this.radioButtons.findIndex(rb => rb.checked);
+        if (checkedButtonIndex == -1) {
+            this.currentSelectedIndex = 0;
+            this.radioButtons[0].select();
+        }
+        else {
+            this.currentSelectedIndex = checkedButtonIndex;
+        }
     }
-    focusCurrentValue() {
-        setTimeout(() => { var _a; return (_a = this.radioButtons.find(rb => rb.checked)) === null || _a === void 0 ? void 0 : _a.focus(); }, 10);
+    focusCurrentChecked() {
+        this.radioButtons[this.currentSelectedIndex].focus();
     }
 }
 FtRadioGroup.elementDefinitions = {};
@@ -82,10 +111,16 @@ __decorate([
 __decorate([
     property({ reflect: true, attribute: "role" })
 ], FtRadioGroup.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], FtRadioGroup.prototype, "tabIndex", void 0);
 __decorate([
     property({ reflect: true, attribute: "aria-labelledby" })
 ], FtRadioGroup.prototype, "ariaLabelledBy", void 0);
 __decorate([
     queryAssignedElements()
 ], FtRadioGroup.prototype, "radioButtons", void 0);
+__decorate([
+    state()
+], FtRadioGroup.prototype, "currentSelectedIndex", void 0);
 export { FtRadioGroup };

package/build/ft-radio-group.styles.js

@@ -3,6 +3,6 @@ export const FtRadioGroupCssVariables = {};
 // language=CSS
 export const groupStyles = css `
     :host {
-        display: contents;
+        display: block;
     }
 `;

package/build/ft-radio.d.ts

@@ -13,8 +13,8 @@ export declare class FtRadio extends FtLitElement implements FtRadioProperties {
     value: string;
     name: string;
     checked: boolean;
+    ariaChecked: string;
     disabled: boolean;
-    tabIndex: number;
     role: string;
     private container?;
     private ripple?;
@@ -23,7 +23,7 @@ export declare class FtRadio extends FtLitElement implements FtRadioProperties {
     protected update(changedProperties: PropertyValues): void;
     private onChange;
     protected contentAvailableCallback(props: PropertyValues): void;
-    disconnectedCallback(): void;
-    private onFocus;
     select(): void;
+    setInputTabIndex(index: number): void;
+    focus(): void;
 }

package/build/ft-radio.js

@@ -22,8 +22,8 @@ class FtRadio extends FtLitElement {
         this.value = "";
         this.name = "";
         this.checked = false;
+        this.ariaChecked = "false";
         this.disabled = false;
-        this.tabIndex = -1;
         this.role = "radio";
     }
     render() {
@@ -51,7 +51,14 @@ class FtRadio extends FtLitElement {
                            @change=${this.onChange}
                     >
                 </div>
-                <label for="radio-button" @click=${(e) => e.stopPropagation()}>
+                <label for="radio-button" @click=${(e) => {
+            var _a;
+            e.stopPropagation();
+            e.preventDefault();
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.click();
+            // This should be the normal behaviour, but chrome have an issue with click transmission in shadowRoot
+            // https://issues.chromium.org/issues/325161644
+        }}>
                     <ft-typography variant="body2">
                         <slot></slot>
                     </ft-typography>
@@ -61,15 +68,8 @@ class FtRadio extends FtLitElement {
     }
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has("checked") && !changedProperties.has("aria-checked")) {
-            if (this.checked) {
-                this.setAttribute("aria-checked", "true");
-                this.tabIndex = 0;
-            }
-            else {
-                this.setAttribute("aria-checked", "false");
-                this.tabIndex = -1;
-            }
+        if (changedProperties.has("checked")) {
+            this.ariaChecked = this.checked ? "true" : "false";
         }
     }
     onChange(event) {
@@ -81,19 +81,20 @@ class FtRadio extends FtLitElement {
         var _a;
         super.contentAvailableCallback(props);
         (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
-        this.addEventListener("focus", this.onFocus);
-    }
-    disconnectedCallback() {
-        this.removeEventListener("focus", this.onFocus);
-        super.disconnectedCallback();
-    }
-    onFocus(e) {
-        this.dispatchEvent(new FtRadioChangeEvent(this.name, this.checked));
     }
     select() {
         this.checked = true;
         this.dispatchEvent(new FtRadioChangeEvent(this.value, this.checked));
     }
+    setInputTabIndex(index) {
+        if (this.input) {
+            this.input.tabIndex = index;
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    }
 }
 FtRadio.elementDefinitions = {
     "ft-ripple": FtRipple,
@@ -109,12 +110,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FtRadio.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: "aria-checked", reflect: true })
+], FtRadio.prototype, "ariaChecked", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtRadio.prototype, "disabled", void 0);
-__decorate([
-    property({ reflect: true })
-], FtRadio.prototype, "tabIndex", void 0);
 __decorate([
     property({ reflect: true, attribute: "role" })
 ], FtRadio.prototype, "role", void 0);