1931806 - Newtab section cards anchor tag improperly positioned

Status: RESOLVED FIXED

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

Description

[Reem Hamoui]

In the Firefox New Tab page, the card sections contain an anchor tag, containing the article link, is intended to make the cards interactive. However, the anchor tag is currently positioned absolute with width: 100% and height: 100%, covering the entire card. This implementation is problematic because:

• It does not wrap the actual content of the card, which is what should be interactive.
• The use of position: absolute and covering the card entirely can lead to unexpected behaviors or accessibility issues, especially for screen readers and keyboard navigation.

Expected Behavior:

• The anchor tag should wrap around the content of the card to properly associate the interactive area with corresponding content
• The anchor should not have to rely on absolute positioning to make the entire card interactive.

Actual Behavior:

• The anchor tag is positioned absolutely over the card, with width: 100% and height: 100%, instead of wrapping the content.

Steps to Reproduce:

• Open a new tab in Firefox.
• Inspect any card section in the new tab page.
• Observe that the anchor tag does not wrap around the content and instead spans the entire card using absolute positioning.

Comment 1

[Anna Yeddi [:ayeddi]]

The bug may affect users of alternative navigation such as voice controls and switches when they use the grid overlay to send a click on a card. In this case, the whole card is the same clickable area, but with the newer New Tab page developments there are more controls being added to the card which could increase the chance of a papercut.

Plus, overlaying prevents users from being able to select the text on the card with a mouse. This could make it cumbersome for users with dyslexia, neurodiverse users to follow their reading position (some users would select the text they're currently reading to help with the focus and comprehension too) and, for users with limited language skills, to be able to utilize select-to-translate and GenAI features like simplification.

Comment 2

[Maxx Crawford [:maxx]]

Triage reasoning:

• Severity: -- → S3: Work around exists for this issue
• Priority: -- → P2: Fix in the next release (Nightly + 2) cycle

Comment 3

[Reem Hamoui]

Attachment: Bug 1931806 - Fixing position of SafeAnchor component for DSCards to wrap around content properly. r=#home-newtab-reviewers

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d811f190d1b9
Fixing position of SafeAnchor component for DSCards to wrap around content properly. r=home-newtab-reviewers,thecount

Comment 5

[Serban Stanca [:SerbanS]]

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