Improve icon rendering accessibility (#31776)
* Switch to rendered svg for Field select decoration instead of SVG mask Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace warning.svg with Compound icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace device kind icons with Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Draw notification badge decoration using SVG rather than CSS masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace {collapse,expand}-message icons with Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove stale icon prefetch Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Render icons in AddExistingToSpaceDialog using SVGs rather than CSS masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Render icons in Jitsi landing page using SVGs rather than CSS masks 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> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix field label Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert icon colour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -118,23 +118,11 @@ Please see LICENSE files in the repository root for full details.
|
||||
padding: 8px 36px;
|
||||
}
|
||||
|
||||
.mx_AddExistingToSpace_retryButton {
|
||||
margin-left: 12px;
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $primary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
}
|
||||
.mx_AddExistingToSpaceDialog_retryButton svg {
|
||||
color: $primary-content;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: var(--cpd-space-2x);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -185,25 +173,17 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Dropdown_menu {
|
||||
.mx_SubspaceSelector_dropdownOptionActive {
|
||||
color: $accent;
|
||||
padding-right: 32px;
|
||||
position: relative;
|
||||
.mx_SubspaceSelector_dropdownOptionActive {
|
||||
color: $accent;
|
||||
padding-right: 24px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $accent;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -225,7 +205,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
|
||||
/* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
|
||||
.mx_DecoratedRoomAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,20 +47,14 @@ Please see LICENSE files in the repository root for full details.
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Can't add pseudo-elements to a select directly, so we use its parent. */
|
||||
.mx_Field_select::before {
|
||||
content: "";
|
||||
.mx_Field_select_chevron {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
background-color: $primary-content;
|
||||
color: $primary-content;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -55,8 +55,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_knocked {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/ask-to-join.svg");
|
||||
& > svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@@ -13,4 +13,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: $spacing-4;
|
||||
|
||||
svg {
|
||||
color: #ff0064; /* Match legacy icon colour until redesign */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="currentColor" fill-rule="evenodd" d="M.2192.234A.753.753 0 011.2815.2321l3.7243 3.7003L8.7181.2202A.753.753 0 019.7805.2185a.747.747 0 01.0017 1.0589L5.5396 5.52a.753.753 0 01-1.0624.0018L.221 1.2928A.747.747 0 01.2192.234zM9.7822 13.7663a.7529.7529 0 01-1.0623.0017l-3.7243-3.7003L1.2833 13.78a.753.753 0 01-1.0624.0018.7471.7471 0 01-.0017-1.059l4.2426-4.2426a.753.753 0 011.0624-.0017l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 548 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 11 14"><defs/><path fill="currentColor" fill-rule="evenodd" d="M.2192 8.494a.753.753 0 011.0623-.0018l3.7243 3.7003 3.7123-3.7123a.753.753 0 011.0624-.0017.747.747 0 01.0017 1.059L5.5396 13.78a.753.753 0 01-1.0624.0018L.221 9.5528A.747.747 0 01.2192 8.494zM9.7822 5.5063A.753.753 0 018.72 5.508L4.9956 1.8077 1.2833 5.52a.753.753 0 01-1.0624.0018.747.747 0 01-.0017-1.059L4.4618.2202A.753.753 0 015.5242.2185l4.2563 4.2289a.747.747 0 01.0017 1.0589z" clip-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 543 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 15.5C2.45 15.5 1.97933 15.3043 1.588 14.913C1.196 14.521 1 14.05 1 13.5V2.5C1 1.95 1.196 1.479 1.588 1.087C1.97933 0.695667 2.45 0.5 3 0.5H19C19.55 0.5 20.021 0.695667 20.413 1.087C20.8043 1.479 21 1.95 21 2.5V13.5C21 14.05 20.8043 14.521 20.413 14.913C20.021 15.3043 19.55 15.5 19 15.5H3ZM3 13.5H19V2.5H3V13.5ZM1 18.5C0.716667 18.5 0.479333 18.404 0.288 18.212C0.096 18.0207 0 17.7833 0 17.5C0 17.2167 0.096 16.9793 0.288 16.788C0.479333 16.596 0.716667 16.5 1 16.5H21C21.2833 16.5 21.5207 16.596 21.712 16.788C21.904 16.9793 22 17.2167 22 17.5C22 17.7833 21.904 18.0207 21.712 18.212C21.5207 18.404 21.2833 18.5 21 18.5H1ZM3 13.5V2.5V13.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 780 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="14" height="23" viewBox="0 0 14 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0.51L2 0.5C0.9 0.5 0 1.4 0 2.5V20.5C0 21.6 0.9 22.5 2 22.5H12C13.1 22.5 14 21.6 14 20.5V2.5C14 1.4 13.1 0.51 12 0.51ZM12 18.5H2V4.5H12V18.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 280 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 22.5C17.0751 22.5 22 17.5751 22 11.5C22 5.42487 17.0751 0.5 11 0.5C4.92487 0.5 0 5.42487 0 11.5C0 17.5751 4.92487 22.5 11 22.5ZM11.0002 18.2605C11.7596 18.2605 12.3752 17.6449 12.3752 16.8855C12.3752 16.1261 11.7596 15.5105 11.0002 15.5105C10.2408 15.5105 9.6252 16.1261 9.6252 16.8855C9.6252 17.6449 10.2408 18.2605 11.0002 18.2605ZM9.0899 9.42801C9.0899 8.3697 9.94859 7.51827 10.9996 7.51827C12.0476 7.51827 12.9093 8.38001 12.9093 9.42801C12.9093 9.91336 12.7018 10.0866 11.8839 10.6516C11.5215 10.902 11.0246 11.2498 10.6376 11.7599C10.2233 12.306 9.96838 12.9869 9.96838 13.8528H12.0309C12.0309 13.4287 12.1436 13.1873 12.2807 13.0065C12.4452 12.7897 12.6834 12.6061 13.0563 12.3485C13.0955 12.3215 13.1368 12.2933 13.18 12.264C13.8559 11.8042 14.9718 11.0452 14.9718 9.42801C14.9718 7.24094 13.1867 5.45577 10.9996 5.45577C8.8156 5.45577 7.0274 7.22452 7.0274 9.42801H9.0899Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 16.5H2C1.45 16.5 0.979333 16.3043 0.588 15.913C0.196 15.521 0 15.05 0 14.5V2.5C0 1.95 0.196 1.47933 0.588 1.088C0.979333 0.696 1.45 0.5 2 0.5H18C18.55 0.5 19.021 0.696 19.413 1.088C19.8043 1.47933 20 1.95 20 2.5V14.5C20 15.05 19.8043 15.521 19.413 15.913C19.021 16.3043 18.55 16.5 18 16.5ZM2 4.5V14.5H18V4.5H2Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 450 B |
@@ -1,31 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 24 23" style="enable-background:new 0 0 24 23;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{clip-path:url(#SVGID_2_);fill:#FF0064;}
|
||||
.st1{clip-path:url(#SVGID_4_);fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_1_" d="M9.2,2.2c1.6-2.9,4.1-2.9,5.7,0l8.3,15.4c1.6,2.9,0.2,5.3-3.2,5.3H4c-3.3,0-4.7-2.4-3.2-5.3L9.2,2.2
|
||||
L9.2,2.2z M9.2,2.2"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<rect x="-4.8" y="-5" class="st0" width="33.6" height="32.9"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_3_" d="M12.7,15L13,5.4H11l0.3,9.6H12.7L12.7,15z M12,19.1c0.7,0,1.2-0.5,1.2-1.2c0-0.7-0.5-1.2-1.2-1.2
|
||||
c-0.7,0-1.2,0.5-1.2,1.2C10.8,18.6,11.3,19.1,12,19.1L12,19.1L12,19.1z M12,19.1"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_4_">
|
||||
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<rect x="5.8" y="0.4" class="st1" width="12.4" height="23.7"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user