From 4be8b878692e20aee94bd0487e9a7cb073f00a9b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 7 Dec 2019 13:07:52 +0000
Subject: [PATCH] Add what-input to allow different scoping to focus-visible
 for MessageActionBar keyboard a11y

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                            | 1 +
 res/css/views/rooms/_EventTile.scss     | 1 +
 src/components/structures/MatrixChat.js | 2 ++
 yarn.lock                               | 5 +++++
 4 files changed, 9 insertions(+)

diff --git a/package.json b/package.json
index 5b82d9b111..58216f0181 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
     "velocity-animate": "^1.5.2",
+    "what-input": "^5.2.6",
     "whatwg-fetch": "^1.1.1",
     "zxcvbn": "^4.4.2"
   },
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 43aed34a23..5359992f84 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -169,6 +169,7 @@ limitations under the License.
 
 .mx_EventTile:hover .mx_MessageActionBar,
 .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
 .mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
     visibility: visible;
 }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 585499ddeb..1ea7243303 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -24,6 +24,8 @@ import Matrix from "matrix-js-sdk";
 
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';
+// what-input helps improve keyboard accessibility
+import 'what-input';
 
 import Analytics from "../../Analytics";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
diff --git a/yarn.lock b/yarn.lock
index 883a1ee90c..f5f291d15d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8646,6 +8646,11 @@ webpack@^4.20.2:
     watchpack "^1.6.0"
     webpack-sources "^1.4.1"
 
+what-input@^5.2.6:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/what-input/-/what-input-5.2.6.tgz#ac6f003bf8d3592a0031dea7a03565469b00020b"
+  integrity sha512-a0BcI5YR7xp87vSzGcbN0IszJKpUQuTmrZaTSQBl7TLDIdKj6rDhluQ7b/7lYGG81gWDvkySsEvwv4BW5an9kg==
+
 whatwg-fetch@>=0.10.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"