♿ a11y(bal-textarea & bal-date): add autocomplete attribute (#1539)

* Create PR for #1535 * fix(a11y): introduce autocomplete for bal-date and bal-textarea --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Marco Zirkenbach <[email protected]>
baloise · Dec 5, 2024 · 9e5ee7a · 9e5ee7a
1 parent 0b5db09
commit 9e5ee7a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/.changeset/nice-onions-greet.md b/.changeset/nice-onions-greet.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**text**: introduce autocomplete for bal-textarea
diff --git a/.changeset/red-peas-relate.md b/.changeset/red-peas-relate.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**date**: introduce autocomplete for bal-date
diff --git a/packages/core/src/components/bal-date/bal-date.tsx b/packages/core/src/components/bal-date/bal-date.tsx
@@ -101,6 +101,11 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
    */
   @Prop() closeOnSelect = true
 
+  /**
+   * Indicates whether the value of the control can be automatically completed by the browser.
+   */
+  @Prop() autocomplete: BalProps.BalInputAutocomplete = 'off'
+
   /**
    * The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).
    */
@@ -502,6 +507,7 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
             readonly={this.readonly}
             disabled={this.disabled}
             allowInvalidValue={this.allowInvalidValue}
+            autocomplete={this.autocomplete}
             onClick={this.onInputClick}
             onBalInput={this.onInputInput}
             onBalChange={this.onInputChange}

diff --git a/packages/core/src/components/bal-textarea/bal-textarea.tsx b/packages/core/src/components/bal-textarea/bal-textarea.tsx
@@ -62,6 +62,11 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
    */
   @Prop() autocapitalize = 'none'
 
+  /**
+   * Indicates whether the value of the control can be automatically completed by the browser.
+   */
+  @Prop() autocomplete: BalProps.BalInputAutocomplete = 'off'
+
   /**
    * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    */
@@ -297,6 +302,7 @@ export class Textarea implements ComponentInterface, FormInput<string | undefine
           readonly={this.readonly}
           required={this.required}
           autoCapitalize={this.autocapitalize}
+          autocomplete={this.autocomplete}
           autoFocus={this.autofocus}
           minLength={this.minLength}
           maxLength={this.maxLength}