From e0f4b26512e4ed6305d443fe9043d4ef22c02745 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 28 Sep 2023 12:52:26 +0100
Subject: [PATCH] Remove focus-visible polyfill (#11677)

* Remove focus-visible polyfill

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

* Update snapshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                                              | 1 -
 res/css/_common.pcss                                      | 4 ++--
 res/css/views/dialogs/_CreateRoomDialog.pcss              | 2 +-
 res/css/views/elements/_Slider.pcss                       | 2 +-
 res/css/views/elements/_StyledCheckbox.pcss               | 2 +-
 res/css/views/elements/_StyledRadioButton.pcss            | 2 +-
 res/css/views/rooms/_EventTile.pcss                       | 8 ++++----
 res/css/views/rooms/_LinkPreviewGroup.pcss                | 2 +-
 src/components/structures/MatrixChat.tsx                  | 2 --
 test/components/structures/ThreadPanel-test.tsx           | 1 -
 .../structures/__snapshots__/MatrixChat-test.tsx.snap     | 6 ++----
 .../structures/__snapshots__/ThreadPanel-test.tsx.snap    | 3 +--
 .../views/context_menus/SpaceContextMenu-test.tsx         | 1 -
 .../__snapshots__/SpaceContextMenu-test.tsx.snap          | 3 +--
 yarn.lock                                                 | 5 -----
 15 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 984d377a58..54d27efe97 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,6 @@
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
         "filesize": "10.0.12",
-        "focus-visible": "^5.2.0",
         "gfm.css": "^1.1.2",
         "glob-to-regexp": "^0.4.1",
         "graphemer": "^1.4.0",
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index c24ee60a82..d52378400d 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -230,7 +230,7 @@ textarea:focus {
 /* accessible (focusable) components. Not intended for buttons, but */
 /* should be used on things like focusable containers where the outline */
 /* is usually not helping anyone. */
-*:focus:not(.focus-visible) {
+*:focus:not(:focus-visible) {
     outline: none;
 }
 
@@ -585,7 +585,7 @@ legend {
     cursor: pointer;
     display: inline-block;
 
-    &:not(.focus-visible) {
+    &:not(:focus-visible) {
         outline: none;
     }
 }
diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss
index 4e3d90cffe..dabddf01cf 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.pcss
+++ b/res/css/views/dialogs/_CreateRoomDialog.pcss
@@ -28,7 +28,7 @@ limitations under the License.
             display: none;
         }
 
-        &:not(.focus-visible) {
+        &:not(:focus-visible) {
             outline: none;
         }
     }
diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss
index 89d7edcd5c..7fd3520c8b 100644
--- a/res/css/views/elements/_Slider.pcss
+++ b/res/css/views/elements/_Slider.pcss
@@ -35,7 +35,7 @@ limitations under the License.
             --active-color: $slider-background-color;
         }
 
-        &:focus:not(.focus-visible) {
+        &:focus:not(:focus-visible) {
             outline: none;
         }
 
diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss
index cbdcce6171..f2b0151bfa 100644
--- a/res/css/views/elements/_StyledCheckbox.pcss
+++ b/res/css/views/elements/_StyledCheckbox.pcss
@@ -70,7 +70,7 @@ limitations under the License.
             cursor: not-allowed;
         }
 
-        &.focus-visible {
+        &:focus-visible {
             & + label .mx_Checkbox_background {
                 @mixin unreal-focus;
             }
diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss
index 2f641a39af..5f67a36f81 100644
--- a/res/css/views/elements/_StyledRadioButton.pcss
+++ b/res/css/views/elements/_StyledRadioButton.pcss
@@ -78,7 +78,7 @@ limitations under the License.
             }
         }
 
-        &.focus-visible {
+        &:focus-visible {
             & + div {
                 @mixin unreal-focus;
             }
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index d65dfa4f95..032daa4839 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -224,7 +224,7 @@ $left-gutter: 64px;
             }
         }
 
-        &.focus-visible:focus-within,
+        &:focus-visible:focus-within,
         &.mx_EventTile_actionBarFocused,
         &.mx_EventTile_isEditing,
         &.mx_EventTile_selected {
@@ -870,7 +870,7 @@ $left-gutter: 64px;
         border: 1px solid transparent;
 
         .mx_EventTile:hover &,
-        .mx_EventTile.focus-visible:focus-within & {
+        .mx_EventTile:focus-visible:focus-within & {
             border: 1px solid $tertiary-content;
         }
     }
@@ -993,7 +993,7 @@ $left-gutter: 64px;
 .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 {
+.mx_EventTile:focus-visible:focus-within .mx_MessageActionBar {
     visibility: visible;
 }
 
@@ -1002,7 +1002,7 @@ $left-gutter: 64px;
 /* animation for when it's shown which means duplicating the style definition in */
 /* multiple places. */
 .mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
-    &:not(.focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
+    &:not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
         animation: none;
     }
 }
diff --git a/res/css/views/rooms/_LinkPreviewGroup.pcss b/res/css/views/rooms/_LinkPreviewGroup.pcss
index 3edb0722e4..2857db5a30 100644
--- a/res/css/views/rooms/_LinkPreviewGroup.pcss
+++ b/res/css/views/rooms/_LinkPreviewGroup.pcss
@@ -27,7 +27,7 @@ limitations under the License.
     }
 
     &:hover .mx_LinkPreviewGroup_hide img,
-    .mx_LinkPreviewGroup_hide.focus-visible:focus img {
+    .mx_LinkPreviewGroup_hide:focus-visible:focus img {
         visibility: visible;
     }
 
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 7dd885503e..1559aed266 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -35,8 +35,6 @@ import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 
-// focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by various components
-import "focus-visible";
 // what-input helps improve keyboard accessibility
 import "what-input";
 
diff --git a/test/components/structures/ThreadPanel-test.tsx b/test/components/structures/ThreadPanel-test.tsx
index 4691895826..b3025bb3ad 100644
--- a/test/components/structures/ThreadPanel-test.tsx
+++ b/test/components/structures/ThreadPanel-test.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import "focus-visible"; // to fix context menus
 import { mocked } from "jest-mock";
 import {
     MatrixClient,
diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
index 9f71bf91ce..a5280f599a 100644
--- a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -359,8 +359,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
         Cancel
       </button>
       <button
-        class="mx_Dialog_primary focus-visible"
-        data-focus-visible-added=""
+        class="mx_Dialog_primary"
         data-testid="dialog-primary-button"
         type="button"
       >
@@ -416,8 +415,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
         Cancel
       </button>
       <button
-        class="mx_Dialog_primary focus-visible"
-        data-focus-visible-added=""
+        class="mx_Dialog_primary"
         data-testid="dialog-primary-button"
         type="button"
       >
diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
index b6266893dd..b395e603a6 100644
--- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
@@ -49,8 +49,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
 exports[`ThreadPanel Header expect that ThreadPanelHeader has the correct option selected in the context menu 1`] = `
 <div
   aria-checked="true"
-  class="mx_AccessibleButton mx_ThreadPanel_Header_FilterOptionItem focus-visible"
-  data-focus-visible-added=""
+  class="mx_AccessibleButton mx_ThreadPanel_Header_FilterOptionItem"
   role="menuitemradio"
   tabindex="0"
 >
diff --git a/test/components/views/context_menus/SpaceContextMenu-test.tsx b/test/components/views/context_menus/SpaceContextMenu-test.tsx
index 4d10a23207..cf6d607ec7 100644
--- a/test/components/views/context_menus/SpaceContextMenu-test.tsx
+++ b/test/components/views/context_menus/SpaceContextMenu-test.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { Mocked, mocked } from "jest-mock";
-import "focus-visible"; // to fix context menus
 import { prettyDOM, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
diff --git a/test/components/views/context_menus/__snapshots__/SpaceContextMenu-test.tsx.snap b/test/components/views/context_menus/__snapshots__/SpaceContextMenu-test.tsx.snap
index 3693f9a5f1..5135e2bd86 100644
--- a/test/components/views/context_menus/__snapshots__/SpaceContextMenu-test.tsx.snap
+++ b/test/components/views/context_menus/__snapshots__/SpaceContextMenu-test.tsx.snap
@@ -30,8 +30,7 @@ exports[`<SpaceContextMenu /> renders menu correctly 1`] = `
           >
             <li
               aria-label="Space home"
-              class="mx_AccessibleButton mx_IconizedContextMenu_item focus-visible"
-              data-focus-visible-added=""
+              class="mx_AccessibleButton mx_IconizedContextMenu_item"
               role="menuitem"
               tabindex="0"
             >
diff --git a/yarn.lock b/yarn.lock
index e82f56ac82..c70d88de9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5670,11 +5670,6 @@ focus-lock@^0.11.6:
   dependencies:
     tslib "^2.0.3"
 
-focus-visible@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
-  integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
-
 follow-redirects@^1.15.0:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"