@fluid-topics/ft-combobox 1.3.59 → 1.3.62

package/build/ft-combobox.js

@@ -4,21 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { html, nothing, } from "lit";
+import { property, query, state, } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
-import { Debouncer, FtLitElement, numberProperty, screenReaderStyles } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, FtLitElement, numberProperty, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-combobox.styles";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtTypography, FtTypographyBody1, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyBody1, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { FtChip } from "@fluid-topics/ft-chip";
 import { withI18n } from "@fluid-topics/ft-i18n";
-import { comboboxContext, defaultComboboxMessages } from "./ComboboxMessages";
+import { comboboxContext, defaultComboboxMessages, } from "./ComboboxMessages";
 class FtCombobox extends withI18n(FtLitElement) {
     get value() {
         return this._value || "";
@@ -248,6 +248,8 @@ class FtCombobox extends withI18n(FtLitElement) {
                             aria-controls="combobox-listbox"
                             aria-activedescendant="${this.getActiveDescendantId()}"
                             aria-label="${ifDefined(this.label)}"
+                            aria-describedby="${ifDefined(this.helper ? "helper" : undefined)}"
+                            aria-invalid="${this.error}"
                             name="${ifDefined(this.name)}"
                             maxlength="${ifDefined(this.maxLength)}"
                             ?disabled=${this.disabled}
@@ -277,7 +279,7 @@ class FtCombobox extends withI18n(FtLitElement) {
 
                 </div>
                 ${this.helper ? html `
-                    <ft-typography class="ft-combobox--helper-text" variant="caption">
+                    <ft-typography class="ft-combobox--helper-text" variant="caption" id="helper" role="alert">
                         ${this.helper}
                     </ft-typography>
                 ` : nothing}