@momentum-design/components 0.120.35 → 0.120.36

package/dist/components/input/input.component.d.ts

@@ -132,6 +132,12 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @default ''
      */
     clearAriaLabel: string;
+    /**
+     * Defines a id pointing to the element which describes the input element.
+     * The AriaDescribedby attribute to be set for accessibility.
+     * @default null
+     */
+    dataAriaDescribedby: string | null;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /** @internal */

package/dist/components/input/input.component.js

@@ -111,6 +111,12 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
          * @default ''
          */
         this.clearAriaLabel = '';
+        /**
+         * Defines a id pointing to the element which describes the input element.
+         * The AriaDescribedby attribute to be set for accessibility.
+         * @default null
+         */
+        this.dataAriaDescribedby = null;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -300,7 +306,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     `;
     }
     renderInputElement(type, hidePlaceholder = false) {
-        var _a;
+        var _a, _b;
         const placeholderText = hidePlaceholder ? '' : this.placeholder;
         return html `<input
       aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
@@ -312,7 +318,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
       ?readonly="${this.readonly}"
       ?required="${this.required}"
       type="${type}"
-      aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+      aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : ((_b = this.dataAriaDescribedby) !== null && _b !== void 0 ? _b : ''))}"
       aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
       placeholder=${ifDefined(placeholderText)}
       minlength=${ifDefined(this.minlength)}
@@ -396,4 +402,8 @@ __decorate([
     property({ type: String, attribute: 'clear-aria-label' }),
     __metadata("design:type", Object)
 ], Input.prototype, "clearAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-aria-describedby' }),
+    __metadata("design:type", Object)
+], Input.prototype, "dataAriaDescribedby", void 0);
 export default Input;