Improved accessibility:

* message actions: opacity:1 on focus.
* list-item-action: opacity:1 on focus, tabindex=0 to be focusable.

src/plugins/bookmark-views/components/templates/item.js

@@ -13,6 +13,7 @@ export default (bm) => {
                 @click=${openRoomViaEvent}>${bm.getDisplayName()}</a>
 
             <a class="list-item-action remove-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }"
+                tabindex="0"
                 data-room-jid="${jid}"
                 data-bookmark-name="${bm.getDisplayName()}"
                 title="${info_remove_bookmark}"

src/plugins/roomslist/templates/roomslist.js

@@ -25,6 +25,7 @@ function tplBookmark (room) {
     const i18n_bookmark = __('Bookmark');
     return html`
         <a class="list-item-action add-bookmark"
+            tabindex="0"
             data-room-jid="${room.get('jid')}"
             data-bookmark-name="${room.getDisplayName()}"
             @click=${(ev) => addBookmarkViaEvent(ev)}
@@ -75,6 +76,7 @@ function tplRoomItem (el, room) {
             ${ api.settings.get('allow_bookmarks') ? tplBookmark(room) : '' }
 
             <a class="list-item-action close-room"
+                tabindex="0"
                 data-room-jid="${room.get('jid')}"
                 data-room-name="${room.getDisplayName()}"
                 title="${i18n_leave_room}"

src/shared/chat/styles/message-actions.scss

@@ -18,6 +18,9 @@ converse-message-actions {
         .btn--standalone {
             opacity: 0;
             margin-top: -0.2em;
+            &:focus {
+                opacity: 1;
+            }
         }
         .chat-msg__action {
             width: 100%;

src/shared/styles/lists.scss

@@ -91,6 +91,9 @@
                     color: var(--list-toggle-hover-color);
                     opacity: 1;
                 }
+                &:focus {
+                    opacity: 1;
+                }
             }
 
             .list-item-action--visible {