[4.0] Changing title to tooltip for template preview

[infograf768]

Summary of Changes

As title says.

Testing Instructions

Load Template styles manager and switch Options => Preview Module Positions on and off.
Same for Templates Manager

Hover the Preview icon

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Documentation Changes Required

[ghost]

I have tested this item ✅ successfully on 352b4c3

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[brianteeman]

This is not correct. Please test with a screen reader.

[infograf768]

1. I have no screenreader except Mac VoiceOver.
   Not sure what would be the correct preferences but using default I tested it on Firefox. It does not read the title either.
2. We have other occurrences in admin with similar code and VoiceOver does not read the tips either.

If it is no correct, then propose something that works.

[infograf768]

Explaining more.
When we have a link I can add an aria-labelledby and it looks like working

<a href="<?php echo Route::link($client, 'index.php?tp=1&templateStyle=' . (int) $item->id); ?>" target="_blank" class="jgrid" aria-labelledby="preview-<?php echo (int) $item->id; ?>">
											<span class="visually-hidden"><?php echo Text::_('COM_TEMPLATES_TEMPLATE_PREVIEW'); ?></span>
										</a>
										<div role="tooltip" id="preview-<?php echo (int) $item->id; ?>"><?php echo Text::sprintf('JBROWSERTARGET_NEW_TITLE', $item->title); ?></div>

But I have no idea how to do when we have no link. I.e. when no preview.

<?php else : ?>
										<span class="icon-eye-slash" aria-hidden="true"></span>
										<div role="tooltip" id="nopreview-<?php echo (int) $item->id; ?>"><?php echo Text::_('COM_TEMPLATES_TEMPLATE_NO_PREVIEW'); ?></div>
										<span class="visually-hidden"><?php echo Text::_('COM_TEMPLATES_TEMPLATE_NO_PREVIEW'); ?></span>
									<?php endif; ?>

[brianteeman]

What is the purpose of <span class="visually-hidden"><?php echo Text::_('COM_TEMPLATES_TEMPLATE_PREVIEW'); ?></span>

[infograf768]

What is the purpose of <span class="visually-hidden"><?php echo Text::_('COM_TEMPLATES_TEMPLATE_PREVIEW'); ?></span>

I did not touch that, It was there before as you can see in the diff.

[infograf768]

So normally, the PR is now OK by adding aria-labelledby.

anything else can be modified if necessary in another PR.

Now preparing another PR to use aria-labelledby for associations badges.

[brianteeman]

I did not touch that, It was there before as you can see in the diff.

Maybe not but your changes have an impact on the existing code

[infograf768]

no idea what you mean. Want me to also close that one on a useless comment?

[brianteeman]

OK let me try again with a picture after applying the PR

So the point is that you should have touched that line as it is now redundant

[RickR2H]

I have tested this item ✅ successfully on edf8bbf

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[ghost]

I have tested this item ✅ successfully on edf8bbf

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[infograf768]

@brianteeman
Do you mean that
class="visually-hidden"> should be deleted?

[brianteeman]

No I mean that the entire line should be deleted as there is no need to have it twice

(ignore the highlight in the image)

[brianteeman]

(PS hope you are well - not seen you online for longer than usual)

[richard67]

@sandramay0905 @RickR2H Could you test this PR again? It has received changes. Thanks in advance.

[infograf768]

Deleted redundant span.

Afterthought:
Using JBROWSERTARGET_NEW_TITLE="Open %s in new window" may be not specific enough.

What do you think about using a new string:
COM_TEMPLATES_TEMPLATE_NEW_PREVIEW="Preview %s in new window"

[brianteeman]

Open or Preview - both are fine - whichever you prefer is fine by me

[infograf768]

Used new string

can be tested now

[ghost]

I have tested this item ✅ successfully on 5442371

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[Quy]

It is missing </a>. Plus it gives the impression that the button is clickable when it is not.

[infograf768]

indeed. We do not need the <a at all.

[infograf768]

Thanks @Quy
I added the labelledby directly in the span. I guess that would be OK as it also takes care of the cursor.

[infograf768]

@sandramay0905 @RickR2H Could you test this PR again? Modified some aspects. test specially when no preview in template styles.

[ghost]

I have tested this item ✅ successfully on b57d245

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[ghost]

@RickR2H can you please retest?

[Quy]

I have tested this item ✅ successfully on 490cfb0

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33292.}

[chmst]

Thanks!