fix: set aria-invalid true when invalid (#2168)

* fix: set aria-invalid true when invalid
telekom · Nov 3, 2023 · 90b8bb9 · 90b8bb9
1 parent 7b4a6b5
commit 90b8bb9
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 8 deletions.
diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
@@ -188,7 +188,7 @@ export class Checkbox {
           indeterminate={this.indeterminate}
           aria-label={this.ariaLabelCheckbox}
           aria-checked={this.indeterminate ? 'mixed' : false}
-          aria-invalid={this.status === 'error' || this.invalid}
+          aria-invalid={this.status === 'error' || this.invalid ? 'true' : null}
           aria-describedBy={helperText.id}
           disabled={this.disabled}
           required={this.required}

diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx
@@ -240,7 +240,7 @@ export class Dropdown {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 

diff --git a/packages/components/src/components/input/__snapshots__/input.spec.ts.snap b/packages/components/src/components/input/__snapshots__/input.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`Input props should reflect attributes 1`] = `
       label
     </label>
     <div class="input__select-wrapper">
-      <select aria-describedby="helper-message-13" aria-invalid="" class="input__select" id="input-13" name="name" required="" value=""></select>
+      <select aria-describedby="helper-message-13" aria-invalid="true" class="input__select" id="input-13" name="name" required="" value=""></select>
     </div>
     <div aria-live="polite" aria-relevant="additions removals" class="input__meta" id="helper-message-13">
       <div class="input__helper-text">

diff --git a/packages/components/src/components/input/input.tsx b/packages/components/src/components/input/input.tsx
@@ -307,7 +307,7 @@ export class Input {
     const Tag = this.type === 'textarea' ? 'textarea' : 'input';
 
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 

diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
@@ -122,7 +122,7 @@ export class RadioButton {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 

diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -229,7 +229,7 @@ export class TextField {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
     const ariaDetailedById = { 'aria-details': this.ariaDetailedId };

diff --git a/packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap b/packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap
@@ -19,7 +19,7 @@ exports[`Textarea should match snapshot -> helpertext 1`] = `
 <scale-textarea helper-text="helpertext" invalid="true">
   <div class="textarea textarea--status-error textarea--variant-informational">
     <div class="textarea__wrapper">
-      <label class="textarea__label" htmlfor="input-textarea-1"></label><textarea aria-describedby="helper-message-1" aria-invalid="" class="textarea__control" id="input-textarea-1" value=""></textarea>
+      <label class="textarea__label" htmlfor="input-textarea-1"></label><textarea aria-describedby="helper-message-1" aria-invalid="true" class="textarea__control" id="input-textarea-1" value=""></textarea>
     </div>
     <div aria-live="polite" aria-relevant="additions removals" class="textarea__meta" id="helper-message-1">
       <scale-helper-text helpertext="helpertext" variant="danger"></scale-helper-text>

diff --git a/packages/components/src/components/textarea/textarea.tsx b/packages/components/src/components/textarea/textarea.tsx
@@ -171,7 +171,7 @@ export class Textarea {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
     const readonlyAttr = this.readonly ? { readonly: 'readonly' } : {};