Improved accessibility:

* adding role=button attribute on dropdown actions, for better
  accessibility with screen readers.

CHANGES.md

@@ -33,6 +33,7 @@
 - New `loadEmojis` hook, to customize emojis at runtime.
 - Upgrade to Bootstrap 5
 - Add a new theme 'Cyberpunk' and remove the old 'Concord' theme.
+- Improved accessibility.
 
 ### Breaking changes:
 

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

@@ -57,6 +57,7 @@ export default (el, o) => {
         btns.push(html`
             <a href="#"
                class="dropdown-item open-invite-modal"
+               role="button"
                title="${i18n_invite_title}"
                @click=${(/** @type {MouseEvent} */ev) => el.showInviteModal(ev)}>
                 <converse-icon size="1em" class="fa fa-user-plus"></converse-icon>
@@ -69,6 +70,7 @@ export default (el, o) => {
         btns.push(html`
             <a href="#"
                class="dropdown-item toggle-filter"
+               role="button"
                @click=${(/** @type {MouseEvent} */ev) => el.toggleFilter(ev)}>
                 <converse-icon size="1em" class="fa fa-filter"></converse-icon>
                 ${is_filter_visible ? i18n_hide_filter : i18n_show_filter}
@@ -78,7 +80,8 @@ export default (el, o) => {
 
     if (btns.length) {
         btns.push(html`
-            <a href="#" class="dropdown-item" @click=${(/** @type {MouseEvent} */ev) => el.closeSidebar(ev)}>
+            <a href="#" class="dropdown-item" role="button"
+                @click=${(/** @type {MouseEvent} */ev) => el.closeSidebar(ev)}>
                 <converse-icon size="1em" class="fa fa-times"></converse-icon>
                 ${i18n_close}
             </a>

src/plugins/roomslist/templates/roomslist.js

@@ -153,20 +153,20 @@ export default (el) => {
     const is_closed = el.model.get('toggle_state') === CLOSED;
 
     const btns = [
-        html`<a class="dropdown-item show-bookmark-list-modal"
+        html`<a class="dropdown-item show-bookmark-list-modal" role="button"
                 @click=${(ev) => api.modal.show('converse-bookmark-list-modal', { 'model': el.model }, ev)}
                 data-toggle="modal">
                     <converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
                     ${i18n_show_bookmarks}
         </a>`,
-        html`<a class="dropdown-item show-list-muc-modal"
+        html`<a class="dropdown-item show-list-muc-modal" role="button"
                 @click=${(ev) => api.modal.show('converse-muc-list-modal', { 'model': el.model }, ev)}
                 data-toggle="modal"
                 data-target="#muc-list-modal">
                     <converse-icon class="fa fa-list-ul" size="1em"></converse-icon>
                     ${i18n_title_list_rooms}
         </a>`,
-        html`<a class="dropdown-item show-add-muc-modal"
+        html`<a class="dropdown-item show-add-muc-modal" role="button"
                 @click=${(ev) => api.modal.show('converse-add-muc-modal', { 'model': el.model }, ev)}
                 data-toggle="modal"
                 data-target="#add-chatrooms-modal">

src/plugins/rosterview/templates/roster.js

@@ -39,7 +39,7 @@ export default (el) => {
         btns.push(html`
             <a
                 href="#"
-                class="dropdown-item add-contact"
+                class="dropdown-item add-contact" role="button"
                 @click=${(/** @type {MouseEvent} */ ev) => el.showAddContactModal(ev)}
                 title="${i18n_title_add_contact}"
                 data-toggle="modal"
@@ -54,7 +54,7 @@ export default (el) => {
     if (roster.length > 5) {
         btns.push(html`
             <a href="#"
-               class="dropdown-item toggle-filter"
+               class="dropdown-item toggle-filter" role="button"
                @click=${(/** @type {MouseEvent} */ ev) => el.toggleFilter(ev)}>
                 <converse-icon size="1em" class="fa fa-filter"></converse-icon>
                 ${is_filter_visible ? i18n_hide_filter : i18n_show_filter}
@@ -67,7 +67,7 @@ export default (el) => {
         btns.push(html`
             <a
                 href="#"
-                class="dropdown-item"
+                class="dropdown-item" role="button"
                 @click=${(/** @type {MouseEvent} */ ev) => el.syncContacts(ev)}
                 title="${i18n_title_sync_contacts}"
             >

src/shared/chat/message-actions.js

@@ -83,7 +83,7 @@ class MessageActions extends CustomElement {
 
     static getActionsDropdownItem (o) {
         return html`
-            <button class="dropdown-item chat-msg__action ${o.button_class}" @click=${o.handler}>
+            <button type="button" class="dropdown-item chat-msg__action ${o.button_class}" @click=${o.handler}>
                 <converse-icon
                     class="${o.icon_class}"
                     color="var(--inverse-link-color)"

src/shared/chat/utils.js

@@ -15,7 +15,9 @@ export async function getHeadingDropdownItem (promise_or_data) {
     const data = await promise_or_data;
     return data
         ? html`
-              <a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
+              <a href="#" role="button"
+                class="dropdown-item ${data.a_class}"
+                @click=${data.handler} title="${data.i18n_title}">
                   <converse-icon
                       size="1em"
                       class="fa ${data.icon_class}"