Closed Bug 1940783 Opened 1 month ago Closed 18 days ago

The IAB Banners are skipped when keyboard navigation is used to navigate through the Pocket cards

Categories

(Firefox :: New Tab Page, defect)

Desktop
All
defect

Tracking

()

VERIFIED FIXED
136 Branch
Tracking Status
firefox135 --- verified
firefox136 --- verified

People

(Reporter: srosu, Assigned: rhamoui, NeedInfo)

References

(Blocks 2 open bugs)

Details

Attachments

(2 files)

[Affected versions]:

  • Firefox Nightly 136.0a1 (Build ID: 20250109093225)
  • Firefox Beta 135.0b2 (Build ID: 20250108092002)

[Affected Platforms]:

  • Windows 10 x64
  • Ubuntu 24.04 x64
  • MacOS 14.7.1

[Prerequisites]:

  • Have a Firefox Beta 135.0b2 "en-US" locale build installed.
  • Follow the instructions from this TestRail test case in order to trigger an IAB banner.

[Steps to reproduce]:

  1. Open a new tab and make sure an IAB Banner is displayed.
  2. Press the "Tab" key until the contextual menu button of the card above the banner is focused.
  3. Press again the “Tab” key to focus the banner.
  4. Observe what happens.

[Expected result]:

  • The banner is focused.

[Actual result]:

  • The first card below the banner is focused.

[Notes]:

  • The banner can be focused only after all the elements from the New Tab page are focused.
  • This issue is reproducible on both banners (either Billboard or Leaderboard banner).
  • Please see a screen recording of the issue here.
Assignee: nobody → rhamoui

Seems the issue here is that the AdBanner component is being pushed into the cards array, however because we're using the array.push() method, AdBanner is being placed at the end of the array. So while it is being visually placed on a specific row in the CardGrid, it doesn't follow the DOM order of the array, and is being focused on after all the cards in the grid, instead of where we've visually positioned it.

Upon tinkering, array.splice() seems like the safer method to use to inject the AdBanner component where we want it in the array, but it'll need some extra code to make sure the AdBanner is spliced in the array after a complete row in the grid, and should be focused on only after the row above it has already been tabbed through. Because we have rows of 3, we need the AdBanner to be focused on after the indexes of :

  • [0, 1, 2] (placed after first row) or
  • [3, 4, 5] (placed after second row) or
  • [6, 7, 8] (placed after third row)
  • etc...

I'm currently working on a fix for this and will have it up soon

Attachment #9459308 - Attachment description: WIP: Bug 1940783 - Fix focus order for IAB banner in DOM. → Bug 1940783 - Fix focus order for IAB banner in DOM. r=#home-newtab-reviewers
Pushed by rhamoui@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/4852824f5ae3 Fix focus order for IAB banner in DOM. r=home-newtab-reviewers,npypchenko,nbarrett,thecount
Status: NEW → RESOLVED
Closed: 18 days ago
Resolution: --- → FIXED
Target Milestone: --- → 136 Branch

The patch landed in nightly and beta is affected.
:rhamoui, is this bug important enough to require an uplift?

  • If yes, please nominate the patch for beta approval.
  • If no, please set status-firefox135 to wontfix.

For more information, please visit BugBot documentation.

Flags: needinfo?(rhamoui)
Attachment #9461142 - Flags: approval-mozilla-beta?

beta Uplift Approval Request

  • User impact if declined: User won't be able to tab to the banner in the order of what is displayed visually
  • Code covered by automated testing: yes
  • Fix verified in Nightly: no
  • Needs manual QE test: yes
  • Steps to reproduce for manual QE testing: Steps to reproduce found in bugzilla
  • Risk associated with taking this patch: Low
  • Explanation of risk level: Banner is currently behind a pref
  • String changes made/needed: No
  • Is Android affected?: no
Flags: qe-verify+
Attachment #9461142 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
QA Whiteboard: [qa-triaged]

I have verified this issue using the latest Firefox Nightly 136.0a1 build (Build ID: 20250123095238) and Firefox Beta 135.0b9 (trybuild from treeherder) (Build ID: 20250123004313) on Windows 10 x64, macOS 14.7.1 and Ubuntu 24.04.1 x64.

  • The IAB banners are focused in the correct order when keyboard navigation is used to navigate through the Pocket cards.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: