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
@@ -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 {