feat(ui5-panel): implement accessibility (#864)

Author: ivoplashkov

packages/main/src/Button.hbs

@@ -10,6 +10,9 @@
 		@click={{_onclick}}
 		@mousedown={{_onmousedown}}
 		tabindex={{tabIndexValue}}
+		aria-expanded="{{accInfo.ariaExpanded}}"
+		aria-controls="{{accInfo.ariaControls}}"
+		title="{{accInfo.title}}"
 	>
 		{{#if icon}}
 			<ui5-icon

packages/main/src/Button.js

@@ -295,6 +295,14 @@ class Button extends UI5Element {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}
 
+	get accInfo() {
+		return {
+			"ariaExpanded": this._buttonAccInfo && this._buttonAccInfo.ariaExpanded,
+			"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
+			"title": this._buttonAccInfo && this._buttonAccInfo.title,
+		};
+	}
+
 	static typeTextMappings() {
 		return {
 			"Positive": BUTTON_ARIA_TYPE_ACCEPT,

packages/main/src/Panel.hbs

@@ -4,24 +4,26 @@
 	role="{{accRole}}"
 >
 	<!-- header: either header or h1 with header text -->
-	<header
+	<div
 		@click="{{_headerClick}}"
 		@keydown="{{_headerKeyDown}}"
 		@keyup="{{_headerKeyUp}}"
 		class="ui5-panel-header"
 		tabindex="{{headerTabIndex}}"
+		role="{{accInfo.role}}"
+		aria-expanded="{{accInfo.ariaExpanded}}"
+		aria-controls="{{accInfo.ariaControls}}"
 	>
 		<div
 			class="ui5-panel-header-button-root"
 		>
 			<ui5-button
 				design="Transparent"
 				class="ui5-panel-header-button"
-				aria-expanded="{{expanded}}"
+				icon="sap-icon://navigation-right-arrow"
 				?non-focusable="{{nonFocusableButton}}"
 				@click="{{_toggleButtonClick}}"
-				icon="sap-icon://navigation-right-arrow"
-				title="{{toggleButtonTitle}}"
+				._buttonAccInfo="{{accInfo.button}}"
 			></ui5-button>
 		</div>
 
@@ -32,10 +34,10 @@
 				<h1 class="ui5-panel-header-title">{{headerText}}</h1>
 			</div>
 		{{/if}}
-	</header>
+	</div>
 
 	<!-- content area -->
-	<div class="ui5-panel-content" tabindex="-1" style="{{styles.content}}">
+	<div class="ui5-panel-content" id="{{_id}}-content" tabindex="-1" style="{{styles.content}}">
 		<slot></slot>
 	</div>
 </div>

packages/main/src/Panel.js

@@ -104,7 +104,6 @@ const metadata = {
 		_hasHeader: {
 			type: Boolean,
 		},
-
 		_header: {
 			type: Object,
 		},
@@ -116,6 +115,9 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+		_buttonAccInfo: {
+			type: Object,
+		},
 	},
 	events: {
 
@@ -310,6 +312,19 @@ class Panel extends UI5Element {
 		return this.accessibleRole.toLowerCase();
 	}
 
+	get accInfo() {
+		return {
+			"button": {
+				"ariaExpanded": this._hasHeader ? this.expanded : undefined,
+				"ariaControls": this._hasHeader ? `${this._id}-content` : undefined,
+				"title": this.toggleButtonTitle,
+			},
+			"ariaExpanded": !this._hasHeader ? this.expanded : undefined,
+			"ariaControls": !this._hasHeader ? `${this._id}-content` : undefined,
+			"role": !this._hasHeader ? "button" : undefined,
+		};
+	}
+
 	get headerTabIndex() {
 		return (this.header.length || this.fixed) ? "-1" : "0";
 	}

packages/main/test/specs/Panel.spec.js

@@ -34,4 +34,31 @@ describe("Panel general interaction", () => {
 
 		assert.strictEqual(field.getProperty("value"), "3", "Press should be called 3 times");
 	});
+
+	describe("Accessibility", () => {
+
+		it("tests whether aria attributes are set correctly with native header", () => {
+			const header = browser.$("#panel1").shadow$(".ui5-panel-header");
+			const button = browser.$("#panel1").shadow$(".ui5-panel-header-button");
+
+			assert.ok(!button.getAttribute("aria-expanded"), "aria-expanded shouldn't be set on the button");
+			assert.ok(!button.getAttribute("aria-controls"), "aria-controls shouldn't be set on the button");
+			assert.ok(!button.getAttribute("title"), "title shouldn't be set on the button");
+
+			assert.ok(header.getAttribute("aria-expanded"), "aria-expanded should be set on the header");
+			assert.ok(header.getAttribute("aria-controls"), "aria-controls should be set on the header");
+		});
+
+		it("tests whether aria attributes are set correctly in case of custom header", () => {
+			const button = browser.$("#panel2").shadow$(".ui5-panel-header-button").shadow$(".ui5-button-root");
+			const header = browser.$("#panel2").shadow$(".ui5-panel-header");
+
+			assert.ok(!header.getAttribute("aria-expanded"), "aria-expanded shouldn't be set on the header");
+			assert.ok(!header.getAttribute("aria-controls"), "aria-controls shouldn't be set on the header");
+
+			assert.ok(button.getAttribute("aria-expanded"), "aria-expanded should be set on the button");
+			assert.ok(button.getAttribute("aria-controls"), "aria-controls should be set on the button");
+			assert.ok(button.getAttribute("title"), "title should be set on the button");
+		});
+	});
 });