diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs index 037c020cf868..ec6350518e77 100644 --- a/packages/main/src/Card.hbs +++ b/packages/main/src/Card.hbs @@ -2,6 +2,7 @@ class="{{classes.main}}" dir="{{effectiveDir}}" role="region" + aria-label="{{ariaLebelText}}" aria-labelledby="{{_id}}-desc {{_id}}-heading"> {{#if hasHeader}}
ui5-card + * + * @type {String} + * @since 1.0.0-rc.9 + * @private + * @defaultvalue "" + */ + ariaLabel: { + type: String, + }, + + /** + * Receives id(or many ids) of the elements that label the ui5-card + * + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.9 + */ + ariaLabelledby: { + type: String, + defaultValue: "", + }, + _headerActive: { type: Boolean, noAttribute: true, @@ -212,6 +238,10 @@ class Card extends UI5Element { return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar); } + get ariaLebelText() { + return getEffectiveAriaLabelText(this); + } + get ariaCardRoleDescription() { return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD); } diff --git a/packages/main/test/pages/Card.html b/packages/main/test/pages/Card.html index f6f60564b207..efb7d5238752 100644 --- a/packages/main/test/pages/Card.html +++ b/packages/main/test/pages/Card.html @@ -102,6 +102,25 @@ +

Test ariaLabel and ariaLabelledBy

+ + + +
+ info text + + + +