diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index ffa989d20214..5f2387c0c067 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -337,6 +337,10 @@ class Tab extends UI5Element { labels.push(`${this._id}-icon`); } + if (this._designDescription) { + labels.push(`${this._id}-designDescription`); + } + return labels.join(" "); } @@ -395,6 +399,14 @@ class Tab extends UI5Element { } } + get _designDescription() { + if (this.design === SemanticColor.Default) { + return null; + } + + return this.design; + } + get semanticIconClasses() { const classes = ["ui5-tab-semantic-icon"]; diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs index 86c2b28c0057..f362ac188a45 100644 --- a/packages/main/src/TabInOverflow.hbs +++ b/packages/main/src/TabInOverflow.hbs @@ -4,7 +4,6 @@ type="{{this.overflowState}}" aria-disabled="{{this.effectiveDisabled}}" aria-selected="{{this.effectiveSelected}}" - aria-labelledby="{{this.ariaLabelledBy}}" ._realTab="{{this}}" style="{{this._style}}" > @@ -13,15 +12,18 @@ {{#if this.semanticIconName}} <ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon> {{/if}} - {{#if this.icon}} <ui5-icon name="{{this.icon}}"></ui5-icon> {{/if}} {{this.text}} - {{#if this.additionalText}} ({{this.additionalText}}) {{/if}} + {{#if this._designDescription}} + <div id="{{this._id}}-designDescription" class="ui5-hidden-text"> + {{this._designDescription}} + </div> + {{/if}} </div> </div> </ui5-li-custom> diff --git a/packages/main/src/TabInStrip.hbs b/packages/main/src/TabInStrip.hbs index 9cac8ccb16b9..d9bade6b9549 100644 --- a/packages/main/src/TabInStrip.hbs +++ b/packages/main/src/TabInStrip.hbs @@ -14,7 +14,13 @@ > {{#if this.icon}} <div class="ui5-tab-strip-item-icon-outer"> - <ui5-icon name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon> + <ui5-icon id="{{this._id}}-icon" name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon> + </div> + {{/if}} + + {{#if this._designDescription}} + <div id="{{this._id}}-designDescription" class="ui5-tab-strip-design-description"> + {{this._designDescription}} </div> {{/if}} diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css index 3d964ba3dcc0..ab3b675648bf 100644 --- a/packages/main/src/themes/TabInOverflow.css +++ b/packages/main/src/themes/TabInOverflow.css @@ -1,4 +1,5 @@ @import "./TabSemanticIcon.css"; +@import "./InvisibleTextStyles.css"; .ui5-tab-overflow-item { color: var(--_ui5_tc_overflowItem_default_color); diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 9f1a6b6f4bdc..68d6ec4080a4 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -28,7 +28,8 @@ .ui5-tc__separator[hidden], .ui5-tab-strip-item[hidden], .ui5-tab-strip-item--textOnly[hidden], -.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden] { +.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden], +.ui5-tab-strip-design-description { display: none; }