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

Fix issues with inhibited accessible focus outlines #10579

Merged
merged 2 commits into from
Apr 12, 2023
Merged

Fix issues with inhibited accessible focus outlines #10579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e766580
Fix issues with inhibited accessible focus outlines
t3chguy Apr 12, 2023
9a55807
Merge branch 'develop' into t3chguy/fix/19742
t3chguy Apr 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 32 additions & 15 deletions res/css/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -643,10 +657,6 @@ legend {
margin: auto;
}

.mx_GeneralButton:hover {
@mixin mx_DialogButton_hover;
}

.mx_linkButton {
cursor: pointer;
color: $accent;
Expand All @@ -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 {
Expand Down Expand Up @@ -874,3 +886,8 @@ legend {
}
}
}

@define-mixin mx_Dialog_link {
color: $accent;
text-decoration: none;
}
4 changes: 0 additions & 4 deletions res/css/structures/auth/_Login.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 5 additions & 2 deletions res/css/views/dialogs/_CreateRoomDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,19 @@ 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;

/* list-style doesn't do it for webkit */
&::-webkit-details-marker {
display: none;
}

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

> div {
Expand Down
4 changes: 0 additions & 4 deletions res/css/views/rooms/_RoomHeader.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
38 changes: 0 additions & 38 deletions res/themes/dark/css/_dark.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
37 changes: 0 additions & 37 deletions res/themes/legacy-dark/css/_legacy-dark.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
46 changes: 0 additions & 46 deletions res/themes/legacy-light/css/_legacy-light.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
17 changes: 0 additions & 17 deletions res/themes/light-high-contrast/css/_light-high-contrast.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
46 changes: 0 additions & 46 deletions res/themes/light/css/_light.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down