Changeset 12073 for trunk/src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

Timestamp:

05/10/2018 06:23:58 AM (8 years ago)

Author:

imath

Message:

BP Nouveau - Messages UI: Improve a11y in message boxes.

Message boxes are listing messages (inbox, starbox, sentbox). Using screen reader softwares or the keyboard, it is now a better experience to navigate in these lists. Pressing the Tab key makes you navigate from the Message Checkbox, to the sender/recipients link and finally to the Message title. Once on a Message title, pressing the enter key activates the message and updates the preview box. Pressing on the enter key another time opens the full conversation.

Huge Props mercime

Fixes #7731

File:

• trunk/src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss (modified) (4 diffs)

trunk/src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

@@ -97 +97 @@
         }
 
-        .thread-from {
+        .thread-from,
+        .thread-to {
 
             @include box-item-size(1, 2, 20%);
@@ -110 +111 @@
                 line-height: 1.1;
             }
+
+            .num-recipients {
+                color: $meta-text;
+                font-weight: 400;
+
+                @include font-size(12);
+                margin: 0;
+            }
         }
 
@@ -134 +143 @@
         }
 
+        // the unread parent li
+        &.unread {
+            font-weight: 700;
+        }
+
         .thread-content {
-            cursor: pointer;
 
             .excerpt {
@@ -145 +158 @@
 
             .thread-from,
+            .thread-to,
             .thread-subject {