Improved accessibility:

* converse-avatar:
  * Fix alt_text parameter that was ignored
  * using aria-label instead of alt attribute on svg (alt is not valid)
  * if no alt_text, adding role="presentation" so that screen readers
    ignores the image
  * when fallbacking on initials, adding a aria-label with the full name

src/shared/avatar/avatar.js

@@ -41,6 +41,7 @@ export default class Avatar extends CustomElement {
                 width: this.width,
                 image: data_uri || `data:${image_type};base64,${image}`,
                 image_type,
+                alt_text: this.name
             });
         }
 
@@ -52,8 +53,9 @@ export default class Avatar extends CustomElement {
             line-height: ${this.height}px;`;
 
         const author_style = this.model.getAvatarStyle(css);
-        return html`<div class="avatar-initials" style="${until(author_style, default_bg_css + css)}">
-            ${this.getInitials(this.name)}
+        return html`<div class="avatar-initials" style="${until(author_style, default_bg_css + css)}"
+            aria-label="${this.name}">
+                ${this.getInitials(this.name)}
         </div>`;
     }
 

src/shared/avatar/templates/avatar.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 
 /**
  * @param {string} image
@@ -15,6 +15,8 @@ export default (o) => {
             class="avatar ${o.classes}"
             width="${o.width}"
             height="${o.height}"
+            aria-label="${o.alt_text}"
+            role=${o.alt_text ? nothing : 'presentation'}
         >
             <image
                 width="${o.width}"