@fluid-topics/ft-switch 1.1.107 → 1.1.111

package/build/ft-switch-option.d.ts

@@ -22,10 +22,14 @@ export declare class FtSwitchOption extends FtLitElement implements FtSwitchOpti
     unselectable: boolean;
     private slottedContent?;
     private input;
+    isFocused: boolean;
     focus(): void;
     protected update(props: PropertyValues<any>): void;
     protected render(): HTMLTemplateResult;
     private addTooltip;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onFocusout;
     private onChange;
     private getLabel;
     private resolveIcon;

package/build/ft-switch-option.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 { html, nothing } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { FtLitElement, isSafari, safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
@@ -32,6 +32,7 @@ class FtSwitchOption extends FtLitElement {
         this.selected = false;
         this.trailingIcon = false;
         this.unselectable = false;
+        this.isFocused = false;
     }
     focus() {
         this.input.focus();
@@ -47,6 +48,7 @@ class FtSwitchOption extends FtLitElement {
             "ft-switch-option": true,
             "ft-switch-option--trailing-icon": this.trailingIcon,
             "ft-switch-option--selected": this.selected,
+            "ft-switch-option--focused": this.isFocused,
         };
         return this.addTooltip(html `
             <label part="label" for="input" class=${classMap(classes)}
@@ -75,6 +77,17 @@ class FtSwitchOption extends FtLitElement {
             </ft-tooltip>
         `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focusout", this.onFocusout);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("focusout", this.onFocusout);
+    }
+    onFocusout(e) {
+        this.isFocused = false;
+    }
     onChange() {
         this.selected = this.unselectable ? !this.selected : true;
         this.dispatchEvent(new SwitchOptionChangeByUser(this.selected));
@@ -138,4 +151,7 @@ __decorate([
 __decorate([
     query(".ft-switch-option--input")
 ], FtSwitchOption.prototype, "input", void 0);
+__decorate([
+    state()
+], FtSwitchOption.prototype, "isFocused", void 0);
 export { FtSwitchOption };

package/build/ft-switch-option.styles.js

@@ -72,6 +72,10 @@ export const optionStyles = css `
         color: ${FtSwitchCssVariables.selectedTextColor};
     }
 
+    .ft-switch-option--focused {
+        outline: 1px solid ${FtSwitchCssVariables.outlineColor};
+    }
+
     .ft-switch-option--label[hidden] {
         display: none;
     }

package/build/ft-switch.d.ts

@@ -10,8 +10,10 @@ export declare class FtSwitch extends FtLitElement implements FtSwitchProperties
     get value(): any;
     dense: boolean;
     unselectable: boolean;
+    label?: string;
     private slottedContent?;
     private selectedOption?;
+    private displayFocusWhenUsingKeyboard;
     private options;
     private ftSwitchDiv;
     protected update(props: PropertyValues<any>): void;

package/build/ft-switch.js

@@ -21,6 +21,7 @@ class FtSwitch extends FtLitElement {
         super(...arguments);
         this.dense = false;
         this.unselectable = false;
+        this.displayFocusWhenUsingKeyboard = false;
         this.options = [];
     }
     get value() {
@@ -42,7 +43,7 @@ class FtSwitch extends FtLitElement {
             "ft-switch--dense": this.dense,
         };
         return html `
-            <div @keydown=${this.onKeyDown} tabindex="0" class="${classMap(classes)}">
+            <div @keydown=${this.onKeyDown} tabindex="-1" class="${classMap(classes)}" role="radiogroup" aria-label=${this.label}>
                 <slot @slotchange=${this.onSlotchange}
                       @option-change=${this.onOptionChangeByScript}
                       @option-change-by-user=${this.onOptionChangeByUser}
@@ -58,8 +59,13 @@ class FtSwitch extends FtLitElement {
         if (e.key == "ArrowUp" || e.key == "ArrowLeft") {
             newIndex = this.selectedOption ? this.options.indexOf(this.selectedOption) - 1 : this.options.length - 1;
         }
+        if (e.code == "Space") {
+            newIndex = this.options.indexOf(e.target);
+        }
         if (newIndex != undefined) {
             e.preventDefault();
+            this.options[this.fixIndex(newIndex)].focus();
+            this.displayFocusWhenUsingKeyboard = true;
             this.options[this.fixIndex(newIndex)].selected = true;
         }
     }
@@ -83,7 +89,11 @@ class FtSwitch extends FtLitElement {
         this.selectedOption = this.options.find(option => option.selected);
     }
     registerOption(option) {
-        option.setAttribute("tabindex", "-1");
+        var _a;
+        (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("input").forEach(input => {
+            input.setAttribute("tabindex", "-1");
+        });
+        option.setAttribute("tabindex", "0");
         option.unselectable = this.unselectable;
         this.options.push(option);
     }
@@ -95,6 +105,7 @@ class FtSwitch extends FtLitElement {
     onOptionChangeByUser(e) {
         var _a;
         e.stopPropagation();
+        this.displayFocusWhenUsingKeyboard = false;
         this.onOptionChange(e.target);
         this.dispatchEvent(new FtSwitchChange((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value));
     }
@@ -120,6 +131,9 @@ class FtSwitch extends FtLitElement {
     updateOptions() {
         this.options.forEach(option => {
             option.selected = option === this.selectedOption;
+            if (this.displayFocusWhenUsingKeyboard) {
+                option.isFocused = option === this.selectedOption;
+            }
         });
     }
 }
@@ -166,12 +180,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtSwitch.prototype, "unselectable", void 0);
+__decorate([
+    property()
+], FtSwitch.prototype, "label", void 0);
 __decorate([
     query(".ft-switch slot")
 ], FtSwitch.prototype, "slottedContent", void 0);
 __decorate([
     state()
 ], FtSwitch.prototype, "selectedOption", void 0);
+__decorate([
+    state()
+], FtSwitch.prototype, "displayFocusWhenUsingKeyboard", void 0);
 __decorate([
     query(".ft-switch")
 ], FtSwitch.prototype, "ftSwitchDiv", void 0);