Merge pull request #3591 from matrix-org/t3chguy/a11y_fix

Fix focus-within on EventTile and more showing onClick
matrix-org · Nov 6, 2019 · 68a3fab · 68a3fab
2 parents 0926ff7 + 328fc5a
commit 68a3fab
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
@@ -51,7 +51,7 @@ limitations under the License.
     height: 36px;
 }
 
-.mx_RoomSubList_labelContainer:focus-within {
+.mx_RoomSubList_labelContainer.focus-visible:focus-within {
     background-color: $roomtile-focused-bg-color;
 }
 

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -138,14 +138,14 @@ limitations under the License.
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
 .mx_EventTile_last > div > a > .mx_MessageTimestamp,
 .mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile:focus-within > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
+.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
     visibility: visible;
 }
 
 .mx_EventTile:hover .mx_MessageActionBar,
-.mx_EventTile:focus-within .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
     visibility: visible;
 }
 
@@ -167,9 +167,13 @@ limitations under the License.
     }
 }
 
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 78px;
+}
+
 .mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile:focus-within .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
     background-color: $event-selected-color;
 }
 
@@ -384,10 +388,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     padding-left: 5px;
 }
 
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
-    padding-left: 78px;
-}
-
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
     padding-left: 60px;
@@ -469,7 +469,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile:hover .mx_EventTile_body pre,
-.mx_EventTile:focus-within .mx_EventTile_body pre {
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
     border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }