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

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

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

res/css/views/dialogs/_CreateRoomDialog.pcss

@@ -28,7 +28,7 @@ limitations under the License.
             display: none;
         }
 
-        &:not(.focus-visible) {
+        &:not(:focus-visible) {
             outline: none;
         }
     }

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

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

res/css/views/elements/_StyledRadioButton.pcss

@@ -78,7 +78,7 @@ limitations under the License.
             }
         }
 
-        &.focus-visible {
+        &:focus-visible {
             & + div {
                 @mixin unreal-focus;
             }

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

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

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

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,

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"
+        class="mx_Dialog_primary"
-        data-focus-visible-added=""
         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"
+        class="mx_Dialog_primary"
-        data-focus-visible-added=""
         data-testid="dialog-primary-button"
         type="button"
       >

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"
+  class="mx_AccessibleButton mx_ThreadPanel_Header_FilterOptionItem"
-  data-focus-visible-added=""
   role="menuitemradio"
   tabindex="0"
 >

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

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"
+              class="mx_AccessibleButton mx_IconizedContextMenu_item"
-              data-focus-visible-added=""
               role="menuitem"
               tabindex="0"
             >

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"