Add more navigational landmarks and headings to improve screen reader navigation (#622)

* Turn the section that contains the conversation into a main landmark.
* Make the header text that contains the contact or group name into a heading level 1.
* Make the text that denotes the start of unread messages into a heading level 3, to account for the possible heading level 2 below the header that sometimes appears.
* Make the quoted text in a message a blockquote (WAI-ARIA 1.2) so it is distinguishable from the reply.

This is all using non-intrusive WAI-ARIA roles and properties that adds screen reader semantics, but does not change the host language markup otherwise.

Fixes #621

src/directives/message.html

@@ -64,7 +64,7 @@
     </div>
     <div ng-if="ctrl.message.statusType == 'firstUnreadMessage'" class="unread-separator">
         <div class="line"></div>
-        <p class="text" translate>messenger.UNREAD_MESSAGES</p>
+        <p class="text" role="heading" aria-level="3" translate>messenger.UNREAD_MESSAGES</p>
         <div class="line"></div>
     </div>
 </article>

src/directives/message_quote.ts

@@ -33,7 +33,7 @@ export default [
                 this.contact = () => webClientService.contacts.get(this.quote.identity);
             }],
             template: `
-                <div class="message-quote-content" ng-style="{'border-color': ctrl.contact().color}">
+                <div class="message-quote-content" ng-style="{'border-color': ctrl.contact().color}" role="blockquote">
                     <span class="message-name" ng-style="{'color': ctrl.contact().color}"
                         ng-bind-html="ctrl.contact().displayName | escapeHtml | emojify"></span>
                     <span class="message-quote" ng-bind-html="ctrl.quote.text | escapeHtml | markify | emojify | linkify | mentionify | nlToBr"></span>

src/partials/messenger.conversation.html

@@ -10,7 +10,7 @@
             <eee-avatar eee-receiver="ctrl.receiver"
                         eee-resolution="'low'"></eee-avatar>
         </div>
-        <div class="header-details" ng-click="ctrl.showReceiver()">
+        <div class="header-details" role="heading" aria-level="1" ng-click="ctrl.showReceiver()">
             <div class="conversation-header-details-name"
                  ng-bind-html="ctrl.receiver.displayName | escapeHtml | emojify"></div>
             <div class="conversation-header-details-detail" ng-if="ctrl.type === 'contact'">

src/partials/messenger.html

@@ -4,6 +4,6 @@
     <section id="navigation" ui-view="navigation"></section>
 
     <!-- Conversation: messenger.conversation.html -->
-    <section id="detail" ui-view="content"></section>
+    <section id="detail" ui-view="content" role="main"></section>
 
 </div>