From cee42b4bcc6d1290e37216bb21afe4e9fcbdcfb3 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Tue, 20 Aug 2024 15:30:45 +0200
Subject: [PATCH] Improved accessibility (#118):

* adding role="button" or type="button" where missing.
---
 CHANGELOG.md                                           |  1 +
 conversejs/build-conversejs.sh                         |  2 ++
 conversejs/custom/plugins/notes/templates/muc-note.js  |  4 ++--
 conversejs/custom/plugins/notes/templates/muc-notes.js |  4 ++--
 conversejs/custom/plugins/poll/templates/poll.js       |  6 +++---
 .../custom/plugins/tasks/templates/muc-task-list.js    | 10 +++++-----
 conversejs/custom/plugins/tasks/templates/muc-task.js  |  4 ++--
 .../shared/components/muc-app/templates/muc-app.js     |  2 +-
 .../custom/templates/livechat-external-login-modal.js  |  6 ++++--
 conversejs/custom/templates/muc-bottom-panel.js        |  2 +-
 conversejs/lib/plugins/livechat-specific/toolbar.ts    |  2 +-
 11 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60928cc9..29ae40b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ With the new [mod_firewall](https://livingston.frama.io/peertube-plugin-livechat
 
 ### Minor changes and fixes
 
+* #118: improved accessibility.
 * Avatar set for anonymous users: new 'none' choice (that will fallback to Converse new colorized avatars).
 * New translation: Albanian.
 * Translation updates: Crotian, Japanese, traditional Chinese.
diff --git a/conversejs/build-conversejs.sh b/conversejs/build-conversejs.sh
index a2838543..6e5874b3 100644
--- a/conversejs/build-conversejs.sh
+++ b/conversejs/build-conversejs.sh
@@ -32,6 +32,8 @@ CONVERSE_VERSION="livechat_converse_11"
 CONVERSE_COMMIT="1625f9b6ee81fa9ebd8df5cba306bde478f1943b"
 # 2024-08-06: including new getOccupantActionButtons hook (waiting for merge in Converse upstream)
 CONVERSE_COMMIT="5b35bd31c7e26c1f5396cd65eef69293d8b388c1"
+# 2024-08-20: accessibility fixes
+CONVERSE_COMMIT="7b00a2e0b4a13cea7800f4f100c2673785f94486"
 
 rootdir="$(pwd)"
 src_dir="$rootdir/conversejs"
diff --git a/conversejs/custom/plugins/notes/templates/muc-note.js b/conversejs/custom/plugins/notes/templates/muc-note.js
index 3ef2a6d4..16815e20 100644
--- a/conversejs/custom/plugins/notes/templates/muc-note.js
+++ b/conversejs/custom/plugins/notes/templates/muc-note.js
@@ -41,12 +41,12 @@ export function tplMucNote (el, note) {
                 <converse-icon class="fa fa-magnifying-glass" size="1em" title=${i18nSearch}></converse-icon>
               </button>`
         }
-        <button class="note-action" title="${__('Edit')}"
+        <button type="button" class="note-action" title="${__('Edit')}"
           @click=${el.toggleEdit}
         >
           <converse-icon class="fa fa-edit" size="1em"></converse-icon>
         </button>
-        <button class="note-action" title="${i18nDelete}"
+        <button type="button" class="note-action" title="${i18nDelete}"
           @click=${el.deleteNote}
         >
           <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
diff --git a/conversejs/custom/plugins/notes/templates/muc-notes.js b/conversejs/custom/plugins/notes/templates/muc-notes.js
index 0d5e5a88..e488dea2 100644
--- a/conversejs/custom/plugins/notes/templates/muc-notes.js
+++ b/conversejs/custom/plugins/notes/templates/muc-notes.js
@@ -25,7 +25,7 @@ function tplFilters (el) {
             ></livechat-converse-muc-note-occupant>`
           : ''
       }
-      <button class="notes-action" @click=${(ev) => {
+      <button type="button" class="notes-action" @click=${(ev) => {
         ev?.preventDefault()
         el.filterNotes({})
       }} title="${__('Close')}">
@@ -85,7 +85,7 @@ function tplCreateButton (el) {
   const i18nCreateNote = __(LOC_moderator_note_create)
   return html`
     <div class="notes-actions">
-      <button class="notes-action" title="${i18nCreateNote}" @click=${el.openCreateNoteForm}>
+      <button type="button" class="notes-action" title="${i18nCreateNote}" @click=${el.openCreateNoteForm}>
         <converse-icon class="fa fa-plus" size="1em"></converse-icon>
       </button>
     </div>`
diff --git a/conversejs/custom/plugins/poll/templates/poll.js b/conversejs/custom/plugins/poll/templates/poll.js
index b95b1368..152a0f32 100644
--- a/conversejs/custom/plugins/poll/templates/poll.js
+++ b/conversejs/custom/plugins/poll/templates/poll.js
@@ -83,21 +83,21 @@ export function tplPoll (el, currentPoll, canVote) {
   return html`<div class="${currentPoll.over ? 'livechat-poll-over' : ''}">
     <p class="livechat-poll-question">
       ${currentPoll.over
-        ? html`<button class="livechat-poll-close" @click=${el.closePoll} title="${__('Close')}">
+        ? html`<button type="button" class="livechat-poll-close" @click=${el.closePoll} title="${__('Close')}">
             <converse-icon class="fa fa-times" size="1em"></converse-icon>
           </button>`
         : ''
       }
       ${el.collapsed
         ? html`
-          <button @click=${el.toggle} class="livechat-poll-toggle">
+          <button type="button" @click=${el.toggle} class="livechat-poll-toggle">
             <converse-icon
               color="var(--muc-toolbar-btn-color)"
               class="fa fa-angle-right"
               size="1em"></converse-icon>
           </button>`
         : html`
-          <button @click=${el.toggle} class="livechat-poll-toggle">
+          <button type="button" @click=${el.toggle} class="livechat-poll-toggle">
             <converse-icon
               color="var(--muc-toolbar-btn-color)"
               class="fa fa-angle-down"
diff --git a/conversejs/custom/plugins/tasks/templates/muc-task-list.js b/conversejs/custom/plugins/tasks/templates/muc-task-list.js
index cc93ea81..0de8494e 100644
--- a/conversejs/custom/plugins/tasks/templates/muc-task-list.js
+++ b/conversejs/custom/plugins/tasks/templates/muc-task-list.js
@@ -19,14 +19,14 @@ export default function tplMucTaskList (el, tasklist) {
     <div class="task-list-line draggables-line">
       ${el.collapsed
         ? html`
-          <button @click=${el.toggleTasks} class="task-list-toggle-tasks">
+          <button type="button" @click=${el.toggleTasks} class="task-list-toggle-tasks">
             <converse-icon
               color="var(--muc-toolbar-btn-color)"
               class="fa fa-angle-right"
               size="1em"></converse-icon>
           </button>`
         : html`
-          <button @click=${el.toggleTasks} class="task-list-toggle-tasks">
+          <button type="button" @click=${el.toggleTasks} class="task-list-toggle-tasks">
             <converse-icon
               color="var(--muc-toolbar-btn-color)"
               class="fa fa-angle-down"
@@ -38,15 +38,15 @@ export default function tplMucTaskList (el, tasklist) {
           <div class="task-list-name">
             <a @click=${el.toggleTasks}>${tasklist.get('name')}</a>
           </div>
-          <button class="task-list-action" title="${i18nCreateTask}" @click=${el.openAddTaskForm}>
+          <button type="button" class="task-list-action" title="${i18nCreateTask}" @click=${el.openAddTaskForm}>
             <converse-icon class="fa fa-plus" size="1em"></converse-icon>
           </button>
-          <button class="task-list-action" title="${__('Edit')}"
+          <button type="button" class="task-list-action" title="${__('Edit')}"
             @click=${el.toggleEdit}
           >
             <converse-icon class="fa fa-edit" size="1em"></converse-icon>
           </button>
-          <button class="task-list-action" title="${i18nDelete}"
+          <button type="button" class="task-list-action" title="${i18nDelete}"
             @click=${el.deleteTaskList}
           >
             <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
diff --git a/conversejs/custom/plugins/tasks/templates/muc-task.js b/conversejs/custom/plugins/tasks/templates/muc-task.js
index bbd2fcad..e003341a 100644
--- a/conversejs/custom/plugins/tasks/templates/muc-task.js
+++ b/conversejs/custom/plugins/tasks/templates/muc-task.js
@@ -30,12 +30,12 @@ export function tplMucTask (el, task) {
           </label>
         </div>
         <div class="task-description">${task.get('description') ?? ''}</div>
-        <button class="task-action" title="${__('Edit')}"
+        <button type="button" class="task-action" title="${__('Edit')}"
           @click=${el.toggleEdit}
         >
           <converse-icon class="fa fa-edit" size="1em"></converse-icon>
         </button>
-        <button class="task-action" title="${i18nDelete}"
+        <button type="button" class="task-action" title="${i18nDelete}"
           @click=${el.deleteTask}
         >
           <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>
diff --git a/conversejs/custom/shared/components/muc-app/templates/muc-app.js b/conversejs/custom/shared/components/muc-app/templates/muc-app.js
index 9db12559..85413da9 100644
--- a/conversejs/custom/shared/components/muc-app/templates/muc-app.js
+++ b/conversejs/custom/shared/components/muc-app/templates/muc-app.js
@@ -14,7 +14,7 @@ export function tplMUCApp (el, i18nTitle, helpUrl, i18nHelp, content) {
           size="1em"
           title="${i18nHelp}"
       ></converse-icon></a>
-      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
+      <button type="button" class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
           <converse-icon class="fa fa-times" size="1em"></converse-icon>
       </button>
     </div>
diff --git a/conversejs/custom/templates/livechat-external-login-modal.js b/conversejs/custom/templates/livechat-external-login-modal.js
index 52e33027..0bba91de 100644
--- a/conversejs/custom/templates/livechat-external-login-modal.js
+++ b/conversejs/custom/templates/livechat-external-login-modal.js
@@ -117,7 +117,7 @@ export const tplExternalLoginModal = (el, o) => {
               <div class="livechat-external-login-modal-external-auth-oidc-block">
                 ${
                   externalButtons.map(button => html`
-                    <button
+                    <button type="button"
                       class="btn btn-primary ${button.class}"
                       @click=${
                         (ev) => {
@@ -187,7 +187,9 @@ export const tplExternalLoginModal = (el, o) => {
             // eslint-disable-next-line no-undef
             __(LOC_login_remote_peertube_video_not_found_try_anyway)
           }
-          <button class="btn btn-primary" @click=${() => el.openUrlTargetTop(o.remote_peertube_try_anyway_url)}>${
+          <button type="button" class="btn btn-primary"
+            @click=${() => el.openUrlTargetTop(o.remote_peertube_try_anyway_url)}
+          >${
             // eslint-disable-next-line no-undef
             __(LOC_login_remote_peertube_video_not_found_try_anyway_button)
           }</button>
diff --git a/conversejs/custom/templates/muc-bottom-panel.js b/conversejs/custom/templates/muc-bottom-panel.js
index 2f95bb13..91b12bb4 100644
--- a/conversejs/custom/templates/muc-bottom-panel.js
+++ b/conversejs/custom/templates/muc-bottom-panel.js
@@ -117,7 +117,7 @@ const tplViewerMode = (o) => {
             : html`
               <hr>
               <div class="livechat-viewer-mode-external-login">
-                <button class="btn btn-primary" @click=${ev => {
+                <button type="button" class="btn btn-primary" @click=${ev => {
                   ev.preventDefault()
                   api.modal.show('converse-livechat-external-login')
                 }}>${i18nExternalLogin}</button>
diff --git a/conversejs/lib/plugins/livechat-specific/toolbar.ts b/conversejs/lib/plugins/livechat-specific/toolbar.ts
index 5da6b3dc..32c4ce6f 100644
--- a/conversejs/lib/plugins/livechat-specific/toolbar.ts
+++ b/conversejs/lib/plugins/livechat-specific/toolbar.ts
@@ -43,7 +43,7 @@ function getToolbarButtons (this: any, toolbarEl: any, buttons: any[]): any {
             size="1em">
         </converse-icon>`
   buttons.push(html`
-      <button class="toggle-occupants btn"
+      <button class="toggle-occupants btn" type="button"
               title="${toolbarEl.hidden_occupants ? i18nShowOccupants : i18nHideOccupants}"
               @click=${(ev?: Event) => {
                 ev?.preventDefault()