Improved accessibility:

* Adding role="heading", aria-level="2" on userinfo, MUC title and
  chatbox titles, to improve navigation with screen readers.
* Adding role="heading", aria-level="3" on controlbox-heading elements.

src/plugins/chatview/templates/chat-head.js

@@ -22,7 +22,7 @@ export default (o) => {
             <div class="chatbox-title--row">
                 ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
                 ${ (o.type !== HEADLINES_TYPE) ? html`<a class="show-msg-author-modal" @click=${o.showUserDetailsModal}>${ avatar }</a>` : '' }
-                <div class="chatbox-title__text" title="${o.jid}">
+                <div class="chatbox-title__text" title="${o.jid}" role="heading" aria-level="2">
                     ${ (o.type !== HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ display_name }</a>` : display_name }
                 </div>
             </div>

src/plugins/headlines-view/templates/feeds-list.js

@@ -24,7 +24,9 @@ export default (el) => {
     return html`
         <div class="controlbox-section" id="headline">
             <div class="d-flex controlbox-padded ${ feeds.length ? '' : 'hidden' }">
-                <span class="w-100 controlbox-heading controlbox-heading--headline">${heading_headline}</span>
+                <span class="w-100 controlbox-heading controlbox-heading--headline"
+                    role="heading" aria-level="3"
+                >${heading_headline}</span>
             </div>
         </div>
         <div class="list-container list-container--headline ${ feeds.length ? '' : 'hidden' }">

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

@@ -34,6 +34,7 @@ export default (el) => {
                 ${ (!_converse.api.settings.get("singleton")) ?
                         html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
                 <div class="chatbox-title__text"
+                     role="heading" aria-level="2"
                      title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">
                     ${ el.model.getDisplayName() }
                     ${ (o.bookmarked) ?

src/plugins/profile/templates/profile.js

@@ -31,7 +31,9 @@ export default (el) => {
                         nonce=${el.model.vcard?.get('vcard_updated')}
                         height="40" width="40"></converse-avatar>
                 </a>
-                <span class="username w-100 align-self-center">${el.model.getDisplayName()}</span>
+                <span class="username w-100 align-self-center" role="heading" aria-level="2">
+                    ${el.model.getDisplayName()}
+                </span>
                 <converse-controlbox-buttons></converse-controlbox-buttons>
             </div>
             <div class="d-flex xmpp-status">

src/plugins/roomslist/templates/roomslist.js

@@ -180,7 +180,7 @@ export default (el) => {
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--groupchats">
-                <a class="list-toggle open-rooms-toggle"
+                <a class="list-toggle open-rooms-toggle" role="heading" aria-level="3"
                    title="${i18n_desc_rooms}"
                    @click=${ev => el.toggleRoomsList(ev)}>
 

src/plugins/rosterview/templates/roster.js

@@ -80,7 +80,9 @@ export default (el) => {
     return html`
         <div class="d-flex controlbox-padded">
             <span class="w-100 controlbox-heading controlbox-heading--contacts">
-                <a class="list-toggle open-contacts-toggle" title="${i18n_toggle_contacts}" @click=${el.toggleRoster}>
+                <a class="list-toggle open-contacts-toggle" title="${i18n_toggle_contacts}"
+                    role="heading" aria-level="3"
+                    @click=${el.toggleRoster}>
                     ${i18n_heading_contacts}
 
                     ${ roster.length ? html`<converse-icon