Fix issues with inhibited accessible focus outlines (#10579)

matrix-org · Apr 12, 2023 · 287a3fd · 287a3fd
1 parent ec83855
commit 287a3fd
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 209 deletions.
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -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;
+}
diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss
@@ -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;

diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss
@@ -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 {

diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
@@ -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;
 }

diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
@@ -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;
 }

diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss
@@ -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;
 }

diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -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;
 }

diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
@@ -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;

diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
@@ -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;
 }