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>
This commit is contained in:
Michael Telatynski
2025-11-27 16:03:19 +00:00
committed by GitHub
parent 771696e0f0
commit 5869c519ed
44 changed files with 1104 additions and 325 deletions
+8 -12
View File
@@ -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);
}
}