WIP(ui5-tabcontainer): add focus handling for tabs

SAP · Apr 9, 2019 · c082004 · c082004
1 parent b71313c
commit c082004
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 36 deletions.
diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js
@@ -1,6 +1,5 @@
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
 import URI from "@ui5/webcomponents-base/src/types/URI";
-import Function from "@ui5/webcomponents-base/src/types/Function";
 import TabBase from "./TabBase";
 import TabTemplateContext from "./TabTemplateContext";
 import IconColor from "./types/IconColor";
@@ -89,15 +88,6 @@ const metadata = {
 			type: Boolean,
 			defaultValue: false,
 		},
-
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-		},
-
-		_getTabContainerHeaderItemCallback: {
-			type: Function,
-		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
 
@@ -135,16 +125,6 @@ class Tab extends TabBase {
 
 		super.define(...params);
 	}
-
-	getFocusDomRef() {
-		let focusedDomRef = super.getFocusDomRef();
-
-		if (this._getTabContainerHeaderItemCallback) {
-			focusedDomRef = this._getTabContainerHeaderItemCallback();
-		}
-
-		return focusedDomRef;
-	}
 }
 
 Bootstrap.boot().then(_ => {

diff --git a/packages/main/src/TabBase.js b/packages/main/src/TabBase.js
@@ -1,10 +1,19 @@
 import WebComponent from "@ui5/webcomponents-base/src/WebComponent";
+import Function from "@ui5/webcomponents-base/src/types/Function";
 
 /**
  * @public
  */
 const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.TabBase.prototype */{
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
+		},
+
+		_getTabContainerHeaderItemCallback: {
+			type: Function,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.TabBase.prototype */ {
 	},
@@ -25,6 +34,16 @@ class TabBase extends WebComponent {
 		return metadata;
 	}
 
+	getFocusDomRef() {
+		let focusedDomRef = super.getFocusDomRef();
+
+		if (this._getTabContainerHeaderItemCallback) {
+			focusedDomRef = this._getTabContainerHeaderItemCallback();
+		}
+
+		return focusedDomRef;
+	}
+
 	isSeparator() {
 		return false;
 	}

diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
@@ -8,11 +8,10 @@
 				{{#each renderItems}}
 					{{#unless this.isSeparator}}
 						<li class="{{this.headerItemClasses}}"
-							id="ui5-tc-headerItem-{{this.item._id}}"
+							id="{{this.item._id}}"
 							tabindex="{{this.item._tabIndex}}"
 							@click="{{../ctr._headerItem.click}}"
 							role="tab"
-							data-position="{{this.position}}"
 							aria-posinset="{{this.position}}"
 							aria-setsize="{{../renderItems.length}}"
 							aria-controls="ui5-tc-contentItem-{{this.position}}"
@@ -35,7 +34,12 @@
 						</li>
 					{{/unless}}
 					{{#if this.isSeparator}}
-						<li role="separator" class="{{../classes.separator}}"></li>
+						<li id="{{this._id}}"
+							tabindex="{{this._tabIndex}}"
+							role="separator"
+							class="{{../classes.separator}}"
+						>
+						</li>
 					{{/if}}
 				{{/each}}
 			</ul>
@@ -75,10 +79,9 @@
 		<ui5-list @itemPress="{{ctr._overflowList.click}}">
 			{{#each renderItems}}
 				{{#unless this.isSeparator}}
-					<ui5-li-custom id="{{this.id}}"
+					<ui5-li-custom id="{{this.item._id}}"
 						class="{{this.overflowItemClasses}}"
 						type="{{this.overflowItemState}}"
-						data-position="{{this.position}}"
 						selected="{{this.selected}}"
 						disabled="{{this.disabled}}"
 					>

diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
@@ -214,11 +214,9 @@ class TabContainer extends WebComponent {
 
 	onBeforeRendering() {
 		this.items.forEach(item => {
-			if (!item.isSeparator()) {
-				item._getTabContainerHeaderItemCallback = _ => {
-					return this.getDomRef().querySelector(`#ui5-tc-headerItem-${item._id}`);
-				};
-			}
+			item._getTabContainerHeaderItemCallback = _ => {
+				return this.getDomRef().querySelector(`#${item._id}`);
+			};
 		});
 	}
 
@@ -237,7 +235,7 @@ class TabContainer extends WebComponent {
 
 	_initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this.items.filter(item => !item.isSeparator());
+		this._itemNavigation.getItemsCallback = () => this.items;
 
 		this._delegates.push(this._itemNavigation);
 	}
@@ -251,16 +249,24 @@ class TabContainer extends WebComponent {
 	_onOverflowListItemSelect(event) {
 		this._onItemSelect(event.detail.item);
 		this._getPopover().close();
+		this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus();
 	}
 
 	_onItemSelect(target) {
-		const selectedIndex = parseInt(target.getAttribute("data-position")) - 1;
+		const selectedIndex = this.items.findIndex(item => item._id === target.id);
 		const currentSelectedTab = this.items[selectedIndex];
 
 		// update selected items
 		this.items.forEach((item, index) => {
-			item.selected = selectedIndex === index;
-		});
+			if (!item.isSeparator()) {
+				const selected = selectedIndex === index;
+				item.selected = selected;
+
+				if (selected) {
+					this._itemNavigation.current = index;
+				}
+			}
+		}, this);
 
 		// update collapsed state
 		if (!this.fixed) {

diff --git a/packages/main/src/TabContainerTemplateContext.js b/packages/main/src/TabContainerTemplateContext.js
@@ -48,7 +48,7 @@ class TabContainerTemplateContext {
 			const isSeparator = item.isSeparator();
 
 			if (isSeparator) {
-				return { isSeparator };
+				return { isSeparator, _tabIndex: item._tabIndex, _id: item._id };
 			}
 
 			return {

diff --git a/packages/main/src/themes-next/TabContainer.css b/packages/main/src/themes-next/TabContainer.css
@@ -74,7 +74,8 @@
 	opacity: 0.5;
 }
 
-.ui5-tc__headerItem:focus {
+.ui5-tc__headerItem:focus,
+.ui5-tc__separator:focus {
 	outline: none;
 }