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}}