mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix issues with inhibited accessible focus outlines (#10579)

Browse source
This commit is contained in:
Michael Telatynski 2023-04-12 13:49:12 +01:00 committed by GitHub
parent ec83855938
commit 287a3fd0cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 37 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
res/css/_common.pcss
View file

@ -535,6 +535,27 @@ legend {
}
}
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 8px;
font-family: $font-family;
font-size: $font-14px;
color: $button-fg-color;
background-color: $accent;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
&:not(.focus-visible) {
outline: none;
}
}
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
@ -565,13 +586,6 @@ legend {
margin-right: 0px;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):hover,
.mx_Dialog input[type="submit"]:hover,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
.mx_Dialog_buttons input[type="submit"]:hover {
@mixin mx_DialogButton_hover;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
@ -643,10 +657,6 @@ legend {
margin: auto;
}
.mx_GeneralButton:hover {
@mixin mx_DialogButton_hover;
}
.mx_linkButton {
cursor: pointer;
color: $accent;
@ -666,12 +676,14 @@ legend {
background-color: $background;
}
.mx_textButton {
@mixin mx_DialogButton_small;
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: $font-15px;
padding: 0px 1.5em 0px 1.5em;
}
.mx_textButton:hover {
@mixin mx_DialogButton_hover;
.mx_textButton {
@mixin mx_DialogButton_small;
}
.mx_button_row {
@ -874,3 +886,8 @@ legend {
}
}
}
@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}

4
res/css/structures/auth/_Login.pcss
View file

@ -26,10 +26,6 @@ limitations under the License.
text-align: center;
}
.mx_Login_submit:hover {
@mixin mx_DialogButton_hover;
}
.mx_Login_submit:disabled {
opacity: 0.3;
cursor: default;

7
res/css/views/dialogs/_CreateRoomDialog.pcss
View file

@ -18,9 +18,8 @@ limitations under the License.
margin-top: 15px;
.mx_CreateRoomDialog_details_summary {
outline: none;
list-style: none;
font-weight: 600;
font-weight: $font-semi-bold;
cursor: pointer;
color: $accent;
@ -28,6 +27,10 @@ limitations under the License.
&::-webkit-details-marker {
display: none;
}
&:not(.focus-visible) {
outline: none;
}
}
> div {

4
res/css/views/rooms/_RoomHeader.pcss
View file

@ -74,10 +74,6 @@ limitations under the License.
margin-top: -5px;
}
.mx_RoomHeader_textButton:hover {
@mixin mx_DialogButton_hover;
}
.mx_RoomHeader_textButton_danger {
background-color: $alert;
}

38
res/themes/dark/css/_dark.pcss
View file

@ -238,44 +238,6 @@ $selected-color: $room-highlight-color;
}
/* ******************** */
/* Mixins */
/* ******************** */
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 8px;
font-family: $font-family;
font-size: $font-14px;
color: $button-fg-color;
background-color: $accent;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
outline: none;
}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
}
@define-mixin mx_DialogButton_secondary {
/* flip colours for the secondary ones */
font-weight: 600;
border: 1px solid $accent !important;
color: $accent;
background-color: $button-secondary-bg-color;
}
@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}
/* ******************** */
body {
color-scheme: dark;
}

37
res/themes/legacy-dark/css/_legacy-dark.pcss
View file

@ -212,43 +212,6 @@ $location-live-secondary-color: #deddfd;
$live-badge-color: #ffffff;
/* ******************** */
/* ***** Mixins! ***** */
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 8px;
font-family: $font-family;
font-size: $font-14px;
color: $button-fg-color;
background-color: $accent;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
outline: none;
}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
}
@define-mixin mx_DialogButton_secondary {
/* flip colours for the secondary ones */
font-weight: 600;
border: 1px solid $accent !important;
color: $accent;
background-color: $button-secondary-bg-color;
}
@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}
body {
color-scheme: dark;
}

46
res/themes/legacy-light/css/_legacy-light.pcss
View file

@ -317,52 +317,6 @@ $location-live-secondary-color: #deddfd;
$live-badge-color: #ffffff;
/* ******************** */
/* ***** Mixins! ***** */
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 8px;
font-family: $font-family;
font-size: $font-14px;
color: $button-fg-color;
background-color: $accent;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
outline: none;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
}
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: $font-15px;
padding: 0px 1.5em 0px 1.5em;
}
@define-mixin mx_DialogButton_secondary {
/* flip colours for the secondary ones */
font-weight: 600;
border: 1px solid $accent !important;
color: $accent;
background-color: $button-secondary-bg-color;
}
@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}
body {
color-scheme: light;
}

17
res/themes/light-high-contrast/css/_light-high-contrast.pcss
View file

@ -34,23 +34,6 @@ $appearance-tab-border-color: $input-darker-bg-color;
$eventbubble-reply-color: $quaternary-content;
$roomtopic-color: $secondary-content;
@define-mixin mx_DialogButton_danger {
background-color: $accent;
}
@define-mixin mx_DialogButton_secondary {
/* flip colours for the secondary ones */
font-weight: 600;
border: 1px solid $accent !important;
color: $accent;
background-color: $button-secondary-bg-color;
}
@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}
/* Draw an outline on buttons with focus */
.mx_AccessibleButton:focus {
outline: 2px solid $accent;

46
res/themes/light/css/_light.pcss
View file

@ -336,52 +336,6 @@ $location-live-secondary-color: #deddfd;
$live-badge-color: #ffffff;
/* ******************** */
/* Mixins */
/* ******************** */
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 8px;
font-family: $font-family;
font-size: $font-14px;
color: $button-fg-color;
background-color: $accent;
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
outline: none;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
}
@define-mixin mx_DialogButton_small {
@mixin mx_DialogButton;
font-size: $font-15px;
padding: 0px 1.5em 0px 1.5em;
}
@define-mixin mx_DialogButton_secondary {
/* flip colours for the secondary ones */
font-weight: 600;
border: 1px solid $accent !important;
color: $accent;
background-color: $button-secondary-bg-color;
}
@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}
body {
color-scheme: light;
}