Accessibility button does not appear (at least) on Safari 15 on MacOS 12 Monterey

[woluweb]

Steps to reproduce the issue

This refers to https://www.facebook.com/groups/joomlanospam/posts/10158088758700997/
As can be seen on https://www.whatt.eu/en/ the accessibility button (bottom left, just above the cookie button, does appear on all browsers except (at least) on Safari 15 on MacOS 12 Monterey

See the Facebook thread for more screenshots and feedbacks

[TLWebdesign]

The accessibility javascript tries to load the material icons. On safari for some reason it can't and then loads an alternative which has the transparent background on an emoticon instead of the default material icon.

This is the console message:
[Warning] Accessibility: Material Icons font was not loaded, using emojis instead (accessibility.min.js, line 1:2860)

Seem JS can't add the stylesheet to the page and that check fails so it adds a backup that is not styled correctly.

Kind regards,
Tom

[infograf768]

OS Monterey

Firefox

Safari 15

Therefore missing not only the font family (Material Icons) but also background colour and the font is set to Italic

[brianteeman]

It's all the same issue. Will pr later today

[brianteeman]

ranbuch/accessibility#24

[infograf768]

Simplest way to solve the issue in the js is correcting the error:

It should be fontFamily:"Material+Icons", and not fontFamily:"Material Icons",

[infograf768]

ranbuch/accessibility#27

[brianteeman]

I think you are confused between fontFamily and fontFaceSrc

[infograf768]

I think you are confused between fontFamily and fontFaceSrc

Nope. The js contains both loading the font family and a redundant font-family for the css.
Deleting that second one also corrects the issue as the family is already defined. I just added the + to simplify.

[angieradtke]

Hi Guys,
It take a closer look at this plugin and its code today. The idea behind is great, but the HTML-output should be changed.
The reason is the accessibility itself:

• <i> for the icons should be changed to native buttons.
• The google icon font should be replaced by svg-icons,
• The reset button has to become more clear for better understanding
• Close und reset button should be semantically at the and of the wrapping <div>

Maybe it is something for @dgrammatiko
I can do the icons

[brianteeman]

All of that must be made upstream

[angieradtke]

what do you mean - at ranbuch account?

[angieradtke]

https://github.com/angieradtke/Accessibility-plugin-icons/blob/main/README.md

[bembelimen]

The google icon font should be replaced by svg-icons,

The important thing is to get rid of Google fonts at all, as we have a GDPR problem here in Europe with Joomla! otherwise (or opt-in at least)

[brianteeman]

@angieradtke these changes can only be made upstream at ranbuch.

[angieradtke]

Benjamin told be we forked it already

[bembelimen]

Benjamin told be we forked it already

Sorry I was wrong, I thought about another script there

[angieradtke]

I think needed changes are so massiv that a fork could make sence @dgrammatiko @chmst

[Orgoth]

The google icon font should be replaced by svg-icons,

The important thing is to get rid of Google fonts at all, as we have a GDPR problem here in Europe with Joomla! otherwise (or opt-in at least)

I don't know who downvoted this comment, but for german users without an annoying cookie-consent, using this plugin is not possible.
With the new law ttdsg, the users needs to consent before any request to google or other non european country is allowed.
The use of svg icons or a minimal font-icon-set from icomoon local hosted, would be the perfect solution.

https://www.gesetze-im-internet.de/ttdsg/
https://rewis.io/urteile/urteil/2tj-01-12-2021-6-l-73821wi/
https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/

[brianteeman]

Among other things this is resolved by #36948

[woluweb]

I have migrated 6 sites from 4.0 to 4.1.
They now all have the following error in the Console:

Uncaught (in promise) DOMException: Failed to execute 'check' on 'FontFaceSet': Could not resolve '1em Material+Icons' as a font.
    at i (https://www.___.be/media/vendor/accessibility/js/accessibility.min.js?3.0.15:1:2738)
    at https://www.___.be/media/vendor/accessibility/js/accessibility.min.js?3.0.15:1:2786

The Accessibility button looks fine (with the wheelchair icon), but when opening it all icons there are broken.

NB: in the meatime I see this issue had just been reported (with a fix mentioned by @brianteeman) : #37050

[brianteeman]

Its because the change made in the script was wrong and merged even though I stated several times it was wrong :(

[brianteeman]

see #38009

[alikon]

please test #38009