Accessibility tweaks (#15)

...and some minor theme related additions (Lumo/Material).
vaadin · Feb 9, 2021 · 121fa4c · 121fa4c
1 parent d84d1b3
commit 121fa4c
Show file tree

Hide file tree

Showing 14 changed files with 30 additions and 22 deletions.
diff --git a/src/vaadin-message-list.js b/src/vaadin-message-list.js
@@ -76,22 +76,27 @@ class MessageListElement extends ElementMixin(ThemableMixin(PolymerElement)) {
           display: none !important;
         }
       </style>
-      <template is="dom-repeat" items="[[items]]">
-        <vaadin-message
-          time="[[item.time]]"
-          user-name="[[item.userName]]"
-          user-abbr="[[item.userAbbr]]"
-          user-img="[[item.userImg]]"
-          user-color-index="[[item.userColorIndex]]"
-          >[[item.text]]</vaadin-message
-        >
-      </template>
+      <div role="list">
+        <template is="dom-repeat" items="[[items]]">
+          <vaadin-message
+            time="[[item.time]]"
+            user-name="[[item.userName]]"
+            user-abbr="[[item.userAbbr]]"
+            user-img="[[item.userImg]]"
+            user-color-index="[[item.userColorIndex]]"
+            role="listitem"
+            >[[item.text]]</vaadin-message
+          >
+        </template>
+      </div>
     `;
   }
 
   ready() {
     super.ready();
-    this.setAttribute('role', 'list');
+    this.setAttribute('aria-relevant', 'additions');
+    this.setAttribute('role', 'log');
+    this.setAttribute('tabindex', '0');
   }
 
   static get is() {

diff --git a/src/vaadin-message.js b/src/vaadin-message.js
@@ -112,7 +112,9 @@ class MessageElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         }
 
         vaadin-avatar {
+          border: none;
           flex-shrink: 0;
+          margin: 0;
         }
 
         [part='content'] {
@@ -151,8 +153,6 @@ class MessageElement extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   ready() {
     super.ready();
-    this.setAttribute('aria-live', 'polite');
-    this.setAttribute('role', 'listitem');
   }
 
   static get is() {

diff --git a/test/visual/screens/vaadin-message/lumo-message-list-ltr.png b/test/visual/screens/vaadin-message/lumo-message-list-ltr.png
diff --git a/test/visual/screens/vaadin-message/lumo-message-list-rtl.png b/test/visual/screens/vaadin-message/lumo-message-list-rtl.png
diff --git a/test/visual/screens/vaadin-message/lumo-message-ltr.png b/test/visual/screens/vaadin-message/lumo-message-ltr.png
diff --git a/test/visual/screens/vaadin-message/lumo-message-rtl.png b/test/visual/screens/vaadin-message/lumo-message-rtl.png
diff --git a/test/visual/screens/vaadin-message/material-message-list-ltr.png b/test/visual/screens/vaadin-message/material-message-list-ltr.png
diff --git a/test/visual/screens/vaadin-message/material-message-list-rtl.png b/test/visual/screens/vaadin-message/material-message-list-rtl.png
diff --git a/test/visual/screens/vaadin-message/material-message-ltr.png b/test/visual/screens/vaadin-message/material-message-ltr.png
diff --git a/test/visual/screens/vaadin-message/material-message-rtl.png b/test/visual/screens/vaadin-message/material-message-rtl.png
diff --git a/theme/lumo/vaadin-message-list-styles.js b/theme/lumo/vaadin-message-list-styles.js
@@ -8,8 +8,9 @@ import './vaadin-message-styles.js';
 registerStyles(
   'vaadin-message-list',
   css`
-    :host {
-      padding: var(--lumo-space-s);
+    :host(:focus) {
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+      outline: none;
     }
   `,
   { moduleId: 'lumo-message-list' }

diff --git a/theme/lumo/vaadin-message-styles.js b/theme/lumo/vaadin-message-styles.js
@@ -21,12 +21,12 @@ registerStyles(
     }
 
     vaadin-avatar {
-      margin-right: var(--lumo-space-s);
-      margin-top: calc(var(--lumo-space-xs) * 1.5);
+      margin-right: var(--lumo-space-m);
+      margin-top: var(--lumo-space-s);
     }
 
     :host([dir='rtl']) vaadin-avatar {
-      margin-left: var(--lumo-space-s);
+      margin-left: var(--lumo-space-m);
       margin-right: 0;
     }
 

diff --git a/theme/material/vaadin-message-list-styles.js b/theme/material/vaadin-message-list-styles.js
@@ -6,8 +6,8 @@ import './vaadin-message-styles.js';
 registerStyles(
   'vaadin-message-list',
   css`
-    :host {
-      padding: 8px;
+    div[role='list'] {
+      padding: 8px 0;
     }
   `,
   { moduleId: 'material-message-list' }

diff --git a/theme/material/vaadin-message-styles.js b/theme/material/vaadin-message-styles.js
@@ -17,12 +17,14 @@ registerStyles(
     }
 
     vaadin-avatar {
-      margin-right: 0.5em;
+      height: 2.5em;
+      margin-right: 1em;
       margin-top: 0.125em;
+      width: 2.5em;
     }
 
     :host([dir='rtl']) vaadin-avatar {
-      margin-left: 0.5em;
+      margin-left: 1em;
       margin-right: 0;
     }