Fix: "Click to mention..." title was misplaced in MUC occupant list.

The title was on the entire <li> elements, and was saying "click to
mention". But the <li> includes also the avatar that will open the
occupant modal, and not mention it.

CHANGES.md

@@ -27,6 +27,7 @@
 - Change contacts filter to rename the anachronistic `Online` state to `Available`.
 - Enable [reuse_scram_keys](https://conversejs.org/docs/html/configuration.html#reuse-scram-keys) by default.
 - New loadEmojis hook, to customize emojis at runtime.
+- Fix: "Click to mention..." title was misplaced in MUC occupant list.
 
 ### Breaking changes:
 

src/plugins/muc-views/templates/occupant.js

@@ -57,7 +57,7 @@ export default (o, chat) => {
     }
 
     return html`
-        <li class="occupant" id="${o.id}" title="${occupant_title(o)}">
+        <li class="occupant" id="${o.id}">
             <div class="row no-gutters">
                 <div class="col-auto">
                     <a class="show-msg-author-modal" @click=${(ev) => showOccupantModal(ev, o)}>
@@ -77,6 +77,7 @@ export default (o, chat) => {
                 </div>
                 <div class="col occupant-nick-badge">
                     <span class="occupant-nick"
+                          title="${occupant_title(o)}"
                           @click=${chat.onOccupantClicked}
                           style="${getAuthorStyle(o)}">${o.getDisplayName()}</span>
                     <span class="occupant-badges">

src/plugins/muc-views/tests/occupants.js

@@ -194,15 +194,14 @@ describe("The occupants sidebar", function () {
         occupants = view.querySelectorAll('.occupant-list li');
         expect(occupants.length).toBe(2);
         expect(occupants[0].querySelector('.occupant-nick').textContent.trim()).toBe("moderatorman");
+        expect(occupants[0].querySelector('.occupant-nick').getAttribute('title')).toBe(
+            contact_jid + ' This user is a moderator. Click to mention moderatorman in your message.'
+        );
         expect(occupants[1].querySelector('.occupant-nick').textContent.trim()).toBe("romeo");
         expect(occupants[0].querySelectorAll('.badge').length).toBe(2);
         expect(occupants[0].querySelectorAll('.badge')[0].textContent.trim()).toBe('Admin');
         expect(occupants[0].querySelectorAll('.badge')[1].textContent.trim()).toBe('Moderator');
 
-        expect(occupants[0].getAttribute('title')).toBe(
-            contact_jid + ' This user is a moderator. Click to mention moderatorman in your message.'
-        );
-
         contact_jid = mock.cur_names[3].replace(/ /g,'.').toLowerCase() + '@montague.lit';
         presence = $pres({
             to:'romeo@montague.lit/pda',
@@ -219,10 +218,10 @@ describe("The occupants sidebar", function () {
         occupants = view.querySelector('.occupant-list').querySelectorAll('li');
         expect(occupants.length).toBe(3);
         expect(occupants[2].querySelector('.occupant-nick').textContent.trim()).toBe("visitorwoman");
-        expect(occupants[2].querySelectorAll('.badge').length).toBe(1);
-        expect(sizzle('.badge', occupants[2]).pop().textContent.trim()).toBe('Visitor');
-        expect(occupants[2].getAttribute('title')).toBe(
+        expect(occupants[2].querySelector('.occupant-nick').getAttribute('title')).toBe(
             contact_jid + ' This user can NOT send messages in this groupchat. Click to mention visitorwoman in your message.'
         );
+        expect(occupants[2].querySelectorAll('.badge').length).toBe(1);
+        expect(sizzle('.badge', occupants[2]).pop().textContent.trim()).toBe('Visitor');
     }));
 });