1998004 - [dialog] 'X' icon buttons are missing labels

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[Natalie Stroud [:nstroud]]

Attachment: New Shortcut dialog is open with text in the URL field. The 'X' icon button is highlighted by dev tools to show a missing label

STR:

1. Open Firefox Nightly
2. Go to about:newtab
3. In the shortcuts row, click the 'Add shortcut' button
4. The 'New Shortcut' dialog will appear. Type some text in the URL text field
5. Open 'Web Developer Tools' (press Ctrl + Shift + I or open the hamburger menu at the top right, More tools > Web Developer Tools)
6. In dev tools, click the Accessibility tab.
7. Click the 'Pick accessible object from page' icon button to the left of 'Inspector'.
8. Hover over the 'X' icon button. A tooltip will appear showing that the button is missing a label

Actual / Expected:

At this time, the screenreader says 'button'
The 'X' icon button needs a label so screenreader users know its purpose. aria-label can be added to icon buttons to provide an accessible name

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:thecount, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Reem Hamoui]

We could probably give this a "clear text" string that is concise and explicitly explains what the button does.
What we'd need is to create a new string in the newtab.ftl file and give it a dot props of .label and .aria-label.

---

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. Also please refer to the idea I added above to get started on how to tackle this bug

   • 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 4

[karan68]

I will be working on this please assign me this

Comment 5

[karan68]

Attachment: Bug 1998004 - Add accessible labels to 'X' icon buttons in dialog. r=mconley

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/423381c66758
https://hg.mozilla.org/integration/autoland/rev/701ec7cc728e
Add accessible labels to 'X' icon buttons in dialog. r=fluent-reviewers,home-newtab-reviewers,bolsson,reemhamz

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c9139147ae50
https://hg.mozilla.org/integration/autoland/rev/1465c6d0a68b
Revert "Bug 1998004 - Add accessible labels to 'X' icon buttons in dialog. r=fluent-reviewers,home-newtab-reviewers,bolsson,reemhamz" for causing newtab failure

Comment 8

[Cristina Horotan [:chorotan]]

Backed out for causing newtab failure

Backout link

Push with failures

Failure log

Comment 9

[Reem Hamoui]

Hey [:karan68], seems the bundle files are out of date, you'll need to rebase your branch off main:

• Checkout to main
• Run a git pull
• Checkout into your working branch
• Run a rebase -- git rebase main
• Make sure to then run the bundle function: ./mach npm run bundle --prefix=browser/extensions/newtab
• And then update your patch in Phabricator

Comment 10

[karan68]

please close this , the bug is solved https://phabricator.services.mozilla.com/D282264

Comment 11

[Reem Hamoui]

Hey Karan,
Just to re-iterate, we'll need to re-bundle and base your changes off the main branch before we land, so that your code changes can land safely.
You'll just need to follow the steps I outlined above and push your changes to Phabricator, and then we'll be able to land it.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/46ccee4dc04f
https://hg.mozilla.org/integration/autoland/rev/6fe55de72e91
Add accessible labels to 'X' icon buttons in dialog. r=fluent-reviewers,home-newtab-reviewers,bolsson,reemhamz

Comment 13

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/6fe55de72e91

Comment 14

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/6fe55de72e91