I have tested this item ? unsuccessfully on e2bc96c

Warning message: the path is not correct.

Warning: file_get_contents(C:\xampp\htdocs\bugtesting2\joomla/bugtesting2/joomla/media/plg_system_webauthn/images/webauthn.svg): ...

Try something like this:

<?php echo file_get_contents(JPATH_ROOT . substr(HTMLHelper::_('image', $button['image'], '', '', true, true), strlen(Uri::root(true)))); ?>

Build in a condition if the .svg does not exist.

@sandewt let me know if that solves your subfolder issue please.

I have tested this item ✅ successfully on e6e9b8d

Needs better testing instructions! I enabled Two-Factor Authentication but forgot I needed https to test. With that done I see the logo on both login locations but I get an extra box to enter Secret Key. I guess that is normal.

I have tested this item ✅ successfully on e6e9b8d

Build in a condition if the .svg does not exist.

I do this kind of check at the Improvement Vote Plugin #31098, to avoid a warning message.

// Get the image
$image = HTMLHelper::_('image', 'plg_system_webauthn/webauthn.svg', '', '', true, true);

// If you can't find the image then skip it
if ($image === null)
{
	return;
}

The aria-hidden property tells screen-readers if they should ignore the icon.

Wouldn't it be better to add these here? @brianteeman

<svg aria-hidden="true" ...</svg>

Best to ask the accessibility team @carcam

Build in a condition if the .svg does not exist.

I do this kind of check at the Improvement Vote Plugin #31098, to avoid a warning message.

// Get the image
$image = HTMLHelper::_('image', 'plg_system_webauthn/webauthn.svg', '', '', true, true);

// If you can't find the image then skip it
if ($image === null)
{
	return;
}

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31545.

I don't believe you'll get a warning with my work?

I don't believe you'll get a warning with my work?

Normally not, but if the image does not load / exists, you will get a warning message.

The following code prevents that. Try it. Change webauthn.svg eg to test.svg.

$image = HTMLHelper::_('image', 'plg_system_webauthn/webauthn.svg', '', '', true, true);

if ($image === null)
{
	return []; // break in case the svg does not exist
}

$image = JPATH_ROOT . substr($image, strlen(Uri::root(true)));

Build in a condition if the .svg does not exist.

I do this kind of check at the Improvement Vote Plugin #31098, to avoid a warning message.

// Get the image
$image = HTMLHelper::_('image', 'plg_system_webauthn/webauthn.svg', '', '', true, true);

// If you can't find the image then skip it
if ($image === null)
{
	return;
}

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31545.

idk how I missed it but your right it was broken. Fixed now.

aria-hidden="true"

according to phpstorm you can't have role= nor aria-hidden inside

according to phpstorm you can't have role= nor aria-hidden inside

Font Awesome gives many examples of <svg aria-hidden="true" ...</svg>, see:

https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility

according to phpstorm you can't have role= nor aria-hidden inside

Font Awesome gives many examples of <svg aria-hidden="true" ...</svg>, see:

https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility

I agree, idky storm says no..

I agree, idky storm says no..

PHPStorm is talking about the attribute "role"

The aria-hidden property tells screen-readers if they should ignore the icon. Wouldn't it be better to add these here? @brianteeman
<svg aria-hidden="true" ...

See: https://css-tricks.com/accessible-svgs/

.Example 2: Standalone Icon, Decorative
Decorative icons (icons that repeats the information conveyed by text or do not add significant value) do not need alternative text and they should be hidden from the screen reader. For this example, hide the SVG with aria-hidden="true".

I see here that aria-hidden = "true" only applies to the CSS.

Conclusion
Determine if alternative text is needed
If no, hide the image/SVG aria-hidden="true"
If yes:..

[EDIT]

As i said before ask the accessibility team - I've already written a long explanation about accessibility and svg

cc @carcam

As i said before ask the accessibility team - I've already written a long explanation about accessibility and svg

Is @carcam not enough to ask him? Or is there another way to ask him?

I agree, idky storm says no..

PHPStorm is talking about the attribute "role"

nope, says the same thing about aria, ergo it's red. It's a known issue but since I'm not a svg/a11y guru I'm not putting it in w/o experts giving their blessing.

@sandewt I've asked the team to come look. Maybe that other person is on vacation or something.

@hans2103 can you help with this issue and answer the questions related to accessibility?

JAT is apparently dead so I'm waiting on feedback

As i said before ask the accessibility team - I've already written a long explanation about accessibility and svg

cc @carcam

@brianteeman can you refer to this explanation please? It might be helpful.

@hans2103 can you help with this issue and answer the questions related to accessibility?

For decorative SVGs (a SVG that does not add important information to a document) use aria-hidden="true" to hide the SVG from screen readers. Add focusable="false" to ensure Internet Explorer won't allow the Tab key to navigate into the SVG. Since the decorative SVG is meant to be hidden, there is no need to add a role attribute, as it would be ignored anyway.

Note that while some screen readers may ignore an SVG if it has no role or accessible name, other screen readers may still find the element and announce it as a “group” without an accessible name. It’s best to avoid these situations by always using aria-hidden="true" if the SVG is meant to be decorative.

I'm not in the habit of repeating myself so please search and you will find it

I'm not in the habit of repeating myself so please search and you will find it

Both comments does not help to solve this issue Brian.

I've tried to search and came with this comment... did you mean this one and the couple of comments following upon it?

#31079 (comment)

@hans2103 storm says adding aria to the <svg is not permissible there. Should I chalk this up to a mess up on storms part and do it anyway?
https://youtrack.jetbrains.com/issue/WEB-36210?_ga=2.236984006.739645025.1609423177-179347667.1594201852

PHPStorm does not know if image is decorative or not. Might that be the trick?

@hans2103 after 2yrs you'd think storm would do a follow up on it all. I forget who our contact at storm is, i THINK its @joomla/marketing-communication-department

Does phpstorm obhect when you have role="presentation" and aria-hidden="true"

YES, role= or aria- it throws an error

role="presentation" and aria-hidden="true"

YES, role= or aria- it throws an error

@N6REJ Do you mean the OR or an AND condition ?

PERIOD, it won't allow role or aria

hans2103 after 2yrs you'd think storm would do a follow up on it all. I forget who our contact at storm is, i THINK its @joomla/marketing-communication-department

Try Roland Dalmulder, as far as I know he's the unofficial contact (or just has contact) with Jetbrains. Personally I don't think the Marketing department was involved with a developer tool.

@roland-d any help/input/feedback?

@N6REJ What is the "error"? Here is what I see:

Support for aria- looks just fine.

Support for role seems fine too.

it's not in html its only in <svg like <svg aria-hidden="true" it says aria is not supported here. Same thing for role=
It was first reported 2 years ago https://youtrack.jetbrains.com/issue/WEB-36210?_ga=2.236984006.739645025.1609423177-179347667.1594201852

@N6REJ Since it is confirmed by JB there is nothing else I can do at this point. Perhaps also link this issue in the JB issue?

I've decided to follow W3C and ignore storm till they get things sorted out, so lets get this tested and merged :D

Went to apply the patch on Joomla 4 Beta 7 today and it came up with:

The patch could not be applied because it conflicts with a previously applied patch: administrator/modules/mod_login/tmpl/default.php

So there's a clash with something recently merged.

@particthistle I believe this means you already had a patch applied.
Git testing is not reporting an issue and everything was updated 5 days ago.

Resetting patch tester component data cleared the error I was having. However @sandewt's review suggestion needs to be committed before I can test again now.

I have tested this item ✅ successfully on 473cbb6

Tested successfully. Before and after applying the patch look identical on screen - it's the HTML that changes as well as the function changing to display the icon.

Icon now has aria-hidden="true" for both the front end and back end login buttons.

I have tested this item ✅ successfully on 473cbb6

Tested successfully. Before and after applying the patch look identical on screen - it's the HTML that changes as well as the function changing to display the icon.

Icon now has aria-hidden="true" for both the front end and back end login buttons.

I have tested this item ✅ successfully on 473cbb6

Thanks

ty