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>
2023-09-28 12:52:26 +01:00 · 2023-09-28 12:52:26 +01:00 · e0f4b26512
commit e0f4b26512
parent 8e4de798a5
15 changed files with 15 additions and 29 deletions
--- 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",
--- 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;
    }
 }
--- 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;
        }
    }
--- 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;
        }

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

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

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

--- 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`] = `
          [36m>[39m
            [36m<li[39m
              [33maria-label[39m=[32m"Space home"[39m
-              [33mclass[39m=[32m"mx_AccessibleButton mx_IconizedContextMenu_item focus-visible"[39m
-              [33mdata-focus-visible-added[39m=[32m""[39m
+              [33mclass[39m=[32m"mx_AccessibleButton mx_IconizedContextMenu_item"[39m
              [33mrole[39m=[32m"menuitem"[39m
              [33mtabindex[39m=[32m"0"[39m
            [36m>[39m
--- 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"