@fluid-topics/ft-radio 1.3.42 → 1.3.44

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

@@ -4,14 +4,12 @@ import { FtBaseRadio } from "./ft-radio";
 export interface FtBaseRadioGroupProperties {
     name?: string;
     role?: string;
-    tabIndex?: number;
     ariaLabelledBy?: string;
 }
 export declare class FtBaseRadioGroup extends FtLitElement implements FtBaseRadioGroupProperties {
     static elementDefinitions: {};
     name: string;
     role: string;
-    tabIndex: number;
     ariaLabelledBy: string;
     assignedElements?: Array<Element>;
     get radioButtons(): Array<FtBaseRadio>;

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

@@ -12,20 +12,12 @@ class FtBaseRadioGroup 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;
-                setTimeout(() => this.focusCurrentChecked(), 100);
-            }
+            setTimeout(() => this.focusCurrentChecked(), 100);
         };
         this.onFocusOut = (e) => {
-            const nextFocusOutsideOfGroup = !this.contains(e.relatedTarget);
-            if (nextFocusOutsideOfGroup) {
-                this.tabIndex = 0;
-            }
         };
     }
     get radioButtons() {
@@ -103,6 +95,7 @@ class FtBaseRadioGroup extends FtLitElement {
         else {
             this.currentSelectedIndex = checkedButtonIndex;
         }
+        this.radioButtons[this.currentSelectedIndex].setInputTabIndex(0);
     }
     focusCurrentChecked() {
         this.radioButtons[this.currentSelectedIndex].focus();
@@ -115,9 +108,6 @@ __decorate([
 __decorate([
     property({ reflect: true, attribute: "role" })
 ], FtBaseRadioGroup.prototype, "role", void 0);
-__decorate([
-    property({ reflect: true })
-], FtBaseRadioGroup.prototype, "tabIndex", void 0);
 __decorate([
     property({ reflect: true, attribute: "aria-labelledby" })
 ], FtBaseRadioGroup.prototype, "ariaLabelledBy", void 0);

package/build/ft-base-radio.js

@@ -35,7 +35,7 @@ class FtBaseRadio extends FtLitElement {
         return "";
     }
     render() {
-        // We use aria-hidden on the input to prevent the "radio" role to be present twice in the aria tree
+        // We use inert on the input to prevent the "radio" role to be present twice in the aria tree
         return html `
             <div class="${classMap(this.radioClasses)}"
                  @click=${this.onClick}>
@@ -54,9 +54,9 @@ class FtBaseRadio extends FtLitElement {
                            .checked=${this.checked}
                            .disabled=${this.disabled}
                            @change=${this.onChange}
-                           aria-hidden="true">
+                           >
                 </div>
-                <label for="radio-button">
+                <label for="radio-button" inert >
                     <ft-typography variant="${this.typographyVariant}">
                         <slot></slot>
                     </ft-typography>