1996700 - [Weather Widget] The weather opt-in dialog container is missing an accessible name

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Attachment: NVDA output showing the Weather widget opt-in dialog that is announced only as "dialog" while it has an on-screen heading: no announcement on focus and no label for the dialog is added in red text

Steps to reproduce (STR):

1. Have a screen reader running (i.e. NVDA on Windows OS)
2. In Firefox Nightly, ensure the following preferences are set in about:config:
   1. browser.newtabpage.activity-stream.showWeather = true
   2. browser.newtabpage.activity-stream.system.showWeather = true
   3. browser.newtabpage.activity-stream.system.showWeatherOptIn = true
   4. browser.newtabpage.activity-stream.weather.optInAccepted = false
   5. browser.newtabpage.activity-stream.weather.optInDisplayed = true
   6. browser.newtabpage.activity-stream.weather.staticData.enabled = true
   7. browser.search.region = FR (or another region included in browser.newtabpage.activity-stream.discoverystream.optIn-region-weather-config) - ensure to restart Firefox Nightly if this value was changed
3. Open a new tab or navigate to about:newtab
4. Confirm that when the Weather Widget is displayed for the first time, the opt-in dialog titled “Do you want to see the weather for your location?” appears
5. Observe what is announced by a screen reader when the focus is moved to the opt-in dialog
   1. Alternatively, review the dialog container in the Accessibility tree using Firefox Developer Tools > Accessibility panel inspector

Expected results:

1. The dialog container should have an accessible name. In this case, the accessible name should be the same as its on-screen heading: Do you want to see the weather for your location?
2. The accessible name should be programmatically provided via an aria-labelledby property referencing the dialog’s <h3> heading.
3. Screen readers should announce the dialog with its title upon focus, i.e. “Dialog, Do you want to see the weather for your location?”.

Actual results:

1. The dialog container has no accessible name (no aria-labelledby attribute is provided), thus only dialog role is announced by a screen reader when a focus is moved into the dialog
2. The heading “Do you want to see the weather for your location?” is visually present but not programmatically associated with the dialog
3. User impact: Screen reader users and other assistive technology users would not know the purpose of this dialog when it appears. Without an accessible name, only the role of the dialog is announced, providing no context about what this dialog contains or/and what the user is being asked to do in this dialog.

Recommendation:

1. Add an aria-labelledby attribute to the weather opt-in dialog container referencing the dialog’s <h3> heading.
   • Example:

     <dialog open={true} aria-labelledby="newtab-weather-opt-in-title">
       <h3  data-l10n-id="newtab-weather-opt-in-see-weather" id="newtab-weather-opt-in-title">Do you want to see the weather for your location?</h3>
       [...]
     </dialog>
     

2. Verify that the dialog's accessible name is correctly announced by screen readers.

Comment 1

[BugBot [:suhaib / :marco]]

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

For more information, please visit BugBot documentation.