Improve high-contrast support for spotlight (#8948)

Author: justjanne

res/css/views/dialogs/_SpotlightDialog.scss

@@ -34,14 +34,18 @@ limitations under the License.
         line-height: $font-15px;
         color: $secondary-content;
 
-        > span > div {
+        kbd {
             display: inline-block;
             padding: 2px $spacing-4; // TODO: Use a spacing variable
             margin: 0 $spacing-4;
             border-radius: 6px;
             background-color: $quinary-content;
             vertical-align: middle;
             color: $tertiary-content;
+            // To avoid any styling inherent with <kbd> elements
+            font-family: inherit;
+            font-weight: inherit;
+            font-size: inherit;
         }
     }
 }
@@ -424,6 +428,9 @@ limitations under the License.
 
         .mx_SpotlightDialog_enterPrompt {
             padding: 2px $spacing-4; // TODO: Use a spacing variable
+            // To avoid any styling inherent with <kbd> elements
+            font-family: inherit;
+            font-weight: inherit;
             font-size: $font-12px;
             line-height: $font-15px;
             color: $tertiary-content;

res/themes/light-high-contrast/css/_light-high-contrast.scss

@@ -129,3 +129,112 @@ $roomtopic-color: $secondary-content;
 .mx_Dialog_buttons button.mx_LocationPicker_cancelButton::before {
     background-color: $background !important;
 }
+
+.mx_SpotlightDialog_wrapper .mx_Dialog {
+    #mx_SpotlightDialog_keyboardPrompt {
+        kbd {
+            color: $background !important;
+        }
+    }
+}
+
+.mx_SpotlightDialog {
+    .mx_SpotlightDialog_searchBox {
+        > .mx_SpotlightDialog_filter {
+            color: $background !important;
+            &::before {
+                background-color: $background !important;
+            }
+        }
+    }
+    #mx_SpotlightDialog_content {
+        .mx_SpotlightDialog_recentlyViewed {
+            .mx_SpotlightDialog_option {
+                &:hover, &[aria-selected=true] {
+                    color: $background !important;
+
+                    .mx_DecoratedRoomAvatar_icon::before {
+                        background-color: $background !important;
+                    }
+                }
+            }
+        }
+        .mx_SpotlightDialog_results,
+        .mx_SpotlightDialog_recentSearches,
+        .mx_SpotlightDialog_otherSearches,
+        .mx_SpotlightDialog_hiddenResults {
+            .mx_SpotlightDialog_option {
+                &:hover, &[aria-selected=true] {
+                    background-color: $quinary-content !important;
+                    color: $background !important;
+
+                    &.mx_SpotlightDialog_startChat::before,
+                    &.mx_SpotlightDialog_joinRoomAlias::before,
+                    &.mx_SpotlightDialog_explorePublicRooms::before,
+                    &.mx_SpotlightDialog_startGroupChat::before {
+                        background-color: $background !important;
+                    }
+
+                    .mx_DecoratedRoomAvatar_icon::before {
+                        background-color: $background !important;
+                    }
+
+                    .mx_SpotlightDialog_result_publicRoomDetails {
+                        .mx_SpotlightDialog_result_publicRoomHeader {
+                            .mx_SpotlightDialog_result_publicRoomName {
+                                color: $background;
+                            }
+                            .mx_SpotlightDialog_result_publicRoomAlias {
+                                color: $background;
+                            }
+                        }
+                        .mx_SpotlightDialog_result_publicRoomDescription {
+                            color: $background;
+                        }
+                    }
+
+                    .mx_NotificationBadge {
+                        background-color: $background !important;
+                    }
+
+                    .mx_SpotlightDialog_result_details {
+                        color: $background !important;
+                    }
+                }
+            }
+        }
+        .mx_SpotlightDialog_enterPrompt {
+            background-color: $background !important;
+        }
+    }
+}
+
+.mx_GenericDropdownMenu_button:hover,
+.mx_GenericDropdownMenu_button[aria-expanded=true] {
+    color: $background !important;
+}
+
+.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
+    .mx_GenericDropdownMenu_Option {
+        &.mx_GenericDropdownMenu_Option--item {
+            &:hover {
+                background-color: $quinary-content !important;
+                color: $background !important;
+
+                &[aria-checked="true"]::before {
+                    background-color: $background !important;
+                }
+
+                > .mx_GenericDropdownMenu_Option--label {
+                    span:first-child {
+                        color: $background !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.mx_NetworkDropdown_removeServer::before {
+    background-color: $background !important;
+}

src/components/views/dialogs/spotlight/Option.tsx

@@ -37,7 +37,7 @@ export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment
         role="option"
     >
         { children }
-        <div className="mx_SpotlightDialog_enterPrompt" aria-hidden>↵</div>
+        <kbd className="mx_SpotlightDialog_enterPrompt" aria-hidden>↵</kbd>
         { endAdornment }
     </AccessibleButton>;
 };

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -996,10 +996,10 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         <div id="mx_SpotlightDialog_keyboardPrompt">
             { _t("Use <arrows/> to scroll", {}, {
                 arrows: () => <>
-                    <div>↓</div>
-                    <div>↑</div>
-                    { !filter !== null && !query && <div>←</div> }
-                    { !filter !== null && !query && <div>→</div> }
+                    <kbd>↓</kbd>
+                    <kbd>↑</kbd>
+                    { !filter !== null && !query && <kbd>←</kbd> }
+                    { !filter !== null && !query && <kbd>→</kbd> }
                 </>,
             }) }
         </div>