1994079 - Card images do not have an alt attribute

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect, P2)

Description

[Maxx Crawford [:maxx]]

Attachment: image.png

Story images do not have an alt attribute. When NVDA focus reaches a story card, it will read off the image name.

Note: Does Merino provide alt tags / pass along data from the provider?

Comment 1

[BugBot [:suhaib / :marco]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:thecount, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 2

[Irene Ni [:ini]]

Spoke with the backend team, and we currently don't have alt text available through the content feed API. We would need to engage a new vendor at additional cost, with an estimated 3 weeks of backend work.

Comment 3

[Reem Hamoui]

We can probably use an empty alt tag here to indicate to screenreaders that this is a decorative image. Unless we have explicit alt texts to provide, which sounds like will be out of scope for a while, we can just add alt="". Curious about Anna or Natalie's thoughts around this.

Comment 4

[Natalie Stroud [:nstroud]]

hi Irene and Reem! I agree with your suggestion, Reem. alt="" text should be sufficient here. Thank you!

Comment 5

[Reem Hamoui]

Thanks Natalie!
I recommend, in this case, that this could also be labeled as a good-first-bug for contributors to get their hands dirty with if they'd like to work on Firefox. What do you think Irene?

Comment 6

[Irene Ni [:ini]]

To help Mozilla out with this bug, here's the steps:

1. Comment here on the bug that you want to volunteer to help.
   This will tell others that you're working on the next steps.

2. Download and build the Firefox source code: https://firefox-source-docs.mozilla.org/setup/index.html

   • If you have any problems, please ask on the bug or reach out to the team.
   • You can also read the Firefox Contributors' Quick Reference, which has answers to most development questions: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html

3. Start working on this bug. Follow the steps the reporter of this bug has put in to replicate the issue. Use Developer Tools to inspect the card image.
   A good place to start is DSImage, the React component that renders story card images.
   Look at the defaultProps section (around line 280) - you'll see alt_text is currently set to null.

   • If you have any problems with this bug, please comment on this bug and set the needinfo flag for me.

4. Run and test your newtab changes:

   • Open 2 terminal windows, both in the firefox directory:
     • Window #1: Run ./mach newtab watch (this will watch for code changes)
     • Window #2: Run ./mach run (this will launch Firefox)
   • To reload the page with fresh code changes:
     • Mac: Press Cmd+Opt+R
     • Windows/Linux: Press Ctrl+Shift+R
   • Check your changes for adherence to our style guidelines by using ./mach lint

5. Commit your changes with a proper commit message:

   • Use the following format for your commit message:
     Bug XXXXXX - Text explaining your fix. r=#home-newtab-reviewers
     • Replace XXXXXX with the bug number (found at the end of this bug's URL)
     • Example: Bug 1234567 - Fix broken link in Top Sites menu. r=#home-newtab-reviewers
   • Commit your changes with: git commit -am "Bug XXXXXX - Your description here. r=#home-newtab-reviewers"
   • Important: Phabricator only needs one commit per bug. If you need to make additional changes after committing, use git commit --amend --no-edit to update your existing commit instead of creating a new one.

6. Submit the patch (including an automated test, if applicable) for review. Mark me as a reviewer so I'll get an email to come look at your code.

   • Getting your code reviewed: https://firefox-source-docs.mozilla.org/setup/contributing_code.html#getting-your-code-reviewed
   • This is when the bug will be assigned to you.

7. After a series of reviews and changes to your patch, I'll mark it for checkin or push it to autoland. Your code will soon be shipping to Firefox users worldwide!

8. ...now you get to think about what kind of bug you'd like to work on next. Let me know what you're interested in and I can help you find your next contribution.

Comment 7

[MUTHUSRIHEMADHARSHINI]

Hi, I’m new to contributing to Firefox, and I’d love to work on this issue if it’s still available. Please let me know if I can proceed.

Comment 8

[Irene Ni [:ini]]

Hi! I've assigned the bug to you :) Please reach out if you have any questions!

Comment 9

[MUTHUSRIHEMADHARSHINI]

(In reply to Irene Ni [:ini] from comment #8)

Thank you for assigning this to me! I’ll start setting up the Firefox build environment and begin working on the fix. I’ll reach out if I run into any issues.

Thanks again!

Comment 10

[MUTHUSRIHEMADHARSHINI]

Attachment: Bug 1994079 - Set default alt_text to empty string in DSImage component

Comment 11

[MUTHUSRIHEMADHARSHINI]

I have submitted the patch for review on Phabricator: https://phabricator.services.mozilla.com/D283891. Thanks!

Comment 12

[Irene Ni [:ini]]

Awesome work! I've tested your fix and I'm seeing alt="" on the card image. You'll just have to bundle your changes per my comment on Phabricator before landing.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5176f045ce62
https://hg.mozilla.org/integration/autoland/rev/1a679b3f7449
Set default alt_text to empty string in DSImage component r=ini,home-newtab-reviewers

Comment 14

[amarc]

https://hg.mozilla.org/mozilla-central/rev/1a679b3f7449