[5.3] Contact icons etc [a11y]

[brianteeman]

Pull Request for Issue #37442 and more .

Summary of Changes

This pull request focuses on improving accessibility by ensuring that visually hidden text is properly included for screen readers. The changes primarily involve modifying how icons/images and their corresponding text are handled in the components/com_contact directory.

Accessibility Improvements:

• There is no visible change with this PR
• When using icons there is no change
• When using images instead of icons it marks the images as decorative and correctly provides a definition term (dt) so that it ensures that screen readers can still access the necessary information without displaying it visually
• When using "none" instead of icons it correctly provides a definition term (dt) so that it ensures that screen readers can still access the necessary information without displaying it visually

Bug Fix

• Although the component options let you select an image instead of an icon there was no code to render it
• The icons and the images used the same class so they could not be styled differently. This PR introduces a new css class for the images

Testing Instructions

• Go to Global Configuration -> Component -> Contacts -> Icon panel
• Set Settings drop-down list to Icons
• Select any picture for the Icons
• Create a contact, add every contact datas (name, address, email, etc.)
• Display the created contact using any kind of template (preferable Cassiopeia) which doesn't use template override for the file "components/com_contact/tmpl/contact/default_address.php"
• Check the alt text of the images of email
• Check that there is a valid dt text

Actual result BEFORE applying this Pull Request

When using images the dt is only an image with an alt description. This is not a valid dt AND the text for contact was using the wrong language string value

Expected result AFTER applying this Pull Request

When using images or icons or any mix thereof all images are marked as decorative and icons are aria-hidden AND there is a valid dt for each element marked as screen reader only

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[Quy]

Address and Email don't have the colon.

[brianteeman]

@Quy - should be fixed now

[Quy]

I have tested this item ✅ successfully on 5f9541b

---

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

[ghost]

I have tested this item ✅ successfully on 5f9541b

---

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

[Quy]

RTC

---

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

[rdeutz]

Thanks

[brianteeman]

Thanks