Improve icon rendering accessibility by t3chguy · Pull Request #31791 · element-hq/element-web

t3chguy · 2026-01-19T13:50:23Z

For element-io.atlassian.net/browse/PSB-968

Switching to rendering SVG icons over using CSS masks makes them visible under Contrast Control

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…asks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…Dialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…tton mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…ixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…o t3chguy/icons-20260119 # Conflicts: # src/components/views/rooms/EventTile.tsx

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…o t3chguy/icons-20260119

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

BillCarsonFr

Just a question on the call part, the legacy call toast. surprised to not see a change in the snapshots

BillCarsonFr · 2026-01-21T10:00:24Z

src/toasts/IncomingLegacyCallToast.tsx

                            kind="primary"
                        >
-                            <span> {_t("action|accept")} </span>
+                            {isVoice ? <VoiceCallSolidIcon /> : <VideoCallSolidIcon />}


Why isn't there any change in IncomingLegacyCallToast-test snapshot? I would have expected an update. Did I miss something

Presumably that snapshot test doesn't exercise any states which result in these codepaths, indeed the snapshot includes 0 references to mx_IncomingLegacyCallToast_button classname

The snapshots seem to just be taken of individual buttons rather than the whole toast

BillCarsonFr

Ok for voip parts. the existing test could have been better :/ to ensure no regression

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

…hguy/icons-20260119

…880) This PR contains the following updates: | Package | Update | Change | |---|---|---| | [element-hq/element-web](https://github.com/element-hq/element-web) | patch | `v1.12.9` → `v1.12.10` | --- ### Release Notes <details> <summary>element-hq/element-web (element-hq/element-web)</summary> ### [`v1.12.10`](https://github.com/element-hq/element-web/releases/tag/v1.12.10) [Compare Source](element-hq/element-web@v1.12.9...v1.12.10) #### ✨ Features - Support additional\_creators in /upgraderoom (MSC4289) ([#31934](element-hq/element-web#31934)). Contributed by [@andybalaam](https://github.com/andybalaam). - Update room header icon for world\_readable rooms ([#31915](element-hq/element-web#31915)). Contributed by [@richvdh](https://github.com/richvdh). - Show an icon in the room header for shared history ([#31879](element-hq/element-web#31879)). Contributed by [@richvdh](https://github.com/richvdh). - Remove "history may be shared" banner. ([#31881](element-hq/element-web#31881)). Contributed by [@kaylendog](https://github.com/kaylendog). - Allow dismissing 'Key storage out of sync' temporarily ([#31455](element-hq/element-web#31455)). Contributed by [@andybalaam](https://github.com/andybalaam). - Add `resolutions` entry for `matrix-widget-api` to package.json ([#31851](element-hq/element-web#31851)). Contributed by [@toger5](https://github.com/toger5). - Improve visibility under contrast control mode ([#31847](element-hq/element-web#31847)). Contributed by [@t3chguy](https://github.com/t3chguy). - Unread Sorting - Add option for sorting in `OptionsMenuView` ([#31754](element-hq/element-web#31754)). Contributed by [@MidhunSureshR](https://github.com/MidhunSureshR). - Unread sorting - Implement sorter and use it in the room list store ([#31723](element-hq/element-web#31723)). Contributed by [@MidhunSureshR](https://github.com/MidhunSureshR). - Allow Element Call widgets to receive sticky events ([#31843](element-hq/element-web#31843)). Contributed by [@robintown](https://github.com/robintown). - Improve icon rendering accessibility ([#31791](element-hq/element-web#31791)). Contributed by [@t3chguy](https://github.com/t3chguy). - Add message preview toggle to room list header option ([#31821](element-hq/element-web#31821)). Contributed by [@florianduros](https://github.com/florianduros). #### 🐛 Bug Fixes - \[Backport staging] Fix room list not being cleared ([#32438](element-hq/element-web#32438)). Contributed by [@RiotRobot](https://github.com/RiotRobot). - Fix failure to update room info panel on joinrule change ([#31938](element-hq/element-web#31938)). Contributed by [@richvdh](https://github.com/richvdh). - Throttle space notification state calculation ([#31922](element-hq/element-web#31922)). Contributed by [@dbkr](https://github.com/dbkr). - Fix emoji verification responsive layout ([#31899](element-hq/element-web#31899)). Contributed by [@t3chguy](https://github.com/t3chguy). - Add patch for linkify to fix doctype handling ([#31900](element-hq/element-web#31900)). Contributed by [@dbkr](https://github.com/dbkr). - Fix rooms with no messages appearing at the top of the room list ([#31798](element-hq/element-web#31798)). Contributed by [@MidhunSureshR](https://github.com/MidhunSureshR). - Fix room list menu flashes when menu is closed ([#31868](element-hq/element-web#31868)). Contributed by [@florianduros](https://github.com/florianduros). - Message preview toggle is inverted in room list header ([#31865](element-hq/element-web#31865)). Contributed by [@florianduros](https://github.com/florianduros). - Fix duplicate toasts appearing for the same call if two events appear. ([#31693](element-hq/element-web#31693)). Contributed by [@Half-Shot](https://github.com/Half-Shot). - Fix ability to send rageshake during session restore failure ([#31848](element-hq/element-web#31848)). Contributed by [@t3chguy](https://github.com/t3chguy). - Fix mis-alignment of `Threads` right panel title ([#31849](element-hq/element-web#31849)). Contributed by [@t3chguy](https://github.com/t3chguy). - Unset buttons does not include color inherit ([#31801](element-hq/element-web#31801)). Contributed by [@Philldomd](https://github.com/Philldomd). </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/3880 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

t3chguy added 25 commits January 16, 2026 16:10

Switch to rendered svg for Field select decoration instead of SVG mask

b93c479

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Replace warning.svg with Compound icon

53af0d7

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Replace device kind icons with Compound

4c2bd17

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Draw notification badge decoration using SVG rather than CSS masks

383c6c5

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Replace {collapse,expand}-message icons with Compound

ac8e195

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Remove stale icon prefetch

fd23cf0

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Render icons in AddExistingToSpaceDialog using SVGs rather than CSS m…

56e5c4a

…asks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Render icons in Jitsi landing page using SVGs rather than CSS masks

e8ef80b

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Delint

8e35a5d

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Update snapshots

df1aae2

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Update screenshot

4dbb453

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Fix field label

5033822

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Update snapshots

0248857

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Add tests

618742d

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Revert icon colour

10479bf

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Switch to rendering icons as SVG over CSS masks in PollOption

b97763b

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Switch to rendering icons as SVG over CSS masks in AnalyticsLearnMore…

4423f57

…Dialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Remove unused class

009330e

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Switch to rendering icons as SVG over CSS masks in customisedCancelBu…

9ff42fb

…tton mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Switch to rendering icons as SVG over CSS masks in ThreadSummaryIcon …

182a947

…mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Switch to rendering icons as SVG over CSS masks in LegacyCallButton m…

4a0a633

…ixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Remove unused classes in TabbedView

0919b1f

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Merge branch 'develop' of ssh://github.com/element-hq/element-web int…

4f0ac88

…o t3chguy/icons-20260119 # Conflicts: # src/components/views/rooms/EventTile.tsx

delint

da7e2a6

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Merge branch 'develop' of ssh://github.com/element-hq/element-web int…

5b67dd2

…o t3chguy/icons-20260119

t3chguy added the T-Enhancement label Jan 19, 2026

t3chguy self-assigned this Jan 19, 2026

github-actions bot deployed to Netlify January 19, 2026 13:53 View deployment

delint

2acee6e

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

github-actions bot deployed to EndToEndTests January 19, 2026 14:06 View deployment

github-actions bot deployed to Netlify January 19, 2026 15:30 View deployment

github-actions bot deployed to EndToEndTests January 19, 2026 15:43 View deployment

Improve coverage

3d880fa

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

github-actions bot deployed to Netlify January 19, 2026 15:48 View deployment

github-actions bot deployed to EndToEndTests January 19, 2026 16:01 View deployment

t3chguy marked this pull request as ready for review January 19, 2026 16:03

t3chguy requested review from a team as code owners January 19, 2026 16:03

t3chguy requested review from Half-Shot, MidhunSureshR and dbkr January 19, 2026 16:03

MidhunSureshR approved these changes Jan 20, 2026

View reviewed changes

BillCarsonFr requested changes Jan 21, 2026

View reviewed changes

t3chguy requested a review from BillCarsonFr January 21, 2026 10:05

BillCarsonFr approved these changes Jan 21, 2026

View reviewed changes

t3chguy added this pull request to the merge queue Jan 21, 2026

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jan 21, 2026

Merge branch 'develop' into t3chguy/icons-20260119

b8fafa8

github-actions bot deployed to Netlify January 21, 2026 11:11 View deployment

github-actions bot deployed to EndToEndTests January 21, 2026 11:24 View deployment

t3chguy added 2 commits January 21, 2026 13:10

Merge branch 'develop' into t3chguy/icons-20260119

05bc1bd

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Merge remote-tracking branch 'origin/t3chguy/icons-20260119' into t3c…

12c70de

…hguy/icons-20260119

t3chguy enabled auto-merge January 21, 2026 13:10

github-actions bot deployed to Netlify January 21, 2026 13:14 View deployment

github-actions bot deployed to EndToEndTests January 21, 2026 13:27 View deployment

t3chguy added this pull request to the merge queue Jan 21, 2026

Merged via the queue into develop with commit de9a52d Jan 21, 2026
39 of 41 checks passed

t3chguy deleted the t3chguy/icons-20260119 branch January 21, 2026 14:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve icon rendering accessibility#31791

Improve icon rendering accessibility#31791
t3chguy merged 33 commits intodevelopfrom
t3chguy/icons-20260119

t3chguy commented Jan 19, 2026

Uh oh!

BillCarsonFr left a comment

Uh oh!

BillCarsonFr Jan 21, 2026

Uh oh!

t3chguy Jan 21, 2026

Uh oh!

t3chguy Jan 21, 2026

Uh oh!

t3chguy Jan 21, 2026

Uh oh!

BillCarsonFr left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

t3chguy commented Jan 19, 2026

Uh oh!

BillCarsonFr left a comment

Choose a reason for hiding this comment

Uh oh!

BillCarsonFr Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

t3chguy Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

t3chguy Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

t3chguy Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

BillCarsonFr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants