diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs index 661efd27a569..c5418470ab01 100644 --- a/packages/main/src/TextArea.hbs +++ b/packages/main/src/TextArea.hbs @@ -24,8 +24,8 @@ ?readonly="{{readonly}}" ?required="{{required}}" aria-required="{{required}}" - aria-labelledby={{ariaLabelledBy}} - aria-describedby={{ariaDescribedBy}} + aria-label="{{ariaLabelText}}" + aria-describedby="{{ariaDescribedBy}}" maxlength="{{_exceededTextProps.calcedMaxLength}}" .value="{{value}}" @input="{{_oninput}}" @@ -39,7 +39,7 @@ {{> afterTextarea}} {{#if showExceededText}} - {{_exceededTextProps.exceededText}} + {{_exceededTextProps.exceededText}} {{/if}} {{#if hasValueState}} diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js index 2a6d5a5fc4e0..eb3fbd0a3c71 100644 --- a/packages/main/src/TextArea.js +++ b/packages/main/src/TextArea.js @@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; @@ -209,6 +210,31 @@ const metadata = { type: String, }, + /** + * Defines the aria-label attribute for the textarea. + * + * @type {String} + * @since 1.0.0-rc.9 + * @private + * @defaultvalue "" + */ + ariaLabel: { + type: String, + }, + + + /** + * Receives id(or many ids) of the elements that label the textarea. + * + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.9 + */ + ariaLabelledby: { + type: String, + }, + /** * @private */ @@ -539,8 +565,18 @@ class TextArea extends UI5Element { return this.disabled ? undefined : "0"; } - get ariaLabelledBy() { - return this.showExceededText ? `${this._id}-exceededText` : undefined; + get ariaLabelText() { + const effectiveAriaLabelText = getEffectiveAriaLabelText(this); + + if (this.showExceededText) { + if (effectiveAriaLabelText) { + return `${effectiveAriaLabelText} ${this._exceededTextProps.exceededText}`; + } + + return this._exceededTextProps.exceededText; + } + + return effectiveAriaLabelText; } get ariaDescribedBy() { diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html index aadc309b2cb7..1884155a7d46 100644 --- a/packages/main/test/pages/TextArea.html +++ b/packages/main/test/pages/TextArea.html @@ -199,6 +199,12 @@ +
+ info text + + +
+