Skip to content

USWDS - Bug: In-Page Navigation scrolling does not work with Summary Box #5255

@mattcoulon-ia

Description

@mattcoulon-ia

Describe the bug

When an h2 or h3 tag is used inside of a Summary Box component, it will appear in the In-page navigation component. Clicking on its corresponding link in the navigation does not scroll to its anchor, but rather scrolls to the top of the page.

Steps to reproduce the bug

  1. Set up a page to use the In-page Navigation component.
  2. Add sections of content with h2 and/or h3 tags (the more vertical space this takes up the easier it will be to see the issue).
  3. Add a Summary Box component to the page.
  4. Make the Summary Box header an h2
  5. Click on the link in the In-page Navigation that is supposed to anchor to the Summary Box
  6. Instead of scrolling to the Summary Box, the page will scroll to the top of main

Expected Behavior

The In-page Navigation component should scroll to a Summary Box anchor when that Summary Box is part of the nav.

Related code

The issue can be seen by visiting https://designsystem.digital.gov/components/summary-box/ and clicking on 'Key information' under On this page.

Screenshots

No response

System setup

  • USWDS version 3.4.1
  • Device: Windows PC
  • Operating System: Windows 10 Enterprise
  • Browser and version: Chrome Version 112.0.5615.138 (Official Build) (64-bit)

Additional context

No response

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Done

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions