SAK-47614 roster: pass title to user photo (sakaiproject#10781)

https://sakaiproject.atlassian.net/browse/SAK-47614
BeyondVegeta · Aug 5, 2022 · 9a9aeed · 9a9aeed
1 parent 2458686
commit 9a9aeed
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 32 deletions.
diff --git a/library/src/morpheus-master/js/src/sakai.morpheus.profile.popup.js b/library/src/morpheus-master/js/src/sakai.morpheus.profile.popup.js
@@ -147,6 +147,7 @@ var profile = profile || {};
       $(this).qtip({
         position: position,
         show: { event: 'click', delay: 0 },
+        suppress: false,
         style: { classes: 'profile-popup-qtip qtip-shadow' },
         hide: { event: 'click unfocus' },
         content: {

diff --git a/roster2/tool/src/handlebars/members_cards.handlebars b/roster2/tool/src/handlebars/members_cards.handlebars
@@ -3,15 +3,15 @@
         {{#if ../viewPicture}}
         <div class="roster-picture-card">
             <sakai-user-photo user-id="{{userId}}"
-                                alt="{{tr 'profile_picture_alt'}} {{displayName}}"
-                                site-id="{{siteId}}"
-                                classes="roster-photo"
-                                {{#if official}}
-                                official
-                                {{/if}}
-                                {{#if ../printMode}}
-                                print
-                                {{/if}}
+                label="{{tr 'profile_picture_alt'}} {{displayName}}"
+                site-id="{{siteId}}"
+                classes="roster-photo"
+                {{#if official}}
+                official
+                {{/if}}
+                {{#if ../printMode}}
+                print
+                {{/if}}
             >
             </sakai-user-photo>
         </div> <!-- /roster-picture-card -->

diff --git a/roster2/tool/src/handlebars/members_photogrid.handlebars b/roster2/tool/src/handlebars/members_photogrid.handlebars
@@ -3,18 +3,18 @@
         {{#if ../viewPicture}}
         <div class="roster-picture-card">
             <sakai-user-photo user-id="{{userId}}"
-                                alt="{{tr 'profile_picture_alt'}} {{displayName}}"
-                                site-id="{{siteId}}"
-                                classes="roster-photo"
-                                {{#if official}}
-                                official
-                                {{/if}}
-                                {{#if ../printMode}}
-                                print
-                                {{/if}}
-                                {{#if ../viewPicture}}
-                                popup="on"
-                                {{/if}}
+                label="{{tr 'profile_picture_alt'}} {{displayName}}"
+                site-id="{{siteId}}"
+                classes="roster-photo"
+                {{#if official}}
+                official
+                {{/if}}
+                {{#if ../printMode}}
+                print
+                {{/if}}
+                {{#if ../viewPicture}}
+                popup="on"
+                {{/if}}
             >
             </sakai-user-photo>
         </div> <!-- /roster-picture-card -->

diff --git a/roster2/tool/src/handlebars/members_table.handlebars b/roster2/tool/src/handlebars/members_table.handlebars
@@ -3,15 +3,15 @@
     {{#if ../viewPicture}}
         <td class="roster-picture-cell">
             <sakai-user-photo user-id="{{userId}}"
-                                alt="{{tr 'profile_picture_alt'}} {{displayName}}"
-                                site-id="{{siteId}}"
-                                classes="roster-photo"
-                                {{#if official}}
-                                official
-                                {{/if}}
-                                {{#if ../printMode}}
-                                print
-                                {{/if}}
+                label="{{tr 'profile_picture_alt'}} {{displayName}}"
+                site-id="{{siteId}}"
+                classes="roster-photo"
+                {{#if official}}
+                official
+                {{/if}}
+                {{#if ../printMode}}
+                print
+                {{/if}}
             >
             </sakai-user-photo>
         </td> <!-- /roster-table-cell -->

diff --git a/webcomponents/tool/src/main/frontend/js/sakai-user-photo.js b/webcomponents/tool/src/main/frontend/js/sakai-user-photo.js
@@ -1,5 +1,6 @@
 import { SakaiElement } from "./sakai-element.js";
 import { html } from "./assets/lit-html/lit-html.js";
+import { ifDefined } from "./assets/lit-html/directives/if-defined.js";
 
 /**
  * A simple wrapper for Sakai's user profile picture.
@@ -13,6 +14,7 @@ import { html } from "./assets/lit-html/lit-html.js";
  * @property {string} [popup] By default, profile popups are off. Set this to "on" if you want them
  * @property {boolean} [official] Set this if you want the official Sakai photo
  * @property {string} [site-id] Set this to trigger permissions checks on the photo
+ * @property {string} [label] This will be used as the title and aria-label for the div
  * @property {boolean} [print] Set this to trigger the render of a print friendly img tag
  */
 class SakaiUserPhoto extends SakaiElement {
@@ -33,6 +35,7 @@ class SakaiUserPhoto extends SakaiElement {
       popup: { type: String },
       official: { type: Boolean },
       siteId: { attribute: "site-id", type: String },
+      label: { type: String },
       print: { type: Boolean },
     };
   }
@@ -63,15 +66,17 @@ class SakaiUserPhoto extends SakaiElement {
 
     if (this.print) {
       return html`
-        <img src="${this.url}" alt="Print view only" />
+        <img src="${this.url}" alt="${ifDefined(this.label ? this.label : undefined)}" />
       `;
     }
 
     return html`
       <div id="${this.generatedId}"
           data-user-id="${this.userId}"
           class="sakai-user-photo ${this.classes}"
-          style="background-image:url(${this.url}) ${this.noPopup ? "" : ";cursor: pointer;"}">
+          aria-label="${ifDefined(this.label ? this.label : undefined)}"
+          title="${ifDefined(this.label ? this.label : undefined)}"
+          style="background-image:url(${this.url}) ${this.popup === SakaiUserPhoto.OFF ? "" : ";cursor: pointer;"}">
     `;
   }
 }