Fix issues with inhibited accessible focus outlines (#10579)

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 {
+@define-mixin mx_DialogButton_small {
-    @mixin mx_DialogButton_small;
+    @mixin mx_DialogButton;
+    font-size: $font-15px;
+    padding: 0px 1.5em 0px 1.5em;
 }
 
-.mx_textButton:hover {
+.mx_textButton {
-    @mixin mx_DialogButton_hover;
+    @mixin mx_DialogButton_small;
 }
 
 .mx_button_row {
@@ -874,3 +886,8 @@ legend {
         }
     }
 }
+
+@define-mixin mx_Dialog_link {
+    color: $accent;
+    text-decoration: none;
+}

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;

res/css/views/dialogs/_CreateRoomDialog.pcss

@@ -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 {

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;
 }

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;
 }

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;
 }

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;
 }

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;

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;
 }