[5.3] contact form address icons/images

brianteeman commented 1 day ago

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

Testing Instructions

Go to Global Configuration -> Component -> Contacts -> Icon panel
Set Settings drop-down list to Icons
Select any picture for Custom Email Icon
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 selected image 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

This PR is only for the address. Any comments about anything not touched by this PR will simply result in this PR being deleted

Link to documentations

Please select:

[ ] Documentation link for docs.joomla.org:
[x] No documentation changes for docs.joomla.org needed
[ ] Pull Request link for manual.joomla.org:
[x] No documentation changes for manual.joomla.org needed

Quy commented 16 hours ago

For Settings Text, label is doubled.

    <dt>
                    <span class="jicons-text">
                Email:             </span>
                <span class="visually-hidden">Email</span>
    </dt>

brianteeman commented 3 hours ago

back to the drawing board. need to understand what #35963 is doing

joomla / joomla-cms