aria details vs aria describedby fixed for text field (#2352)

* refactor: aria details vs aria describedby fixed for text field * fix: reverted to ariaDetailedId + description added to storybook
telekom · Sep 19, 2024 · 2706542 · 2706542
1 parent 8681ed8
commit 2706542
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 22 deletions.
diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
@@ -1,7 +1,5 @@
 # scale-text-field
 
-
-
 <!-- Auto Generated Below -->
 
 

diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -231,8 +231,11 @@ export class TextField {
     const ariaInvalidAttr =
       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 };
+    const ariaDescribedByAttr = {
+      'aria-describedBy':
+        (this.helperText && helperTextId) || this.ariaDetailedId,
+    };
+    const ariaDetailsAttr = { 'aria-details': this.ariaDetailedId };
     const numericTypes = [
       'number',
       'date',
@@ -275,9 +278,11 @@ export class TextField {
             disabled={this.disabled}
             readonly={this.readonly}
             autocomplete={this.inputAutocomplete}
-            {...ariaDetailedById}
             {...ariaInvalidAttr}
-            {...(this.helperText ? ariaDescribedByAttr : {})}
+            {...(this.helperText || this.ariaDetailedId
+              ? ariaDescribedByAttr
+              : {})}
+            {...(this.helperText && this.ariaDetailedId ? ariaDetailsAttr : {})}
             {...(numericTypes.includes(this.type) ? { step: this.step } : {})}
           />
           {(!!this.helperText || !!this.counter) && (

diff --git a/packages/components/src/html/text-field.html b/packages/components/src/html/text-field.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style type="text/css" media="screen, print">
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 4rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <scale-text-field
+      label="Label"
+      placeholder="this is the placeholder"
+      helper-text="some helper text"
+    ></scale-text-field>
+    <scale-text-field
+      label="Label"
+      placeholder="this is the placeholder"
+      aria-detailed-id="extra"
+    ></scale-text-field>
+    <scale-text-field
+      label="Label"
+      placeholder="this is the placeholder"
+      helper-text="some helper text"
+      aria-detailed-id="extra"
+    ></scale-text-field>
+    <div id="extra">some extra desc</div>
+  </body>
+</html>
diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
@@ -62,7 +62,7 @@ export default {
     inputAutofocus: { type: Boolean },
     inputAutocomplete: { type: String },
     experimentalControlled: { type: Boolean },
-    hideLabelVisually: {type: Boolean, default: false},
+    hideLabelVisually: { type: Boolean, default: false },
     styles: { type: String },
   },
   methods: {

diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
@@ -60,6 +60,13 @@ export const ICON =
       description: `(optional) DEPRECATED - css overwrite should replace size`,
       control: { type: null },
     },
+    ariaDetailedId: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: `(optional) Id of the element with additional information, will be used as aria-details. In case helperText is not provided, will be used as aria-describedBy`,
+      control: { type: null },
+    },
   }}
 />
 
@@ -184,24 +191,30 @@ export const StorySectionsTemplate = (args, { argTypes }) => ({
 
 ```css
 scale-text-field {
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --transition: all var(--telekom-motion-duration-transition) var(
+      --telekom-motion-easing-standard
+    );
   --radius: var(--telekom-radius-standard);
-  --border: var(--telekom-spacing-composition-space-01) solid
-    var(--telekom-color-ui-border-standard);
-  --border-error: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-danger-standard);
-  --border-success: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-success-standard);
-  --border-warning: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-warning-standard);
+  --border: var(--telekom-spacing-composition-space-01) solid var(
+      --telekom-color-ui-border-standard
+    );
+  --border-error: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-danger-standard
+    );
+  --border-success: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-success-standard
+    );
+  --border-warning: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-warning-standard
+    );
   --border-color-hover: var(--telekom-color-ui-border-hovered);
   --border-color-focus: var(--telekom-color-ui-border-hovered);
   --border-color-disabled: var(--telekom-color-ui-border-disabled);
   --background-color-hover: var(--telekom-color-ui-state-fill-hovered);
   --background-color-disabled: none;
-  --focus-outline: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-focus-standard);
+  --focus-outline: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-focus-standard
+    );
   --height: 44px;
   --spacing-x: var(--telekom-spacing-composition-space-05);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
@@ -218,9 +231,9 @@ scale-text-field {
   --color-meta-error: var(--telekom-color-text-and-icon-functional-danger);
 
   /* control */
-  --spacing-control: 1.125rem
-    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem
-    calc(0.75rem - var(--telekom-spacing-composition-space-01));
+  --spacing-control: 1.125rem calc(
+      2rem - var(--telekom-spacing-composition-space-01)
+    ) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
   --transition-control: var(--transition);
   --background-control: var(--telekom-color-ui-state-fill-standard);
   --margin-bottom-control: var(--telekom-spacing-composition-space-03);