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 {
-    @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;
+}

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