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

Commit 287a3fd

Browse files
t3chguyt3chguy
authored
Fix issues with inhibited accessible focus outlines (#10579)
1 parent ec83855 commit 287a3fd

File tree

9 files changed

+37
-209
lines changed

9 files changed

+37
-209
lines changed

‎res/css/_common.pcss‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -535,6 +535,27 @@ legend {
535535
}
536536
}
537537

538+
@define-mixin mx_DialogButton {
539+
/* align images in buttons (eg spinners) */
540+
vertical-align: middle;
541+
border: 0px;
542+
border-radius: 8px;
543+
font-family: $font-family;
544+
font-size: $font-14px;
545+
color: $button-fg-color;
546+
background-color: $accent;
547+
width: auto;
548+
padding: 7px;
549+
padding-left: 1.5em;
550+
padding-right: 1.5em;
551+
cursor: pointer;
552+
display: inline-block;
553+
554+
&:not(.focus-visible) {
555+
outline: none;
556+
}
557+
}
558+
538559
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
539560
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
540561
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
@@ -565,13 +586,6 @@ legend {
565586
margin-right: 0px;
566587
}
567588

568-
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):hover,
569-
.mx_Dialog input[type="submit"]:hover,
570-
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
571-
.mx_Dialog_buttons input[type="submit"]:hover {
572-
@mixin mx_DialogButton_hover;
573-
}
574-
575589
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
576590
.mx_Dialog input[type="submit"]:focus,
577591
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
@@ -643,10 +657,6 @@ legend {
643657
margin: auto;
644658
}
645659

646-
.mx_GeneralButton:hover {
647-
@mixin mx_DialogButton_hover;
648-
}
649-
650660
.mx_linkButton {
651661
cursor: pointer;
652662
color: $accent;
@@ -666,12 +676,14 @@ legend {
666676
background-color: $background;
667677
}
668678

669-
.mx_textButton {
670-
@mixin mx_DialogButton_small;
679+
@define-mixin mx_DialogButton_small {
680+
@mixin mx_DialogButton;
681+
font-size: $font-15px;
682+
padding: 0px 1.5em 0px 1.5em;
671683
}
672684

673-
.mx_textButton:hover {
674-
@mixin mx_DialogButton_hover;
685+
.mx_textButton {
686+
@mixin mx_DialogButton_small;
675687
}
676688

677689
.mx_button_row {
@@ -874,3 +886,8 @@ legend {
874886
}
875887
}
876888
}
889+
890+
@define-mixin mx_Dialog_link {
891+
color: $accent;
892+
text-decoration: none;
893+
}

‎res/css/structures/auth/_Login.pcss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,6 @@ limitations under the License.
2626
text-align: center;
2727
}
2828

29-
.mx_Login_submit:hover {
30-
@mixin mx_DialogButton_hover;
31-
}
32-
3329
.mx_Login_submit:disabled {
3430
opacity: 0.3;
3531
cursor: default;

‎res/css/views/dialogs/_CreateRoomDialog.pcss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,19 @@ limitations under the License.
1818
margin-top: 15px;
1919

2020
.mx_CreateRoomDialog_details_summary {
21-
outline: none;
2221
list-style: none;
23-
font-weight: 600;
22+
font-weight: $font-semi-bold;
2423
cursor: pointer;
2524
color: $accent;
2625

2726
/* list-style doesn't do it for webkit */
2827
&::-webkit-details-marker {
2928
display: none;
3029
}
30+
31+
&:not(.focus-visible) {
32+
outline: none;
33+
}
3134
}
3235

3336
> div {

‎res/css/views/rooms/_RoomHeader.pcss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,6 @@ limitations under the License.
7474
margin-top: -5px;
7575
}
7676

77-
.mx_RoomHeader_textButton:hover {
78-
@mixin mx_DialogButton_hover;
79-
}
80-
8177
.mx_RoomHeader_textButton_danger {
8278
background-color: $alert;
8379
}

‎res/themes/dark/css/_dark.pcss‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -238,44 +238,6 @@ $selected-color: $room-highlight-color;
238238
}
239239
/* ******************** */
240240

241-
/* Mixins */
242-
/* ******************** */
243-
@define-mixin mx_DialogButton {
244-
/* align images in buttons (eg spinners) */
245-
vertical-align: middle;
246-
border: 0px;
247-
border-radius: 8px;
248-
font-family: $font-family;
249-
font-size: $font-14px;
250-
color: $button-fg-color;
251-
background-color: $accent;
252-
width: auto;
253-
padding: 7px;
254-
padding-left: 1.5em;
255-
padding-right: 1.5em;
256-
cursor: pointer;
257-
display: inline-block;
258-
outline: none;
259-
}
260-
261-
@define-mixin mx_DialogButton_danger {
262-
background-color: $accent;
263-
}
264-
265-
@define-mixin mx_DialogButton_secondary {
266-
/* flip colours for the secondary ones */
267-
font-weight: 600;
268-
border: 1px solid $accent !important;
269-
color: $accent;
270-
background-color: $button-secondary-bg-color;
271-
}
272-
273-
@define-mixin mx_Dialog_link {
274-
color: $accent;
275-
text-decoration: none;
276-
}
277-
/* ******************** */
278-
279241
body {
280242
color-scheme: dark;
281243
}

‎res/themes/legacy-dark/css/_legacy-dark.pcss‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -212,43 +212,6 @@ $location-live-secondary-color: #deddfd;
212212
$live-badge-color: #ffffff;
213213
/* ******************** */
214214

215-
/* ***** Mixins! ***** */
216-
217-
@define-mixin mx_DialogButton {
218-
/* align images in buttons (eg spinners) */
219-
vertical-align: middle;
220-
border: 0px;
221-
border-radius: 8px;
222-
font-family: $font-family;
223-
font-size: $font-14px;
224-
color: $button-fg-color;
225-
background-color: $accent;
226-
width: auto;
227-
padding: 7px;
228-
padding-left: 1.5em;
229-
padding-right: 1.5em;
230-
cursor: pointer;
231-
display: inline-block;
232-
outline: none;
233-
}
234-
235-
@define-mixin mx_DialogButton_danger {
236-
background-color: $accent;
237-
}
238-
239-
@define-mixin mx_DialogButton_secondary {
240-
/* flip colours for the secondary ones */
241-
font-weight: 600;
242-
border: 1px solid $accent !important;
243-
color: $accent;
244-
background-color: $button-secondary-bg-color;
245-
}
246-
247-
@define-mixin mx_Dialog_link {
248-
color: $accent;
249-
text-decoration: none;
250-
}
251-
252215
body {
253216
color-scheme: dark;
254217
}

‎res/themes/legacy-light/css/_legacy-light.pcss‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -317,52 +317,6 @@ $location-live-secondary-color: #deddfd;
317317
$live-badge-color: #ffffff;
318318
/* ******************** */
319319

320-
/* ***** Mixins! ***** */
321-
322-
@define-mixin mx_DialogButton {
323-
/* align images in buttons (eg spinners) */
324-
vertical-align: middle;
325-
border: 0px;
326-
border-radius: 8px;
327-
font-family: $font-family;
328-
font-size: $font-14px;
329-
color: $button-fg-color;
330-
background-color: $accent;
331-
width: auto;
332-
padding: 7px;
333-
padding-left: 1.5em;
334-
padding-right: 1.5em;
335-
cursor: pointer;
336-
display: inline-block;
337-
outline: none;
338-
}
339-
340-
@define-mixin mx_DialogButton_hover {
341-
}
342-
343-
@define-mixin mx_DialogButton_danger {
344-
background-color: $accent;
345-
}
346-
347-
@define-mixin mx_DialogButton_small {
348-
@mixin mx_DialogButton;
349-
font-size: $font-15px;
350-
padding: 0px 1.5em 0px 1.5em;
351-
}
352-
353-
@define-mixin mx_DialogButton_secondary {
354-
/* flip colours for the secondary ones */
355-
font-weight: 600;
356-
border: 1px solid $accent !important;
357-
color: $accent;
358-
background-color: $button-secondary-bg-color;
359-
}
360-
361-
@define-mixin mx_Dialog_link {
362-
color: $accent;
363-
text-decoration: none;
364-
}
365-
366320
body {
367321
color-scheme: light;
368322
}

‎res/themes/light-high-contrast/css/_light-high-contrast.pcss‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,6 @@ $appearance-tab-border-color: $input-darker-bg-color;
3434
$eventbubble-reply-color: $quaternary-content;
3535
$roomtopic-color: $secondary-content;
3636

37-
@define-mixin mx_DialogButton_danger {
38-
background-color: $accent;
39-
}
40-
41-
@define-mixin mx_DialogButton_secondary {
42-
/* flip colours for the secondary ones */
43-
font-weight: 600;
44-
border: 1px solid $accent !important;
45-
color: $accent;
46-
background-color: $button-secondary-bg-color;
47-
}
48-
49-
@define-mixin mx_Dialog_link {
50-
color: $accent;
51-
text-decoration: none;
52-
}
53-
5437
/* Draw an outline on buttons with focus */
5538
.mx_AccessibleButton:focus {
5639
outline: 2px solid $accent;

‎res/themes/light/css/_light.pcss‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -336,52 +336,6 @@ $location-live-secondary-color: #deddfd;
336336
$live-badge-color: #ffffff;
337337
/* ******************** */
338338

339-
/* Mixins */
340-
/* ******************** */
341-
@define-mixin mx_DialogButton {
342-
/* align images in buttons (eg spinners) */
343-
vertical-align: middle;
344-
border: 0px;
345-
border-radius: 8px;
346-
font-family: $font-family;
347-
font-size: $font-14px;
348-
color: $button-fg-color;
349-
background-color: $accent;
350-
width: auto;
351-
padding: 7px;
352-
padding-left: 1.5em;
353-
padding-right: 1.5em;
354-
cursor: pointer;
355-
display: inline-block;
356-
outline: none;
357-
}
358-
359-
@define-mixin mx_DialogButton_hover {
360-
}
361-
362-
@define-mixin mx_DialogButton_danger {
363-
background-color: $accent;
364-
}
365-
366-
@define-mixin mx_DialogButton_small {
367-
@mixin mx_DialogButton;
368-
font-size: $font-15px;
369-
padding: 0px 1.5em 0px 1.5em;
370-
}
371-
372-
@define-mixin mx_DialogButton_secondary {
373-
/* flip colours for the secondary ones */
374-
font-weight: 600;
375-
border: 1px solid $accent !important;
376-
color: $accent;
377-
background-color: $button-secondary-bg-color;
378-
}
379-
380-
@define-mixin mx_Dialog_link {
381-
color: $accent;
382-
text-decoration: none;
383-
}
384-
385339
body {
386340
color-scheme: light;
387341
}

0 commit comments

Comments
 (0)