Skip to content

USWDS - Bug: In-page navigation breaks for headings inside a USWDS alert component #6295

@mgwalker

Description

@mgwalker

Describe the bug

The alert component creates a positioned container element (.usa-alert__body) that creates a new offset frame. The in-page navigation component then inserts an anchor inside the alert component. When clicking the link in the in-page navigation, it uses the anchor's offsetTop, which is the vertical distance between the selected element and its nearest offset parent. In this case, it's nearest offset parent is the alert container, not the page body itself.

Steps to reproduce the bug

  1. Browse to https://handbook.tts.gsa.gov/tools/git-signing
  2. Click About the cryptographic algorithm in the in-page nav
  3. Note that the page scrolls to the top rather than to the linked heading

Expected Behavior

The browser should scroll to the selected heading, perhaps using getBoundingClientRect instead of offsetTop since the former computes absolute values (relative to the page, not any other elements in the tree).

Related code

https://github.com/uswds/uswds/blob/main/packages/usa-in-page-navigation/src/index.js#L202

Screenshots

No response

System setup

  • USWDS version: 3.11.0
  • All browsers

Additional context

Possibly related to:

Code of Conduct

Metadata

Metadata

Assignees

Type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions