feat(ui5-tabcontainer): update ACC of header and content (#756)

Author: tsanislavgatev

packages/main/src/TabContainer.hbs

@@ -3,7 +3,7 @@
 	dir="{{rtl}}"
 >
 	<div class="{{classes.header}}" id="{{_id}}-header">
-		<ui5-icon @click="{{_onHeaderBackArrowClick}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
+		<ui5-icon @click="{{_onHeaderBackArrowClick}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1" accessible-name="{{previousIconACCName}}" show-tooltip></ui5-icon>
 
 		<!-- tab items -->
 		<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
@@ -45,7 +45,7 @@
 			</ul>
 		</div>
 
-		<ui5-icon @click="{{_onHeaderForwardArrowClick}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
+		<ui5-icon @click="{{_onHeaderForwardArrowClick}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1" accessible-name="{{nextIconACCName}}" show-tooltip></ui5-icon>
 
 		<!-- overflow button -->
 		{{#if showOverflow}}
@@ -54,6 +54,7 @@
 				class="{{classes.overflowButton}}"
 				icon="sap-icon://slim-arrow-down"
 				type="Transparent"
+				title="{{overflowMenuTitle}}"
 			></ui5-button>
 		{{/if}}
 	</div>
@@ -62,7 +63,7 @@
 	<div class="{{classes.content}}">
 		{{#each renderItems}}
 			{{#unless this.isSeparator}}
-				<div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}" ?hidden="{{this.hidden}}">
+				<div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}" ?hidden="{{this.hidden}}" role="tabpanel" aria-labelledby="{{item._id}}">
 					<slot name="{{this.item._individualSlot}}"></slot>
 				</div>
 			{{/unless}}

packages/main/src/TabContainer.js

@@ -5,6 +5,8 @@ import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnable
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE } from "./generated/i18n/i18n-defaults.js";
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
 import Button from "./Button.js";
 import CustomListItem from "./CustomListItem.js";
@@ -176,6 +178,8 @@ class TabContainer extends UI5Element {
 
 		// Init ItemNavigation
 		this._initItemNavigation();
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -391,6 +395,18 @@ class TabContainer extends UI5Element {
 		return this.items.some(item => item.icon) && this.items.some(item => item.text);
 	}
 
+	get previousIconACCName() {
+		return this.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
+	}
+
+	get nextIconACCName() {
+		return this.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
+	}
+
+	get overflowMenuTitle() {
+		return this.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
+	}
+
 	get rtl() {
 		return getRTL() ? "rtl" : undefined;
 	}
@@ -402,6 +418,7 @@ class TabContainer extends UI5Element {
 			Icon.define(),
 			List.define(),
 			Popover.define(),
+			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 
 		super.define(...params);

packages/main/src/i18n/messagebundle.properties

@@ -229,6 +229,15 @@ SWITCH_ON=On
 #XACT: ARIA announcement for the switch off
 SWITCH_OFF=Off
 
+#XACT: ACC next icon name in tab container 
+TABCONTAINER_NEXT_ICON_ACC_NAME=Next
+
+#XACT: ACC previous icon name in tab container
+TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Previous
+
+#XACT: ACC overflow menu title in tab container
+TABCONTAINER_OVERFLOW_MENU_TITLE=Overflow Menu
+
 #XTXT: Text for characters left
 TEXTAREA_CHARACTERS_LEFT={0} characters remaining