Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Remove focus-visible polyfill (#11677)
Browse files Browse the repository at this point in the history
* Remove focus-visible polyfill

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshots

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>
  • Loading branch information
t3chguy authored Sep 28, 2023
1 parent 8e4de79 commit e0f4b26
Show file tree
Hide file tree
Showing 15 changed files with 15 additions and 29 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions res/css/_common.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -585,7 +585,7 @@ legend {
cursor: pointer;
display: inline-block;

&:not(.focus-visible) {
&:not(:focus-visible) {
outline: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/dialogs/_CreateRoomDialog.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ limitations under the License.
display: none;
}

&:not(.focus-visible) {
&:not(:focus-visible) {
outline: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_Slider.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ limitations under the License.
--active-color: $slider-background-color;
}

&:focus:not(.focus-visible) {
&:focus:not(:focus-visible) {
outline: none;
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_StyledCheckbox.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ limitations under the License.
cursor: not-allowed;
}

&.focus-visible {
&:focus-visible {
& + label .mx_Checkbox_background {
@mixin unreal-focus;
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_StyledRadioButton.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ limitations under the License.
}
}

&.focus-visible {
&:focus-visible {
& + div {
@mixin unreal-focus;
}
Expand Down
8 changes: 4 additions & 4 deletions res/css/views/rooms/_EventTile.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ $left-gutter: 64px;
}
}

&.focus-visible:focus-within,
&:focus-visible:focus-within,
&.mx_EventTile_actionBarFocused,
&.mx_EventTile_isEditing,
&.mx_EventTile_selected {
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/rooms/_LinkPreviewGroup.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 0 additions & 2 deletions src/components/structures/MatrixChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
1 change: 0 additions & 1 deletion test/components/structures/ThreadPanel-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit e0f4b26

Please sign in to comment.