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 @@
+
+