fix(ui5-busyindicator): add a11y support

packages/main/src/BusyIndicator.hbs

@@ -1,18 +1,27 @@
 <div class="{{classes.root}}">
 	<div class="ui5-busyindicator-wrapper">
 		{{#if active}}
-			<div class="ui5-busyindicator-dynamic-content" role="progressbar" aria-valuemin="0" aria-valuemax="100" title="{{ariaTitle}}">
+			<div
+				class="ui5-busyindicator-dynamic-content"
+				title="{{ariaTitle}}"
+				tabindex="0"
+				role="progressbar"
+				aria-valuemin="0"
+				aria-valuemax="100"
+				aria-valuetext="Busy"
+				aria-labelledby="{{_id}}-label"
+			>
 				<div class="ui5-busyindicator-circle circle-animation-0"></div>
 				<div class="ui5-busyindicator-circle circle-animation-1"></div>
 				<div class="ui5-busyindicator-circle circle-animation-2"></div>
 			</div>
 		{{/if}}
 		{{#if text}}
-			<ui5-label class="ui5-busyindicator-text">
+			<ui5-label id="{{_id}}-label" class="ui5-busyindicator-text">
 				{{text}}
 			</ui5-label>
 		{{/if}}
 	</div>
 
-	<slot></slot>
-</div>
+	<slot tabindex="{{slotTabIndex}}"></slot>
+</div>

packages/main/src/BusyIndicator.js

@@ -110,14 +110,6 @@ class BusyIndicator extends UI5Element {
 		this._preventHandler = this._preventEvent.bind(this);
 	}
 
-	onBeforeRendering() {
-		if (this.active) {
-			this.tabIndex = -1;
-		} else {
-			this.removeAttribute("tabindex");
-		}
-	}
-
 	onEnterDOM() {
 		this.addEventListener("keyup", this._preventHandler, {
 			capture: true,
@@ -170,6 +162,10 @@ class BusyIndicator extends UI5Element {
 		};
 	}
 
+	get slotTabIndex() {
+		return this.active ? -1 : 0;
+	}
+
 	_preventEvent(event) {
 		if (this.active) {
 			event.stopImmediatePropagation();

packages/main/src/themes/BusyIndicator.css

@@ -8,7 +8,6 @@
 
 :host([active]) {
 	color: var(--sapContent_IconColor);
-	pointer-events: none;
 }
 
 :host([active]) :not(.ui5-busyindicator-root--ie) ::slotted(:not([class^="ui5-busyindicator-"])) {
@@ -78,12 +77,10 @@
 .ui5-busyindicator-wrapper {
 	position: absolute;
 	z-index: 99;
-	width: 100%;
-	/* Fixes IE positioning */
 	left: 0;
 	right: 0;
-	top: 50%;
-	transform: translate(0, -50%);
+	top: 0;
+	bottom: 0;
 }
 
 .ui5-busyindicator-circle {
@@ -107,6 +104,11 @@
 	background-color: inherit;
 }
 
+.ui5-busyindicator-dynamic-content:focus {
+	outline: 1px dotted var(--sapContent_FocusColor);
+	outline-offset: -2px;
+}
+
 .circle-animation-0 {
 	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
 }

packages/main/test/pages/BusyIndicator.html

@@ -40,12 +40,12 @@
 
 	<br />
 	<br />
-	<ui5-busyindicator active id="indicator2" text="Loading" style="width: 10rem; border: 1px solid red"></ui5-busyindicator>
+	<ui5-busyindicator active text="Loading" style="width: 10rem; border: 1px solid red"></ui5-busyindicator>
 
 	<br />
 	<br />
 
-	<ui5-busyindicator size="Medium" active>
+	<ui5-busyindicator id="indicatorWithBtn" size="Medium" active>
 		<ui5-button>Hello World</ui5-button>
 	</ui5-busyindicator>
 

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

@@ -17,4 +17,35 @@ describe("BusyIndicator general interaction", () => {
 		assert.strictEqual(input.getProperty("value"), "0", "itemClick is not thrown");
 	});
 
+	it("tests focus handling", () => {
+		const busyIndicator = browser.$("#indicator1");
+		busyIndicator.click();
+
+		let innerFocusElement = browser.execute(() => {
+			return document.getElementById("indicator1").shadowRoot.activeElement;
+		});
+
+		innerFocusElement = $(innerFocusElement);
+
+		assert.strictEqual(innerFocusElement.getAttribute("class"), "ui5-busyindicator-dynamic-content", "The correct inner element is focused");
+	});
+
+	it("tests internal focused element attributes", () => {
+		const busyIndicator = browser.$("#indicator1");
+		busyIndicator.click();
+		const innerFocusElement = busyIndicator.shadow$(".ui5-busyindicator-dynamic-content");
+
+		assert.strictEqual(innerFocusElement.getAttribute("role"), "progressbar", "Correct 'role' is set");
+		assert.strictEqual(innerFocusElement.getAttribute("tabindex"), "0", "Correct 'tabindex' is set");
+		assert.strictEqual(innerFocusElement.getAttribute("aria-valuemin"), "0", "Correct 'aria-valuemin' is set");
+		assert.strictEqual(innerFocusElement.getAttribute("aria-valuemax"), "100", "Correct 'aria-valuemax' is set");
+		assert.strictEqual(innerFocusElement.getAttribute("aria-valuetext"), "Busy", "Correct 'aria-valuetext' is set");
+	});
+
+	it("tests content is not reachable with keyboard when active", () => {
+		const busyIndicator = browser.$("#indicatorWithBtn");
+		const defaultSLot = busyIndicator.shadow$("slot");
+
+		assert.strictEqual(defaultSLot.getAttribute("tabindex"), "-1", "Slot is not reachable via keyboard");
+	});
 });