From 270654297695571068c894aee30178729f361833 Mon Sep 17 00:00:00 2001 From: tshimber <110041439+tshimber@users.noreply.github.com> Date: Thu, 19 Sep 2024 12:32:15 +0200 Subject: [PATCH] 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 --- .../src/components/text-field/readme.md | 2 - .../src/components/text-field/text-field.tsx | 13 ++++-- packages/components/src/html/text-field.html | 45 +++++++++++++++++++ .../components/text-field/ScaleTextField.vue | 2 +- .../text-field/TextField.stories.mdx | 43 +++++++++++------- 5 files changed, 83 insertions(+), 22 deletions(-) create mode 100644 packages/components/src/html/text-field.html diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md index b3cec4f037..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 - - diff --git a/packages/components/src/components/text-field/text-field.tsx b/packages/components/src/components/text-field/text-field.tsx index 4408dcb8be..29726f4def 100644 --- 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 new file mode 100644 index 0000000000..0f342c8158 --- /dev/null +++ b/packages/components/src/html/text-field.html @@ -0,0 +1,45 @@ + + + + + + Stencil Component Starter + + + + + + + + + + +
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 b57337688d..740f57ff13 100644 --- 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 index a989a68f21..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 }, + }, }} /> @@ -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);