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

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";
 
@@ -63,11 +74,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 +108,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);
 
@@ -105,24 +128,59 @@ class ProductSwitch extends UI5Element {
 
 	onBeforeRendering() {
 		this.desktopColumns = this.items.length > 6 ? 4 : 3;
+
+		this.items.forEach(item => {
+			item._accInfo = {
+				role: "listitem",
+			};
+		});
 	}
 
 	_handleResize() {
 		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);
+		}
+
+		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="{{_accInfo.role}}"
 		class="ui5-product-switch-item-root"
 		data-sap-focus-ref
 		@focusout="{{_onfocusout}}"

packages/fiori/src/ProductSwitchItem.js

@@ -102,6 +102,10 @@ const metadata = {
 			defaultValue: "-1",
 			noAttribute: true,
 		},
+
+		_accInfo: {
+			type: Object,
+		},
 	},
 	slots: /** @lends  sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
 	},

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");
+		})
+	});
+});