New Room List: Very hard to read due to transparency on background image

[MacLemon]

Description

The new room list places all text on multiple semi-transparent layered cells upon a blurred background image which makes most text very hard, if not impossible to read.

Steps to reproduce

• Upgrade to 1.7.0
• See new room list
• There is no step three

Describe how what happens differs from what you expected.

Logs being sent: no, UI/UX/Accessibility problem

Version information

• Platform: Desktop 1.7.0

For the desktop app:

• OS: macOS 10.13.6 (High Sierra)
• Version: 1.7.0

Notes

• This is an accessibility regression from Riot where the room list was not semi-transparent and not on a blurry background image.
• After experimenting with my avatar icons it turns out, the background image there is actually a blurred version of my avatar icon. To make text legible I must change my avatar to a black square.
• macOS has a system wide setting to reduce transparency which will prevent exactly these kinds of text over semi-transparent mush to make text more legible. The Electron App does not respect that setting, nor does it provide a setting to turn off transparency by itself.
• This also affects the Community filter sidebar (if enabled).
• All that transparency makes using the room list very slow, it lags behind by at least half a second in good moments and several seconds in worse ones.

[stephanedupont]

It also leads to sidebars being darker and as a result kinda ugly (to my taste at least!) at all, see #14548

[turt2live]

Closing in favour of #14665

[turt2live]

oh, hmm, wrong issue sorry.

[SimonBrandner]

@turt2live, I am a little confused - #14665 seems to cover this issue. Am I missing something?

[turt2live]

14665 is about turning the feature off, not about improving accessibility when it is turned on.

[SimonBrandner]

Ah, that makes sense - sorry for annoying

[turt2live]

it's never annoying to ask for clarification, as long as it's not every 3.2 seconds and in the form of shouting ;)

[germain-gg]

Some changes have recently been made to the background blur.
@MacLemon could you check and see whether this has mitigated your a11y concerns and whether that improved performance with your current setup at all?

Looking whether we can close this issue or not

[MacLemon]

14665 is about turning the feature off, not about improving accessibility when it is turned on.

Turning this blurry mess off IS the best way to improve accessibility for everyone! Under any circumstance, blur is an accessibility nightmare for anyone without perfect eyesight.

Some changes have recently been made to the background blur.
@MacLemon could you check and see whether this has mitigated your a11y concerns and whether that improved performance with your current setup at all?

Looking whether we can close this issue or not
Sorry, this is not fixed. The best solution would be to get rid of that blurry avatar. It serves absolutely no purpose to the user and only has downsides with regards to accessibility. It still wastes render cycles and makes redraw noticeably sluggish. (The grade of blurryness doesn't make any difference for rendering, it still has to be calculated.)

Please, get rid of this thing, or at least give people a way to completely turn it off, and make the default OFF. Those who are eager to have their own avatar as blurry background can then turn it on if they absolutely desire.

[robintown]

Fixed by matrix-org/matrix-react-sdk#11079

[germain-gg]

We're keeping that behaviour for now, trying to minimise the impact of the changes.
The plan is to remove it when we get to rebuild the room list.

[rome-user]

I don't know if this is the right ticket to leave my comment, but I typically configure Mac OS to "reduce transparency" in the accessibility settings. This helps ensure that there is a solid background color in various widgets in Cocoa (e.g. sidebars are a single color instead of translucent, this helps my eyes a lot with legibility of text). So far, Element is the only program that does not respect this setting.

Windows 11 also has a feature to reduce transparency, to help users with legibility of text. According to MDN[1], there is a new CSS media query for determining if users prefer reduced transparency. This may be helpful in the future to improve accessibility. It is currently locked behind feature flags in Firefox and Chrome.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency