Tweak rendering of icons for accessibility (#31346)

* Tweak rendering of icons in dropdowns Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in composer format bar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in jump to bottom button Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in quick settings button Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in left panel search Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix margin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in security user settings tab Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in space hierarchy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Simplify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tidy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-11-27 16:03:19 +00:00
parent 771696e0f0
commit 5869c519ed
44 changed files with 1104 additions and 325 deletions
@@ -13,6 +13,12 @@ Please see LICENSE files in the repository root for full details.
    user-select: none;
    font-size: $font-12px;
    color: $secondary-content;
+
+    svg {
+        width: 18px;
+        height: 18px;
+        float: right;
+    }
 }

 .mx_GenericDropdownMenu_button:hover,
@@ -20,17 +26,6 @@ Please see LICENSE files in the repository root for full details.
    background: $quinary-content;
 }

-.mx_GenericDropdownMenu_button::before {
-    content: "";
-    width: 18px;
-    height: 18px;
-    background: currentColor;
-    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-    mask-size: 100%;
-    mask-repeat: no-repeat;
-    float: right;
-}
-
 .mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
    .mx_ContextualMenu {
        position: initial;
@@ -97,16 +92,12 @@ Please see LICENSE files in the repository root for full details.
                background-color: $menu-selected-color;
            }

-            &[aria-checked="true"]::before {
-                content: "";
+            .mx_GenericDropdownMenu_Option--checkIcon {
                width: 16px;
                height: 16px;
                margin-left: -22px;
                margin-right: 6px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-size: 100%;
-                mask-repeat: no-repeat;
-                background-color: $primary-content;
+                color: $primary-content;
                display: inline-block;
                vertical-align: middle;
            }