feat(ui5-avatar): implement accessibility spec (#1484)

SAP · Apr 22, 2020 · 501740e · 501740e
1 parent ede3635
commit 501740e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/packages/main/src/Avatar.hbs b/packages/main/src/Avatar.hbs
@@ -1,8 +1,8 @@
 <div class="ui5-avatar-root">
 	{{#if image}}
-		<span alt="avatar" class="ui5-avatar-img" style="background-image: url({{image}})"></span>
+		<span class="ui5-avatar-img" style="background-image: url({{image}})" role="img" aria-label="{{accessibleNameText}}"></span>
 	{{else if icon}}
-		<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
+		<ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
 	{{else if initials}}
 		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}

diff --git a/packages/main/src/Avatar.js b/packages/main/src/Avatar.js
@@ -1,9 +1,12 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
 
+import { AVATAR_TOOLTIP } from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import AvatarCss from "./generated/themes/Avatar.css.js";
 
@@ -142,6 +145,19 @@ const metadata = {
 			type: String,
 			defaultValue: AvatarBackgroundColor.Accent6,
 		},
+
+		/**
+		 * Defines the text alternative of the <code>ui5-avatar</code>.
+		 * If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.7
+		 */
+		accessibleName: {
+			type: String,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 	},
@@ -173,6 +189,11 @@ const metadata = {
  * @public
  */
 class Avatar extends UI5Element {
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -190,7 +211,10 @@ class Avatar extends UI5Element {
 	}
 
 	static async onDefine() {
-		await Icon.define();
+		await Promise.all([
+			fetchI18nBundle("@ui5/webcomponents"),
+			Icon.define(),
+		]);
 	}
 
 	get validInitials() {
@@ -202,6 +226,14 @@ class Avatar extends UI5Element {
 
 		return null;
 	}
+
+	get accessibleNameText() {
+		if (this.accessibleName) {
+			return this.accessibleName;
+		}
+
+		return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+	}
 }
 
 Avatar.define();