Support high contrast (prefers-contrast) mode

[rugk]

There are reports of black text on black background if high contrast mode is enabled: https://github.com/rugk/awesome-emoji-picker/issues/131

https://hacks.mozilla.org/2020/07/adding-prefers-contrast-to-firefox/

The CSS can likely be adjusted to react on that… See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast and possibly https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

[tdulcet]

Another user just reported this issue in https://github.com/tdulcet/Thunderbird-Send/issues/12. It is fairly severe, as it makes the add-on unusable.

[flo7000]

hello! i'd like to contribute here and i have some questions:

css/photonOptions.css -> this is is the file i'd have to change, right?

.

possibly https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

i'd say that we should do that too, right? because the article says:

An example of a forced colors mode is Windows High Contrast mode.

and also https://github.com/rugk/awesome-emoji-picker/issues/131#issuecomment-1178247992 has forced-colors

[tdulcet]

Thank you for offering to fix this! It would be a big improvement for all add-ons that use this library.

css/photonOptions.css -> this is is the file i'd have to change, right?

Yes, most of the CSS for the options page is defined in that file. There is also some more general stuff defined in the CommonCss repository, but you may not need to modify any of that.

i'd say that we should do that too, right?

Yes, I am not sure if supporting forced colors would technically be required to fully resolve this issue, but should still be supported and would obviously be great addition along with supporting prefers contrast.

[flo7000]

hello again

i've done some testing and have the following results:

• this is a thunderbird-only issue, firefox is working fine
• https://github.com/tdulcet/Thunderbird-Send/issues/12 -> should be already fixed by mozilla, because when i set it to always, it shows my selected colors (from the thunderbird settings)

but now the problem is the following:

• when i set my colors and say "override = never" it still takes the bg-color

addon:

so what i see is that the inital issue was "moved"

i opened a bug on bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1916302

so currently i don't see any point in fixing the css on AutomaticSettings because of another bug. everything should work fine with prefered colors / high contrast!

but just to be sure, i uploaded the code to a test site and set the following settings in firefox:

this is how it looks:

link: https://automaticsettings.test.flows.li/tests/thunderbird-send/options/options.html

• sadly i can't test addons in firefox, because they're blocked on my IT managed device, but everything should be fine

[tdulcet]

Thank you for testing everything and for filing the bug report on BMO!

It looks like something is wrong with your copy of the Thunderbird Send extension, as all of that stuff at the top of the options page should not be displaying. It is likely failing to load some of the CSS files. Were you using a local copy of the add-on? If so, did you download all of the git submodules?

i've done some testing and have the following results

I did some testing as well and can confirm that Mozilla recently fixed this. It is working as expected in the latest Thunderbird Daily 131, Firefox 129 and Firefox Nightly 131: but it is not working in the older Thunderbird 115 or Firefox ESR 115.

this is a thunderbird-only issue, firefox is working fine

I suspect it would be fixed in Thunderbird after the automatic upgrade from 115 to 128 ESR in the next month or so. One could run mozregression if needed to determine the exact version it was fixed in.

when i set my colors and say "override = never" it still takes the bg-color

I am not able to reproduce this issue. I set my color options in both Thunderbird 115 and Daily 131 to the same as in your screenshot, but I got the expected results. This could be related to your broken/missing CSS files.

so currently i don't see any point in fixing the css on AutomaticSettings because of another bug

It still could be good to explicitly support prefers contrast to be able to provide better colors than the browser defaults, but https://github.com/rugk/awesome-emoji-picker/issues/131 and https://github.com/tdulcet/Thunderbird-Send/issues/12 should at least be able to be closed now.

[flo7000]

Thank you for testing everything and for filing the bug report on BMO!

umm about that, I closed it again, because it works now after importing the rest of the modules ( i only had commonCss ). so it's definitely fixed (sorry about that :D ). i am on thunderbird 128esr

but it is not working in the older Thunderbird 115 or Firefox ESR 115.

It still could be good to explicitly support prefers contrast to be able to provide better colors than the browser defaults, but https://github.com/rugk/awesome-emoji-picker/issues/131 and https://github.com/tdulcet/Thunderbird-Send/issues/12 should at least be able to be closed now.

what browser defaults do you mean? should i just get the prefered / high contrast colors and improve what then?

[tdulcet]

what browser defaults do you mean? should i just get the prefered / high contrast colors and improve what then?

I meant the Thunderbird/Firefox defaults shown in my above screenshot. It would be up to @rugk if he would like any improvements to the prefers contrast (or forced colors) mode support in this library beyond what the browser now provides by default.

[flo7000]

Okay, thank you. I'm working on this, so even if @rugk doesn't want it, then i learnt something good what i can use in my future apprenticeship coding projects :)

[rugk]

If you can improve something, then sure, by all means do it and put it here as a PR directly, because all extensions can benefit then. After all, I created this issue for some reason...

What exactly may need improvements, I don't know? But I am also no accessibility expert here, so you possibility better know what needs to be done. Just provide a PR with screenshots, so one can see the changes, and then we'll can review it there.