feat(ui5-split-button): expose active state property for arrow button (…

…SAP#7683)

Introducing the *activeArrowButton* property, which allows the user to specify when the arrow-button of our <ui5-split-button> should have the active state styling.
The reason for adding this is because, when our <ui5-split-button> component was used in a context where it opens a menu, there weren't any indicators that a menu is opened.
Samples are added in the dev test pages and in the story of our <ui5-split-button>.
On the other side a small refactoring over the component was made, where we also fix the focus behavior of the control.
Now the component as a whole is focusable only by navigating through the document using TAB.
The separate buttons - *textButton* if present, and the *arrowButton* are being focused on click/touch as independent elements for the component.

packages/main/src/Button.ts

@@ -101,6 +101,11 @@ let activeButton: Button | null = null;
  * @native
  */
 @event("click")
+/**
+ * Fired whenever the active state of the component changes.
+ * @private
+ */
+@event("_active-state-change")
 class Button extends UI5Element implements IFormElement {
 	/**
 	 * Defines the component design.
@@ -337,7 +342,7 @@ class Button extends UI5Element implements IFormElement {
 
 		this._deactivate = () => {
 			if (activeButton) {
-				activeButton.active = false;
+				activeButton._setActiveState(false);
 			}
 		};
 
@@ -354,7 +359,7 @@ class Button extends UI5Element implements IFormElement {
 				return;
 			}
 
-			this.active = true;
+			this._setActiveState(true);
 		};
 
 		this._ontouchstart = {
@@ -407,7 +412,7 @@ class Button extends UI5Element implements IFormElement {
 		}
 
 		markEvent(e, "button");
-		this.active = true;
+		this._setActiveState(true);
 		activeButton = this; // eslint-disable-line
 	}
 
@@ -417,10 +422,12 @@ class Button extends UI5Element implements IFormElement {
 			e.stopPropagation();
 		}
 
-		this.active = false;
+		if (this.active) {
+			this._setActiveState(false);
+		}
 
 		if (activeButton) {
-			activeButton.active = false;
+			activeButton._setActiveState(false);
 		}
 	}
 
@@ -432,21 +439,27 @@ class Button extends UI5Element implements IFormElement {
 		markEvent(e, "button");
 
 		if (isSpace(e) || isEnter(e)) {
-			this.active = true;
+			this._setActiveState(true);
 		}
 	}
 
 	_onkeyup(e: KeyboardEvent) {
 		if (isSpace(e) || isEnter(e)) {
-			this.active = false;
+			if (this.active) {
+				this._setActiveState(false);
+			}
 		}
 	}
 
 	_onfocusout() {
 		if (this.nonInteractive) {
 			return;
 		}
-		this.active = false;
+
+		if (this.active) {
+			this._setActiveState(false);
+		}
+
 		if (isDesktop()) {
 			this.focused = false;
 		}
@@ -463,6 +476,16 @@ class Button extends UI5Element implements IFormElement {
 		}
 	}
 
+	_setActiveState(active: boolean) {
+		const eventPrevented = !this.fireEvent("_active-state-change", null, true);
+
+		if (eventPrevented) {
+			return;
+		}
+
+		this.active = active;
+	}
+
 	get hasButtonType() {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}

packages/main/src/SplitButton.hbs

@@ -17,11 +17,11 @@
 		tabindex="-1"
 		?disabled="{{disabled}}"
 		?active="{{_textButtonActive}}"
-		@click="{{_fireClick}}"
+		@click="{{_handleMouseClick}}"
 		@touchstart={{_textButtonPress}}
 		@mousedown={{_textButtonPress}}
 		@mouseup={{_textButtonRelease}}
-		@focusin={{_setTabIndexValue}}
+		@focusin={{_textButtonFocusIn}}
 		@focusout={{_onFocusOut}}
 	>
 		{{#if isTextButton}}
@@ -39,12 +39,14 @@
 			icon="slim-arrow-down"
 			tabindex="-1"
 			?disabled="{{disabled}}"
-			?active="{{_arrowButtonActive}}"
+			?active="{{effectiveActiveArrowButton}}"
 			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
 			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
-			@click="{{_fireArrowClick}}"
+			@click="{{_handleArrowButtonAction}}"
+			@mousedown={{_arrowButtonPress}}
+			@mouseup={{_arrowButtonRelease}}
 			@focusin={{_setTabIndexValue}}
-			@focusout={{_onFocusOut}}
+			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 		>
 		</ui5-button>
 	</div>