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
--- a/res/css/views/auth/_AuthBody.pcss
+++ b/res/css/views/auth/_AuthBody.pcss
@@ -119,7 +119,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_Dropdown_arrow {
-        background: $authpage-primary-color;
+        color: $authpage-primary-color;
    }

    .mx_Dropdown_menu {
--- a/res/css/views/auth/_LanguageSelector.pcss
+++ b/res/css/views/auth/_LanguageSelector.pcss
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_AuthBody_language .mx_Dropdown_arrow {
-    background: $authpage-lang-color;
+    color: $authpage-lang-color;
 }
--- a/res/css/views/directory/_NetworkDropdown.pcss
+++ b/res/css/views/directory/_NetworkDropdown.pcss
@@ -39,12 +39,11 @@ Please see LICENSE files in the repository root for full details.
    .mx_GenericDropdownMenu_divider {
        margin-top: $spacing-4;
        margin-bottom: $spacing-4;
-    }
-}

-.mx_NetworkDropdown_addServer {
-    font-weight: normal;
-    font-size: $font-15px;
+        & + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
+            font-size: $font-15px;
+        }
+    }
 }

 .mx_NetworkDropdown_removeServer {
--- a/res/css/views/elements/_Dropdown.pcss
+++ b/res/css/views/elements/_Dropdown.pcss
@@ -38,15 +38,11 @@ Please see LICENSE files in the repository root for full details.
    filter: none;
 }

-.mx_Dropdown_arrow {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: 18px;
-    background: $primary-content;
+svg.mx_Dropdown_arrow {
+    width: 18px;
+    height: 18px;
+    margin-right: 3px;
+    color: $primary-content;
 }

 .mx_Dropdown_option {
--- a/res/css/views/rooms/_JumpToBottomButton.pcss
+++ b/res/css/views/rooms/_JumpToBottomButton.pcss
@@ -42,21 +42,17 @@ Please see LICENSE files in the repository root for full details.
    position: relative;
    display: block;
    height: 38px;
-    border-radius: 19px;
+    border-radius: 50%;
    box-sizing: border-box;
    background: $background;
    border: 1.3px solid var(--cpd-color-icon-tertiary);
    cursor: pointer;
-}

-.mx_JumpToBottomButton_scrollDown::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
-    mask-repeat: no-repeat;
-    mask-size: 24px;
-    mask-position: center 6px;
-    transform: rotate(180deg);
-    background: var(--cpd-color-icon-tertiary);
+    svg {
+        height: inherit;
+        width: inherit;
+        box-sizing: border-box;
+        padding: 7px 8px 7px 6px;
+        color: var(--cpd-color-icon-tertiary);
+    }
 }
--- a/res/css/views/rooms/_MessageComposerFormatBar.pcss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss
@@ -38,54 +38,26 @@ Please see LICENSE files in the repository root for full details.
        vertical-align: middle;
        background: none;
        border: none;
+        padding: 0;
+
+        svg {
+            width: inherit;
+            height: inherit;
+            box-sizing: border-box;
+            padding: var(--cpd-space-1x);
+            color: var(--cpd-color-icon-secondary);
+        }

        &:hover {
            background: var(--cpd-color-bg-subtle-secondary);
            border-radius: 6px;
            z-index: 1;
+
+            svg {
+                color: var(--cpd-color-icon-primary);
+            }
        }
    }
-
-    .mx_MessageComposerFormatBar_button::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 20px;
-        background-color: var(--cpd-color-icon-secondary);
-    }
-
-    .mx_MessageComposerFormatBar_button:hover::after {
-        background-color: var(--cpd-color-icon-primary);
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconBold::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconItalic::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconQuote::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconCode::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
-    }
-
-    .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
-        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
-    }
 }

 .mx_MessageComposerFormatBar_buttonTooltip {
--- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
@@ -27,20 +27,11 @@ Please see LICENSE files in the repository root for full details.

 .mx_SecurityUserSettingsTab_warning {
    color: $alert;
-    position: relative;
-    padding-left: 40px;

-    &::before {
-        mask-repeat: no-repeat;
-        mask-position: 0 center;
-        mask-size: $font-24px;
-        position: absolute;
-        width: $font-24px;
-        height: $font-24px;
-        content: "";
-        top: 0;
-        left: 0;
-        background-color: $alert;
-        mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg");
+    svg {
+        width: 24px;
+        height: 24px;
+        margin-right: var(--cpd-space-4x);
+        color: $alert;
    }
 }