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)