feat(ui5-product-switch): Implement accessibility specification (#2865)

FIXES: #2707

Author: dobrinyonkov

packages/fiori/src/ProductSwitch.hbs

@@ -1,3 +1,3 @@
-<div class="ui5-product-switch-root" @focusin={{_onfocusin}}>
+<div class="ui5-product-switch-root" role="list" aria-label="{{_ariaLabelText}}" @focusin={{_onfocusin}} @keydown={{_onkeydown}}>
 	<slot></slot>
 </div>

packages/fiori/src/ProductSwitch.js

@@ -1,11 +1,22 @@
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import {
+	isDown,
+	isUp,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+
 import ProductSwitchTemplate from "./generated/templates/ProductSwitchTemplate.lit.js";
 
+import {
+	PRODUCT_SWITCH_CONTAINER_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
 
@@ -46,6 +57,20 @@ const metadata = {
  * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
  * and allows the user to easily switch between products.
  * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
+ * <li>[UP/DOWN] - Navigates up and down the items </li>
+ * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
+ * </ul>
+ * <br>
+ * <br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
  * <br>
@@ -63,11 +88,15 @@ class ProductSwitch extends UI5Element {
 	constructor() {
 		super();
 
+		this._currentIndex = 0;
+		this._rowSize = 4;
+
 		this._itemNavigation = new ItemNavigation(this, {
-			rowSize: 4,
-			behavior: ItemNavigationBehavior.Cyclic,
+			rowSize: this._rowSize,
 			getItemsCallback: () => this.items,
 		});
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -93,6 +122,14 @@ class ProductSwitch extends UI5Element {
 		};
 	}
 
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	get _ariaLabelText() {
+		return this.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL);
+	}
+
 	onEnterDOM() {
 		this._handleResizeBound = this._handleResize.bind(this);
 
@@ -111,18 +148,45 @@ class ProductSwitch extends UI5Element {
 		const documentWidth = document.body.clientWidth;
 
 		if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
-			this._itemNavigation.setRowSize(1);
+			this._setRowSize(1);
 		} else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
-			this._itemNavigation.setRowSize(3);
+			this._setRowSize(3);
 		} else {
-			this._itemNavigation.setRowSize(4);
+			this._setRowSize(4);
 		}
 	}
 
 	_onfocusin(event) {
 		const target = event.target;
 
 		this._itemNavigation.setCurrentItem(target);
+		this._currentIndex = this.items.indexOf(target);
+	}
+
+	_setRowSize(size) {
+		this._rowSize = size;
+		this._itemNavigation.setRowSize(size);
+	}
+
+	_onkeydown(event) {
+		if (isDown(event)) {
+			this._handleDown(event);
+		} else if (isUp(event)) {
+			this._handleUp(event);
+		}
+	}
+
+	_handleDown(event) {
+		const itemsLength = this.items.length;
+		if (this._currentIndex + this._rowSize > itemsLength) { // border reached, do nothing
+			event.stopPropagation();
+		}
+	}
+
+	_handleUp(event) {
+		if (this._currentIndex - this._rowSize < 0) { // border reached, do nothing
+			event.stopPropagation();
+		}
 	}
 }
 

packages/fiori/src/ProductSwitchItem.hbs

@@ -13,6 +13,7 @@
 	</a>
 {{else}}
 	<div
+		role="listitem"
 		class="ui5-product-switch-item-root"
 		data-sap-focus-ref
 		@focusout="{{_onfocusout}}"

packages/fiori/src/ProductSwitchItem.js

@@ -126,6 +126,17 @@ const metadata = {
  * <br><br>
  * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.
  * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
  *

packages/fiori/src/i18n/messagebundle.properties

@@ -123,6 +123,9 @@ SHELLBAR_PROFILE = Profile
 #XACT: ARIA announcement for the products button
 SHELLBAR_PRODUCTS = Products
 
+#XACT: ARIA announcement of ProductSwitch container
+PRODUCT_SWITCH_CONTAINER_LABEL=Products
+
 #XACT: ARIA announcement for the search button
 SHELLBAR_SEARCH = Search
 

packages/fiori/test/specs/ProductSwitch.spec.js

@@ -18,3 +18,27 @@ describe("ProductSwitch general interaction", () => {
 		assert.strictEqual(threeColumnPSItemCount <= 6, threeColumnPSAttrValue === 3, "product switch should have 3 columns.");
 	});
 });
+
+describe("ARIA attributes", () => {
+	before(() => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/ProductSwitch.html`);
+	});
+
+	it ("role and aria-label set correctly", () => {
+		const productSwitch = $("#productSwitchFourColumn");
+		const productSwitchRoot = productSwitch.shadow$(".ui5-product-switch-root");
+
+		assert.strictEqual(productSwitchRoot.getAttribute("role"), "list", "should have role list");
+		assert.strictEqual(productSwitchRoot.getAttribute("aria-label"), "Products", "aria-label reference is correct");
+	});
+
+	it ("items attributes set correctly", () => {
+		let items = $$("#productSwitchThreeColumn > ui5-product-switch-item");
+
+		items.forEach(item => {
+			const itemDom = item.shadow$(".ui5-product-switch-item-root");
+			
+			assert.strictEqual(itemDom.getAttribute("role"), "listitem", "should have role list");
+		})
+	});
+});