@fluid-topics/ft-select 1.3.21 → 1.3.22

package/build/ft-select.d.ts

@@ -14,7 +14,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     static searchTimeoutMilliseconds: number;
     static styles: import("lit").CSSResult[];
     label: string;
-    ariaLabel: string;
+    ariaLabel: string | null;
     helper: string;
     outlined: boolean;
     disabled: boolean;
@@ -36,7 +36,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private optionsSlot?;
     protected render(): import("lit-html").TemplateResult<1>;
     private renderOption;
-    protected update(props: PropertyValues): void;
+    protected willUpdate(props: PropertyValues): void;
     protected contentAvailableCallback(props: PropertyValues): void;
     private get hasOptionsMenuOpen();
     private get hasOptions();
@@ -46,6 +46,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private isKeyAlphanumeric;
     private handleAlphanumericPress;
     private onOptionKeyDown;
+    private getOptionId;
     private selectOption;
     private hideOptions;
     connectedCallback(): void;

package/build/ft-select.js

@@ -8,11 +8,13 @@ import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { computeOffsetAutoPosition, deepEqual, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyBody2, FtTypographyCaption, FtTypographyVariants } from "@fluid-topics/ft-typography";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
 import { FtSelectCssVariables, styles } from "./ft-select.styles";
 class FtSelectOption extends FtLitElement {
     constructor() {
@@ -44,7 +46,7 @@ class FtSelect extends FtLitElement {
     constructor() {
         super(...arguments);
         this.label = "";
-        this.ariaLabel = "";
+        this.ariaLabel = null;
         this.helper = "";
         this.outlined = false;
         this.disabled = false;
@@ -78,6 +80,7 @@ class FtSelect extends FtLitElement {
                 <div class="ft-select--main-panel" part="main-panel">
                     <ft-input-label text="${this.label}"
                                     part="label"
+                                    id="label"
                                     ?disabled=${disabled}
                                     ?outlined=${this.outlined}
                                     ?raised=${hasOptionSelected || optionsDisplayed}
@@ -91,26 +94,28 @@ class FtSelect extends FtLitElement {
             this.focusOptions = this.optionsDisplayed;
         }}
                          @keydown=${this.onMainPanelKeyDown}
-                         aria-label="${this.ariaLabel}"
+                         aria-label="${ifDefined(this.ariaLabel)}"
+                         aria-labelledby="${when(!this.ariaLabel, () => "label")}"
                          aria-haspopup="listbox"
                          aria-expanded="${optionsDisplayed}"
+                         aria-activedescendant="${ifDefined(this.getOptionId(this.selectedOption))}"
                          role="combobox">
                         <ft-ripple ?disabled=${disabled} ?activated=${!this.outlined}></ft-ripple>
-                        <ft-typography variant="body1" class="ft-select--selected-option">
+                        <ft-typography variant="${FtTypographyVariants.body1}" class="ft-select--selected-option">
                             ${(_e = (_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : ""}
                         </ft-typography>
-                        <ft-icon>${optionsDisplayed ? "thin_arrow_up" : "thin_arrow"}</ft-icon>
+                        <ft-icon aria-hidden="true" .value=${optionsDisplayed ? FtIcons.THIN_ARROW_UP : FtIcons.THIN_ARROW}></ft-icon>
                     </div>
                     <div class="ft-select--options"
                          part="options"
                          @keydown=${this.onOptionsKeyDown}
-                         innerrole="listbox">
-                        ${repeat(this.options, (option) => option.value, (option) => this.renderOption(option))}
+                         role="listbox">
+                        ${repeat(this.options, (option) => option.value, (option, index) => this.renderOption(option, index))}
                     </div>
                 </div>
                 <slot name="helper" part="helper">
                     ${this.helper ? html `
-                        <ft-typography class="ft-select--helper-text" variant="caption">${this.helper}
+                        <ft-typography class="ft-select--helper-text" variant="${FtTypographyVariants.caption}">${this.helper}
                         </ft-typography>` : nothing}
                 </slot>
             </div>
@@ -119,7 +124,7 @@ class FtSelect extends FtLitElement {
             ></slot>
         `;
     }
-    renderOption(option) {
+    renderOption(option, index) {
         const selected = this.selectedOption === option;
         const classes = {
             "ft-select--option": true,
@@ -132,6 +137,7 @@ class FtSelect extends FtLitElement {
                  tabindex="0"
                  aria-label="${option.label}"
                  data-value="${option.value}"
+                 id="${"option-" + index}"
                  @keydown=${(e) => this.onOptionKeyDown(e, option)}
                  @click=${() => this.selectOption(option)}>
                 <ft-ripple ?primary=${selected} ?activated=${selected}></ft-ripple>
@@ -139,8 +145,8 @@ class FtSelect extends FtLitElement {
             </div>
         `;
     }
-    update(props) {
-        super.update(props);
+    willUpdate(props) {
+        super.willUpdate(props);
         if (props.has("options")) {
             this.selectedOption = this.options.filter((o) => o.selected)[0];
         }
@@ -265,6 +271,16 @@ class FtSelect extends FtLitElement {
             (_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
+    getOptionId(selectedOption) {
+        if (!selectedOption) {
+            return undefined;
+        }
+        const index = this.options.findIndex((o) => deepEqual(o.value, selectedOption.value));
+        if (index === -1) {
+            return undefined;
+        }
+        return `option-${index}`;
+    }
     selectOption(option) {
         var _a, _b;
         if (!deepEqual((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value, option.value)) {