Add what-input to allow different scoping to focus-visible for MessageActionBar keyboard a11y

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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"
   },

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;
 }

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";

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"