From 00bea109996edd079ab8ce560bbf2e932a3b8526 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov <teodor.taushanov@sap.com> Date: Mon, 26 Sep 2022 17:22:34 +0300 Subject: [PATCH 1/3] fix(ui5-tabcontainer): fixed tabs accessibility issues --- packages/main/src/Tab.js | 12 ++++++++++++ packages/main/src/TabInOverflow.hbs | 11 ++++++++--- packages/main/src/TabInStrip.hbs | 8 +++++++- packages/main/src/themes/TabInOverflow.css | 3 ++- packages/main/src/themes/TabInStrip.css | 3 ++- 5 files changed, 31 insertions(+), 6 deletions(-) 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..039c37795477 100644 --- a/packages/main/src/TabInOverflow.hbs +++ b/packages/main/src/TabInOverflow.hbs @@ -15,12 +15,17 @@ {{/if}} {{#if this.icon}} - <ui5-icon name="{{this.icon}}"></ui5-icon> + <ui5-icon id="{{this._id}}-icon" name="{{this.icon}}"></ui5-icon> {{/if}} - {{this.text}} + <span id="{{this._id}}-text">{{this.text}}</span> {{#if this.additionalText}} - ({{this.additionalText}}) + <span id="{{this._id}}-additionalText">({{this.additionalText}})</span> + {{/if}} + {{#if this._designDescription}} + <div id="{{this._id}}-designDescription" class="ui5-tab-overflow-design-description"> + {{this._designDescription}} + </div> {{/if}} </div> </div> 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..f46613b1fea4 100644 --- a/packages/main/src/themes/TabInOverflow.css +++ b/packages/main/src/themes/TabInOverflow.css @@ -9,7 +9,8 @@ opacity: var(--sapContent_DisabledOpacity); } -.ui5-tab-overflow-item[hidden] { +.ui5-tab-overflow-item[hidden], +.ui5-tab-overflow-design-description { display: none; } 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; } From f0434e3357cec431043a956c7c8e588fdb4e1bd7 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov <teodor.taushanov@sap.com> Date: Tue, 27 Sep 2022 09:58:38 +0300 Subject: [PATCH 2/3] fix(ui5-tabcontainer): fixed tabs accessibility issues --- packages/main/src/TabContainerPopover.hbs | 2 +- packages/main/src/TabInOverflow.hbs | 11 ++++------- packages/main/src/themes/TabInOverflow.css | 4 ++-- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs index b6234c095a71..f14225a52f76 100644 --- a/packages/main/src/TabContainerPopover.hbs +++ b/packages/main/src/TabContainerPopover.hbs @@ -7,7 +7,7 @@ _hide-header class="ui5-tab-container-responsive-popover" > - <ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}"> + <ui5-list separators="None" @ui5-item-click="{{_onOverflowListItemClick}}"> {{#each _overflowItems}} {{overflowPresentation}} {{/each}} diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs index 039c37795477..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,17 +12,15 @@ {{#if this.semanticIconName}} <ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon> {{/if}} - {{#if this.icon}} - <ui5-icon id="{{this._id}}-icon" name="{{this.icon}}"></ui5-icon> + <ui5-icon name="{{this.icon}}"></ui5-icon> {{/if}} - <span id="{{this._id}}-text">{{this.text}}</span> - + {{this.text}} {{#if this.additionalText}} - <span id="{{this._id}}-additionalText">({{this.additionalText}})</span> + ({{this.additionalText}}) {{/if}} {{#if this._designDescription}} - <div id="{{this._id}}-designDescription" class="ui5-tab-overflow-design-description"> + <div id="{{this._id}}-designDescription" class="ui5-hidden-text"> {{this._designDescription}} </div> {{/if}} diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css index f46613b1fea4..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); @@ -9,8 +10,7 @@ opacity: var(--sapContent_DisabledOpacity); } -.ui5-tab-overflow-item[hidden], -.ui5-tab-overflow-design-description { +.ui5-tab-overflow-item[hidden] { display: none; } From 1d80c9ce2d75f4f2b35f3382cd591052950d47c6 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov <teodor.taushanov@sap.com> Date: Tue, 27 Sep 2022 10:29:44 +0300 Subject: [PATCH 3/3] fix(ui5-tabcontainer): fixed tabs accessibility issues --- packages/main/src/TabContainerPopover.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs index f14225a52f76..b6234c095a71 100644 --- a/packages/main/src/TabContainerPopover.hbs +++ b/packages/main/src/TabContainerPopover.hbs @@ -7,7 +7,7 @@ _hide-header class="ui5-tab-container-responsive-popover" > - <ui5-list separators="None" @ui5-item-click="{{_onOverflowListItemClick}}"> + <ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}"> {{#each _overflowItems}} {{overflowPresentation}} {{/each}}