fix(ui5-checkbox): add aria-hidden attribute to icon (#3511)

The role presentation on the icon SVG is ignored in some cases:
*The element is focusable, e.g. it is natively focusable like an HTML link or input, or it has a tabindex attribute.
*The element has any of the twenty-one global ARIA states and properties, e.g., aria-label.

With this change we introduce ariaHidden property on ui5-icon to be able to completly hide it from accessibility tree mapping.
Also, change the default value of effectiveAccessibleName to undefined as a value of "" will still set the aria-label attribute and the presentation role will be ignroed.

Fixes #3433

Author: dobrinyonkov

packages/main/src/CheckBox.hbs

@@ -15,7 +15,7 @@
 >
 		<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
 			{{#if checked}}
-				<ui5-icon name="accept" class="ui5-checkbox-icon"></ui5-icon>
+				<ui5-icon aria-hidden="true" name="accept" class="ui5-checkbox-icon"></ui5-icon>
 			{{/if}}
 
 			<input
@@ -24,6 +24,7 @@
 				?checked="{{checked}}"
 				?readonly="{{readonly}}"
 				?disabled="{{disabled}}"
+				tabindex="-1"
 				aria-hidden="true"
 				data-sap-no-tab-ref
 			/>

packages/main/src/Icon.hbs

@@ -7,6 +7,7 @@
 	focusable="false"
 	preserveAspectRatio="xMidYMid meet"
 	aria-label="{{effectiveAccessibleName}}"
+	aria-hidden={{effectiveAriaHidden}}
 	xmlns="http://www.w3.org/2000/svg"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}

packages/main/src/Icon.js

@@ -95,6 +95,15 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the aria hidden state of the component.
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		ariaHidden: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -130,6 +139,7 @@ const metadata = {
 		 */
 		effectiveAccessibleName: {
 			type: String,
+			defaultValue: undefined,
 			noAttribute: true,
 		},
 	},
@@ -247,6 +257,14 @@ class Icon extends UI5Element {
 		return this.effectiveDir;
 	}
 
+	get effectiveAriaHidden() {
+		if (this.ariaHidden === "") {
+			return;
+		}
+
+		return this.ariaHidden;
+	}
+
 	get tabIndex() {
 		return this.interactive ? "0" : "-1";
 	}

packages/main/test/pages/CheckBox.html

@@ -36,6 +36,9 @@
 	<ui5-title>ACC test - aria-label</ui5-title>
 	<ui5-checkbox id="accCb" aria-label="Hello world"></ui5-checkbox>
 
+	<br />
+	<ui5-checkbox id="checkboxChecked" checked></ui5-checkbox>
+
 	<script>
 		var hcb = false;
 		var input = document.querySelector("#field");

packages/main/test/pages/Icon.html

@@ -37,6 +37,9 @@
 	<ui5-icon name="add-employee" class="icon-red icon-small"></ui5-icon>
 	<ui5-icon show-tooltip name="message-error"></ui5-icon>
 
+	<h3>Icon with aria-hidden="true"</h3>
+	<ui5-icon id="araHiddenIcon" name="add-employee" aria-hidden="true" class="icon-red icon-small"></ui5-icon>
+
 	<h3>Interactive Icon</h3>
 	<ui5-icon
 		id="myInteractiveIcon"

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

@@ -51,4 +51,10 @@ describe("CheckBox general interaction", () => {
 		assert.strictEqual(defaultCb.getAttribute("aria-label"), null, "aria-label is not set");
 		assert.strictEqual(accCheckBox.getAttribute("aria-label"), EXPECTED_ARIA_LABEL, "aria-label is set");
 	});
+
+	it("tests ui5-icon", () => {
+		const checkboxChecked = browser.$("#checkboxChecked").shadow$(".ui5-checkbox-icon");
+
+		assert.strictEqual(checkboxChecked.getAttribute("aria-hidden"), "true", "aria-hidden is set");
+	});
 });

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

@@ -49,4 +49,12 @@ describe("Icon general interaction", () => {
 		icon.click();
 		assert.strictEqual(input.getAttribute("value"), "1", "Mouse click throws event");
 	});
+
+	it("Tests the accessibility attributes", () => {
+		const iconRoot = browser.$("#myIcon").shadow$(".ui5-icon-root");
+		const ariaHiddenIconRoot = browser.$("#araHiddenIcon").shadow$(".ui5-icon-root");
+
+		assert.strictEqual(iconRoot.getAttribute("aria-hidden"), null, "The aria-hidden attribute is not set");
+		assert.strictEqual(ariaHiddenIconRoot.getAttribute("aria-hidden"), "true", "The ariaHidden property works");
+	});
 });