fix(ui5-checkbox): add aria-hidden attribute to icon (SAP#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 SAP#3433

packages/main/src/Breadcrumbs.hbs

@@ -7,6 +7,7 @@
         <li class="ui5-breadcrumbs-overflow-opener"
             ?hidden="{{_isOverflowEmpty}}">
             <ui5-link @click="{{_openRespPopover}}"
+                role="button"
                 aria-label="{{_overflowAccessibleNameText}}"
                 aria-haspopup="{{_ariaHasPopup}}">
                 <ui5-icon name="slim-arrow-down"

packages/main/src/Breadcrumbs.js

@@ -12,11 +12,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
 import BreadcrumbsSeparatorStyle from "./types/BreadcrumbsSeparatorStyle.js";
 import BreadcrumbsItem from "./BreadcrumbsItem.js";
-
-// Template
-import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
-import BreadcrumbsPopoverTemplate from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
-
 import {
 	BREADCRUMBS_ARIA_LABEL,
 	BREADCRUMBS_OVERFLOW_ARIA_LABEL,
@@ -30,6 +25,10 @@ import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
 
+// Templates
+import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
+import BreadcrumbsPopoverTemplate from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
+
 // Styles
 import breadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
 import breadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
@@ -124,7 +123,7 @@ const metadata = {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- *
+ * Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path. The last three steps can be accessed as links directly, while the remaining links prior to them are available in a drop-down menu.
  *
  * @constructor
  * @author SAP SE

packages/main/src/Link.hbs

@@ -1,12 +1,13 @@
 <a
 	class="ui5-link-root"
-	role="link"
+	role="{{effectiveAccRole}}"
 	href="{{parsedRef}}"
 	target="{{target}}"
 	rel="{{_rel}}"
 	tabindex="{{tabIndex}}"
 	?disabled="{{disabled}}"
 	aria-label="{{ariaLabelText}}"
+	aria-haspopup="{{ariaHaspopup}}"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}
 	@click={{_onclick}}

packages/main/src/Link.js

@@ -127,6 +127,29 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines the aria-haspopup value of the component.
+		 *
+		 * @type String
+		 * @defaultvalue undefined
+		 * @since 1.0.0-rc.15
+		 * @private
+		 */
+		 ariaHaspopup: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * Defines the accessibility role of the component.
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		role: {
+			type: String,
+		},
+
 		_rel: {
 			type: String,
 			noAttribute: true,
@@ -283,6 +306,10 @@ class Link extends UI5Element {
 		return (this.href && this.href.length > 0) ? this.href : undefined;
 	}
 
+	get effectiveAccRole() {
+		return this.role || "link";
+	}
+
 	static async onDefine() {
 		await fetchI18nBundle("@ui5/webcomponents");
 	}