fix: reverted to ariaDetailedId + description added to storybook

telekom · Sep 19, 2024 · 52e6421 · 52e6421
1 parent 2e57f88
commit 52e6421
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
@@ -1,15 +1,13 @@
 # scale-text-field
 
-
-
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
 | Property                 | Attribute                 | Description                                                                                                      | Type                                                                                                                                     | Default           |
 | ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `ariaDetailsId`          | `aria-details-id`         | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                                                                                                 | `undefined`       |
+| `ariaDetailedId`         | `aria-detailed-id`        | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                                                                                                 | `undefined`       |
 | `counter`                | `counter`                 | (optional) Input counter                                                                                         | `boolean`                                                                                                                                | `undefined`       |
 | `disabled`               | `disabled`                | (optional) Input disabled                                                                                        | `boolean`                                                                                                                                | `undefined`       |
 | `experimentalControlled` | `experimental-controlled` | (optional)) Makes type `input` behave as a controlled component in React                                         | `boolean`                                                                                                                                | `false`           |

diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx
@@ -106,7 +106,7 @@ export class TextField {
   /** (optional) custom value for autocomplete HTML attribute */
   @Prop() inputAutocomplete?: string;
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
-  @Prop() ariaDetailsId?: string;
+  @Prop() ariaDetailedId?: string;
   /** (optional) to avoid displaying the label */
   @Prop() hideLabelVisually?: boolean = false;
   /** (optional) Injected CSS styles */
@@ -233,9 +233,9 @@ export class TextField {
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = {
       'aria-describedBy':
-        (this.helperText && helperTextId) || this.ariaDetailsId,
+        (this.helperText && helperTextId) || this.ariaDetailedId,
     };
-    const ariaDetailsAttr = { 'aria-details': this.ariaDetailsId };
+    const ariaDetailsAttr = { 'aria-details': this.ariaDetailedId };
     const numericTypes = [
       'number',
       'date',
@@ -279,10 +279,10 @@ export class TextField {
             readonly={this.readonly}
             autocomplete={this.inputAutocomplete}
             {...ariaInvalidAttr}
-            {...(this.helperText || this.ariaDetailsId
+            {...(this.helperText || this.ariaDetailedId
               ? ariaDescribedByAttr
               : {})}
-            {...(this.helperText && this.ariaDetailsId ? ariaDetailsAttr : {})}
+            {...(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
@@ -32,13 +32,13 @@
     <scale-text-field
       label="Label"
       placeholder="this is the placeholder"
-      aria-details-id="extra"
+      aria-detailed-id="extra"
     ></scale-text-field>
     <scale-text-field
       label="Label"
       placeholder="this is the placeholder"
       helper-text="some helper text"
-      aria-details-id="extra"
+      aria-detailed-id="extra"
     ></scale-text-field>
     <div id="extra">some extra desc</div>
   </body>

diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
@@ -18,7 +18,7 @@
     :counter="counter"
     :size="size"
     :value="value"
-    :aria-details-id="ariaDetailsId"
+    :aria-detailed-id="ariaDetailedId"
     :input-id="inputId"
     :input-autofocus="inputAutofocus"
     :input-autocomplete="inputAutocomplete"
@@ -57,7 +57,7 @@ export default {
     counter: { type: Boolean },
     size: { type: String },
     value: { type: String },
-    ariaDetailsId: { type: String },
+    ariaDetailedId: { type: String },
     inputId: { type: String },
     inputAutofocus: { type: Boolean },
     inputAutocomplete: { type: String },

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 },
+    },
   }}
 />
 
@@ -89,7 +96,7 @@ export const Template = (args, { argTypes }) => ({
       :required="required"
       :counter="counter"
       :value="value"
-      :aria-details-id="ariaDetailsId"
+      :aria-detailed-id="ariaDetailedId"
       :input-id="inputId"
       :input-autofocus="inputAutofocus"
       :input-autocomplete="inputAutocomplete"