2021460 - Nova grid changes the overall focus order of New Tab

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Irene Ni [:ini]]

The tab focus order should generally follow visual reading order, going top down and left to right for LTR contexts. The order in the classic layout is:

1. weather widget
2. topsites
3. content feed
4. privacy notice
5. customize button

With the Nova grid enabled, the DOM order has changed, causing the weather widget to receive focus after the content feed. We'll want to fix this to restore the standard order before we launch.

Comment 1

[Eitan Isaacson [:eeejay]]

From fom my understanding, a headmast feature (weather) is only read at the end of a variable list of articles? Marking this as and s2 since it makes a basic feature of NTP very hard to use.

Comment 2

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

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 3

[Anna Yeddi [:ayeddi]]

The Accessibility team has discussed this bug with the HNT team on a call, we reviewed the proposed designs and expected future edge cases. The new grid system with the current expectations of the grouping of the content could be modified with the following semantic markup to create landmarks for keyboard users to navigate between. This would especially be important for screen reader users. The draft recommendation is to update the <div className="sidebar-inline-end"> to HTML <aside {...}> element and <div className="content"> to <main {...}>. The sidebar-inline-start would likely be getting a navigation component from Acorns and it already has used <nav> element for landmark creation, thus, in its current plan, we are not expecting any other modifications to be needed.

The experience for sighted keyboard-only users won't be ideal, especially, in cases when multiple topics, widgets and other sections are added to the <main> section of the page, so this would possibly still remain a bug after the landmarks are created - though a lower severity, non-blocking one (specific a11y severity S3/S4 would be depending on the default UI and possible modifications). We still recommend doing a user testing with users of different types of assistive technology and we're planning to do it with Fable, once the interface is testable.

To fully resolve the issue, we discussed the possibility to add a skip link (W3C WAI example) (alternatively: WebAIM example with detailed description of the skip link functionality and expectations to allow quick jump from the top of the page to the widgets section.

Comment 4

[Maxx Crawford [:maxx]]

Discussed with the a11y team - We're going to modify the semantic markup for some of the containers, to add landmark navigation to the page.

Comment 5

[Maxx Crawford [:maxx]]

Attachment: Bug 2021460 - Fix tab order by placing sidebar-inline-end before main in DOM r?#home-newtab-reviewers

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/bd2a0560e4ee
https://hg.mozilla.org/integration/autoland/rev/e0edd719d852
Fix tab order by placing sidebar-inline-end before main in DOM r=home-newtab-reviewers,accessibility-frontend-reviewers,ini,ayeddi

Comment 7

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/e0edd719d852

Comment 8

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/e0edd719d852

Comment 9

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the latest Firefox Nightly 152.0a1 (Build ID: 20260427155724) and Firefox Beta 151.0b3 (Build ID: 20260427090318) on Windows 10 x64, macOS 15.7.3, and Ubuntu 24.04.1.

• Confirm that using keyboard navigation, the New Tab sections are focused in the following order: Weather widget, Top Sites, Content Feed, Privacy Notice, and the Customize button.