feat(ui5-panel): make the header clickable (#204)

Author: ilhan007

packages/main/src/Panel.hbs

@@ -8,12 +8,12 @@
 	{{#if ctr.fixed}}
 		{{> header}}
 	{{else}}
-		<header class="{{classes.header}}">
+		<header @click="{{ctr._header.press}}" class="{{classes.header}}" tabindex="{{headerTabIndex}}">
 			<ui5-icon
 				class="{{classes.icon}}"
 				src="{{ctr._icon.src}}"
 				title="{{ctr._icon.title}}"
-				tabindex="0"
+				tabindex="{{iconTabIndex}}"
 				aria-expanded="{{expanded}}"
 				aria-labelledby="{{ariaLabelledBy}}"
 				@press="{{ctr._icon.press}}"

packages/main/src/Panel.js

@@ -4,6 +4,7 @@ import { getIconURI } from "@ui5/webcomponents-base/src/sap/ui/webcomponents/bas
 import slideDown from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/animations/slideDown";
 import slideUp from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/animations/slideUp";
 import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/events/PseudoEvents";
 import PanelTemplateContext from "./PanelTemplateContext";
 import BackgroundDesign from "./types/BackgroundDesign";
 import PanelAccessibleRole from "./types/PanelAccessibleRole";
@@ -121,6 +122,9 @@ const metadata = {
 		_icon: {
 			type: Object,
 		},
+		_header: {
+			type: Object,
+		},
 		_contentExpanded: {
 			type: Boolean,
 		},
@@ -206,23 +210,54 @@ class Panel extends WebComponent {
 
 		this.resourceBundle = getResourceBundle("@ui5/webcomponents");
 
+		this._header = {};
+
 		this._icon = {};
 		this._icon.id = `${this.id}-CollapsedImg`;
 		this._icon.src = getIconURI("navigation-right-arrow");
-
 		this._icon.title = this.resourceBundle.getText("PANEL_ICON");
 		this._icon.functional = true;
-		this._icon.press = event => { event.preventDefault(); this._toggleOpen(); };
+
+		this._toggle = event => { event.preventDefault(); this._toggleOpen(); };
+		this._noOp = () => {};
 	}
 
 	onBeforeRendering() {
 		// If the animation is running, it will set the content expanded state at the end
 		if (!this._animationRunning) {
 			this._contentExpanded = !this.collapsed;
 		}
+
+		const toggleWithInternalHeader = !this.header;
+		this._header.press = toggleWithInternalHeader ? this._toggle : this._noOp;
+		this._icon.press = !toggleWithInternalHeader ? this._toggle : this._noOp;
+	}
+
+	onkeydown(event) {
+		const headerUsed = this._headerOnTarget(event.ui5target);
+
+		if (isEnter(event) && headerUsed) {
+			this._toggleOpen();
+		}
+
+		if (isSpace(event) && headerUsed) {
+			event.preventDefault();
+		}
+	}
+
+	onkeyup(event) {
+		const headerUsed = this._headerOnTarget(event.ui5target);
+
+		if (isSpace(event) && headerUsed) {
+			this._toggleOpen();
+		}
 	}
 
 	_toggleOpen() {
+		if (this.fixed) {
+			return;
+		}
+
 		this.collapsed = !this.collapsed;
 		this._animationRunning = true;
 
@@ -252,6 +287,10 @@ class Panel extends WebComponent {
 		this.fireEvent("expand", {});
 	}
 
+	_headerOnTarget(target) {
+		return target.classList.contains("sapMPanelWrappingDiv");
+	}
+
 	static async define(...params) {
 		await fetchResourceBundle("@ui5/webcomponents");
 

packages/main/src/PanelTemplateContext.js

@@ -5,6 +5,8 @@ class PanelTemplateContext {
 			expanded: !state.collapsed,
 			ariaLabelledBy: state.header ? undefined : `${state._id}-header`,
 			accRole: state.accessibleRole.toLowerCase(),
+			headerTabIndex: !state.header ? "0" : undefined,
+			iconTabIndex: state.header ? "0" : undefined,
 			classes: {
 				main: {
 					sapMPanel: true,
@@ -13,6 +15,7 @@ class PanelTemplateContext {
 					sapMPanelWrappingDivTb: state.header,
 					sapMPanelWrappingDivTbExpanded: state.header && state.collapsed,
 					sapMPanelWrappingDiv: !state.header,
+					sapMPanelWrappingDivClickable: !state.header,
 					sapMPanelWrappingDivExpanded: !state.header && !state.collapsed,
 				},
 				icon: {

packages/main/src/themes/base/Panel.less

@@ -9,6 +9,7 @@
 /* CSS for control ui5-panel    */
 /* Base theme                   */
 /* ============================ */
+@_ui5_panel_focus_border_width: 1px;
 
 :host(ui5-panel) {
 	display: block;
@@ -99,6 +100,29 @@ ui5-panel {
 	position: relative;
 }
 
+.sapMPanelWrappingDiv {
+	box-sizing: border-box;
+}
+
+.sapMPanelWrappingDiv.sapMPanelWrappingDivClickable {
+	cursor: pointer;
+}
+
+.sapMPanelWrappingDiv.sapMPanelWrappingDivClickable:focus {
+	outline: none;
+}
+
+.sapMPanelWrappingDiv.sapMPanelWrappingDivClickable:focus::after {
+	content: "";
+	position: absolute;
+	border: @_ui5_panel_focus_border_width dotted @sapUiContentFocusColor;
+	pointer-events: none;
+	top: 1px;
+	left: 1px;
+	right: 1px;
+	bottom: 1px;
+}
+
 .sapMPanelWrappingDivTb .sapMPanelHdrToolbar {
 	width: 100%;
 }

packages/main/src/themes/sap_belize_hcb/Panel.less

@@ -8,4 +8,6 @@
 /* Global Belize parameters      */
 /* ============================= */
 @import "./base.less";
-@import "./global.less";
+@import "./global.less";
+
+@_ui5_panel_focus_border_width: 0.125rem;

packages/main/test/sap/ui/webcomponents/main/pages/Panel.html

@@ -27,14 +27,14 @@
 
 	<script>
 		document.addEventListener("DOMContentLoaded", function () {
-			const myPanel = document.getElementById("panel1");
-			const input = document.getElementById("helper-input");
-
-			myPanel.addEventListener("expand", function (event) {
+			panel1.addEventListener("expand", function (event) {
 				console.log(event);
-				myPanel.headerText = event.detail.expand ? "Click to collapse!" : "Click to expand!";
-
-				input.value = parseInt(input.value) + 1;
+				event.target.headerText = event.detail.expand ? "Click to collapse!" : "Click to expand!";
+				field1.value = parseInt(field1.value) + 1;
+			});
+			panel2.addEventListener("expand", function (event) {
+				event.target.headerText = event.detail.expand ? "Click to collapse!" : "Click to expand!";
+				field2.value = parseInt(field2.value) + 1;
 			});
 
 			var button = document.getElementById("b1");
@@ -157,7 +157,7 @@
 
 	<br>
 
-	<ui5-panel id="panel1" collapsed expandable header-text="Click to expand!">
+	<ui5-panel id="panel1" collapsed header-text="Click to expand!">
 
 		<!-- Content -->
 		<ui5-title data-ui5-slot="content">This is a demo how to use the &quot;expand&quot; event.</ui5-title>
@@ -168,9 +168,25 @@
 
 	</ui5-panel>
 
+	<ui5-panel id="panel2" collapsed accessible-role="Complementary">
+
+		<!-- Header -->
+		<div data-ui5-slot="header" class="header">
+			<ui5-title>Expandable but not expanded</ui5-title>
+		</div>
+
+		<!-- Content -->
+		<ui5-title data-ui5-slot="content">This is a demo how to use the &quot;expand&quot; event.</ui5-title>
+		<br>
+		<ui5-label data-ui5-slot="content" wrap>
+			Some short text.
+		</ui5-label>
+	</ui5-panel>
+
 	<br>
 
-	<ui5-input id="helper-input" value="0"></ui5-input>
+	<ui5-input id="field1" value="0"></ui5-input>
+	<ui5-input id="field2" value="0"></ui5-input>
 
 </body>
 

packages/main/test/sap/ui/webcomponents/main/samples/Panel.sample.html

@@ -53,7 +53,7 @@ <h2 class="control-header">Panel</h2>
 	<section>
 		<h3>Basic Panel</h3>
 		<div class="snippet">
-			<ui5-panel width="100%"	 accessible-role="Complementary"
+			<ui5-panel width="100%" accessible-role="Complementary"
 				header-text="Both expandable and expanded" class="full-width">
 				<h1 data-ui5-slot="content" class="content-color">I am a native heading!</h1>
 				<ui5-label data-ui5-slot="content" wrap>Short text.</ui5-label>
@@ -65,6 +65,7 @@ <h1 data-ui5-slot="content" class="content-color">I am a native heading!</h1>
 			</ui5-panel>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
+
 <ui5-panel width="100%" accessible-role="Complementary"
 	header-text="Both expandable and expanded" class="full-width">
 	<h1 data-ui5-slot="content" class="content-color">I am a native heading!</h1>

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

@@ -3,9 +3,25 @@ const assert = require("assert");
 describe("Panel general interaction", () => {
 	browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/Panel.html");
 
-	it("tests expand event", () => {
-		const icon = browser.findElementDeep("#panel1 >>> ui5-icon");
-		const field = browser.findElementDeep("#helper-input");
+	it("tests expand event upon header click", () => {
+		const header = browser.findElementDeep("#panel1 >>> .sapMPanelWrappingDiv");
+		const field = browser.$("#field1");
+
+		header.click();
+		browser.pause(500);
+
+		header.keys("Space");
+		browser.pause(500);
+
+		header.keys("Enter");
+		browser.pause(500);
+
+		assert.strictEqual(field.getProperty("value"), "3", "Press should be called 3 times");
+	});
+
+	it("tests expand event upon icon click with custom header", () => {
+		const icon = browser.findElementDeep("#panel2 >>> ui5-icon");
+		const field = browser.$("#field2");
 
 		icon.click();
 		browser.pause(500);