From 52e642115ae734b26ddcb157d37dd4357136eb61 Mon Sep 17 00:00:00 2001 From: tshimber Date: Thu, 19 Sep 2024 11:30:57 +0200 Subject: [PATCH] fix: reverted to ariaDetailedId + description added to storybook --- .../components/src/components/text-field/readme.md | 4 +--- .../src/components/text-field/text-field.tsx | 10 +++++----- packages/components/src/html/text-field.html | 4 ++-- .../stories/components/text-field/ScaleTextField.vue | 4 ++-- .../components/text-field/TextField.stories.mdx | 9 ++++++++- 5 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md index e8dd5f6096..49accdaec3 100644 --- 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 - - @@ -9,7 +7,7 @@ | 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 index 9827966405..29726f4def 100644 --- 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 index ac02bb18a4..0f342c8158 100644 --- a/packages/components/src/html/text-field.html +++ b/packages/components/src/html/text-field.html @@ -32,13 +32,13 @@
some extra desc
diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue index bbc39eabfe..740f57ff13 100644 --- 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 index 1f673af70e..1a2f740c47 100644 --- 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"