fix: add descriptive alt tags to listings images

[KrissDrawing]

Pull Request Template

Issue Overview

This PR addresses #944

• This change addresses the issue in full
• This change addresses only certain aspects of the issue
• This change is a dependency for another issue
• This change has a dependency from another issue

Description

Changed listings images alt text to be more specific (to include listing name)
For listingCard (in /listings) it will read listing name and - photo, as it is not treated as Image, but link.
For images for specific listing it is treated as an Image, so there will be added - photo (number of photo) only when having multiple images (both in listing view, and after modal is opened).

How Can This Be Tested/Reviewed?

while having screen reader on, go to /listings focus on images.
do the same for listing/:id view, both for single image, and multiple image listing.
For multiple images test images inside modal (that appears after clicking).

Checklist:

• My code follows the style guidelines of this project
• I have added QA notes to the issue with applicable URLs
• I have performed a self-review of my own code
• I have reviewed the changes in a desktop view
• I have reviewed the changes in a mobile view
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have assigned reviewers
• I have run yarn generate:client and/or created a migration if I made backend changes that require them
• I have exported any new pieces added to ui-components
• My commit message(s) is/are polished, and any breaking changes are indicated in the message and are well-described
• Commits made across packages purposefully have the same commit message/version change, else are separated into different commits

Reviewer Notes:

Steps to review a PR:

• Read and understand the issue, and ensure the author has added QA notes
• Review the code itself from a style point of view
• Pull the changes down locally and test that the acceptance criteria is met
• Also review the acceptance criteria on the Netlify deploy preview (noting that these do not yet include any backend changes made in the PR)
• Either explicitly ask a clarifying question, request changes, or approve the PR if there are small remaining changes but the PR is otherwise good to go

On Merge:

If you have one commit and message, squash. If you need each message to be applied, rebase and merge.

[netlify]

✅ Deploy Preview for detroit-storybook-dev ready!

Name	Link
🔨 Latest commit	4a85ed7
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-storybook-dev/deploys/6419c85e59c0860008ed65a6
😎 Deploy Preview	https://deploy-preview-1587--detroit-storybook-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for detroit-partners-dev ready!

Name	Link
🔨 Latest commit	4a85ed7
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-partners-dev/deploys/6419c85e8d97ed0008dafeb9
😎 Deploy Preview	https://deploy-preview-1587--detroit-partners-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for detroit-public-dev ready!

Name	Link
🔨 Latest commit	4a85ed7
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-public-dev/deploys/6419c85ef5980d000861db2b
😎 Deploy Preview	https://deploy-preview-1587--detroit-public-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[ludtkemorgan]

This change looks good. The images are displaying and reading the correct alt text now with appropriate photo index.

The ticket said that "image" shouldn't be in the aria description since the screen reader already says that by default. And with this change it now says "[property name] - photo 1, image" ("photo" coming from the alt text and "image" coming from the screen reader). @ColinBuyck & @sarahlazarich is that expected. Or should we switch it to do "[property name] - 1, image"

[sarahlazarich]

Spoke with Colin and Em here, let's update to "[property name] - 1, image" @ludtkemorgan @KrissDrawing

[ColinBuyck]

This is looking good, I'm just noticing two things: The first is that I believe the inclusion of "image" in the listings image alt name is repetitive even though it is a link. On my end, it is still reading out image but this time before the label. Are you seeing the same behavior?

The second piece is that the coming soon label on an image on the listings page seems to be overriding the image alt labeling. Therefore, any image on the listings page with this tag just reads link, coming soon. However, this is not a blocker or within the scope of this ticket so I made a follow-up issue here!

[KrissDrawing]

@ColinBuyck hmm interesting, I'm not seeing visited, link, image on my side. Will need to check if i can tweak some settings to achieve that, or maybe i'm just on different OS version (it's 12.3 for me) 🤔 Anyway I removed additional image as it seem like it should be already announced by screen reader.

[ColinBuyck]

Thanks for making those updates! LGTM 🪂