feat(ui5-icon): accessibility implementation

packages/base/src/SVGIconRegistry.js

@@ -1,7 +1,7 @@
 const registry = new Map();
 
-const registerIcon = (name, d) => {
-	registry.set(name, { name, d });
+const registerIcon = (name, d, acc) => {
+	registry.set(name, { d, acc });
 };
 
 const getIconData = name => {

packages/base/src/icons/message-error.js

@@ -1,6 +1,8 @@
 import { registerIcon } from "../SVGIconRegistry.js";
+import { ICON_MESSAGE_ERROR } from "../../../main/src/i18n/defaults.js";
 
 const name = "sap-icon://message-error";
 const d = "M257 334q15 0 26.5 10.5T295 372q0 15-11.5 27T257 411q-17 0-28-12t-11-27q0-17 11-27.5t28-10.5zm0-231q15 0 26.5 10.5T295 141l-18 136q-3 14-7.5 18t-12.5 4-13-3.5-7-18.5l-19-136q0-17 11-27.5t28-10.5zM256 0q53 0 100 20t81.5 55 54.5 81.5 20 99.5-20 100-54.5 81.5T356 492t-100 20-99.5-20T75 437.5 20 356 0 256t20-99.5T75 75t81.5-55T256 0zm0 480q46 0 87-17.5t71.5-48 48-71T480 256q0-46-17.5-87t-48-71.5-71.5-48T256 32t-87 17.5-71.5 48-48 71.5T32 256q0 47 17.5 87.5t48 71 71.5 48 87 17.5z";
+const acc = ICON_MESSAGE_ERROR.defaultText;
 
-registerIcon(name, d);
+registerIcon(name, d, acc);

packages/base/src/icons/message-information.js

@@ -1,6 +1,8 @@
 import { registerIcon } from "../SVGIconRegistry.js";
+import { ICON_MESSAGE_INFORMATION } from "../../../main/src/i18n/defaults.js";
 
 const name = "sap-icon://message-information";
 const d = "M448 32q13 0 22.5 9t9.5 22v384q0 14-9.5 23.5T448 480H64q-14 0-23-9.5T32 447V63q0-13 9-22t23-9h384zm0 31H64v384h384V63zM320 416H192v-33h33V255h-32v-31h95v159h32v33zm-64-225q-14 0-23-9t-9-22q0-14 9-23.5t23-9.5q13 0 22.5 9.5T288 160q0 13-9.5 22t-22.5 9z";
+const acc = ICON_MESSAGE_INFORMATION.defaultText;
 
-registerIcon(name, d);
+registerIcon(name, d, acc);

packages/base/src/icons/message-success.js

@@ -1,6 +1,8 @@
 import { registerIcon } from "../SVGIconRegistry.js";
+import { ICON_MESSAGE_SUCCESS } from "../../../main/src/i18n/defaults.js";
 
 const name = "sap-icon://message-success";
 const d = "M448 32q13 0 22.5 9t9.5 23v384q0 13-9.5 22.5T448 480H64q-14 0-23-9.5T32 448V64q0-14 9-23t23-9h384zm0 32H64v384h384V64zM244 384l-113-95 33-47 74 56 103-170 41 42z";
+const acc = ICON_MESSAGE_SUCCESS.defaultText;
 
-registerIcon(name, d);
+registerIcon(name, d, acc);

packages/main/lib/i18n-transform/USED_KEYS.txt

@@ -9,4 +9,5 @@ BUTTON_ARIA_TYPE_EMPHASIZED
 LINK_SUBTLE
 LINK_EMPHASIZED
 SWITCH_ON
-SWITCH_OFF
+SWITCH_OFF
+TOKEN_ARIA_DELETABLE

packages/main/src/Button.hbs

@@ -15,6 +15,7 @@
 			<ui5-icon
 				class="ui5-button-icon"
 				src="{{icon}}"
+				show-tooltip={{iconOnly}}
 			></ui5-icon>
 		{{/if}}
 

packages/main/src/Icon.hbs

@@ -4,9 +4,13 @@
 	viewBox="0 0 512 512"
 	role="img"
 	preserveAspectRatio="xMidYMid meet"
+	aria-label="{{accessibleNameText}}"
 	xmlns="http://www.w3.org/2000/svg"
 >
-	<g role="presentation" aria-hidden="true">
+	{{#if hasIconTooltip}}
+		<title id="{{_id}}-tooltip">{{accessibleNameText}}</title>
+	{{/if}}
+	<g role="presentation">
 		<path transform="translate(0, 512) scale(1, -1)" d={{d}} />
 	</g>
 </svg>

packages/main/src/Icon.js

@@ -30,6 +30,31 @@ const metadata = {
 		src: {
 			type: String,
 		},
+
+		/**
+		 * Defines the text alternative of the <code>ui5-icon</code>.
+		 * If not provided a default text alternative will be set, if present.
+		 * <br><br>
+		 * <b>Note:</b> Every icon should have a text alternative in order to
+		 * calculate its accessible name.
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines whether the <code>ui5-icon</code> should have a tooltip.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showTooltip: {
+			type: Boolean,
+		},
 	},
 	events: {
 	},
@@ -98,6 +123,16 @@ class Icon extends UI5Element {
 		return icon.d;
 	}
 
+	get hasIconTooltip() {
+		return this.showTooltip && this.accessibleNameText;
+	}
+
+	get accessibleNameText() {
+		const icon = getIconData(this._normalizeIconURI(this.src));
+
+		return this.accessibleName || icon.acc;
+	}
+
 	get dir() {
 		return getRTL() ? "rtl" : "ltr";
 	}

packages/main/src/MessageStrip.hbs

@@ -18,7 +18,7 @@
 			@click={{_closeClick}}
 		>
 			<ui5-icon
-			class="ui5-messagestrip-close-icon"
+				class="ui5-messagestrip-close-icon"
 				src="sap-icon://decline"
 			>
 			</ui5-icon>

packages/main/src/Panel.hbs

@@ -25,6 +25,7 @@
 				<ui5-icon
 					src="sap-icon://navigation-right-arrow"
 					class="ui5-panel-header-button-icon"
+					accessible-name="{{_icon.title}}"
 				>
 				</ui5-icon>
 			</ui5-button>

packages/main/src/Token.hbs

@@ -2,6 +2,6 @@
 	<span class="ui5-token--text"><slot></slot></span>
 
 	{{#unless readonly}}
-		<ui5-icon @click="{{_delete}}" src="{{iconURI}}" class="ui5-token--icon"></ui5-icon>
+		<ui5-icon @click="{{_delete}}" src="{{iconURI}}" accessible-name="{{tokenDeletableText}}" show-tooltip="true" class="ui5-token--icon"></ui5-icon>
 	{{/unless}}
 </div>

packages/main/src/Token.js

@@ -9,6 +9,8 @@ import {
 } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import "@ui5/webcomponents-base/dist/icons/decline.js";
 import "@ui5/webcomponents-base/dist/icons/cancel.js";
+import { fetchResourceBundle, getResourceBundle } from "@ui5/webcomponents-base/dist/ResourceBundle.js";
+import { TOKEN_ARIA_DELETABLE } from "./i18n/defaults.js";
 
 import Icon from "./Icon.js";
 import TokenTemplate from "./generated/templates/TokenTemplate.lit.js";
@@ -117,6 +119,12 @@ class Token extends UI5Element {
 		return styles;
 	}
 
+	constructor() {
+		super();
+
+		this.resourceBundle = getResourceBundle("@ui5/webcomponents");
+	}
+
 	_select() {
 		this.fireEvent("select");
 	 }
@@ -143,12 +151,19 @@ class Token extends UI5Element {
 		}
 	}
 
+	get tokenDeletableText() {
+		return this.resourceBundle.getText(TOKEN_ARIA_DELETABLE);
+	}
+
 	get iconURI() {
 		return getTheme() === "sap_fiori_3" ? "sap-icon://decline" : "sap-icon://sys-cancel";
 	}
 
 	static async define(...params) {
-		await Icon.define();
+		await Promise.all([
+			Icon.define(),
+			fetchResourceBundle("@ui5/webcomponents"),
+		]);
 
 		super.define(...params);
 	}