Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
2 tasks done
mattcoulon-ia opened this issue Apr 27, 2023 · 3 comments · May be fixed by #5878
Open
2 tasks done

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

mattcoulon-ia opened this issue Apr 27, 2023 · 3 comments · May be fixed by #5878
Assignees
@mejiaj @mahoneycm @amyleadem
Labels
Package: In-page navigation Role: Dev Development/engineering skills needed Status: Triage We're triaging this issue and grooming if necessary Type: Bug A problem in the code

Comments

@mattcoulon-ia
Copy link

mattcoulon-ia commented Apr 27, 2023 •
edited

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
@mattcoulon-ia mattcoulon-ia added Needs: Confirmation We need to confirm that this is an issue Status: Triage We're triaging this issue and grooming if necessary Type: Bug A problem in the code labels Apr 27, 2023
@thisisdano thisisdano added Role: Dev Development/engineering skills needed and removed Status: Triage We're triaging this issue and grooming if necessary labels Jun 1, 2023
@richard8
Copy link

I'm experiencing this issue too — not only with summary boxes, but with headers inside other components as well.

The page navigation and anchor links are generated, and navigation links are highlighted as expected when scrolling through the page. But clicking on a navigation link will scroll to the top of the page rather than to the corresponding anchor.

@jhancock532
Copy link

I've experienced this issue recently with the card component. You can see a live demo of the issue in action by visiting the card component documentation page, then clicking on one of the card headings.

in-page-navigation-bug

I discovered that the card heading worked in isolation, but as soon as it was placed in a container (<div class="usa-card__container">) it stopped functioning.

@jhancock532 jhancock532 linked a pull request Apr 22, 2024 that will close this issue
Open
@mahoneycm
Copy link
Contributor

Confirming I'm able to replicate the bug behavior on the Summary Box and Card pages as well as various Utility pages like Border and Margin and padding.

Some utility pages like Color allow you to jump to some h3's but not those nested within the utility-title-bar elements.

@mahoneycm mahoneycm added Status: Triage We're triaging this issue and grooming if necessary Package: In-page navigation and removed Needs: Confirmation We need to confirm that this is an issue labels May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mejiaj mejiaj

@mahoneycm mahoneycm

@amyleadem amyleadem

Labels
Package: In-page navigation Role: Dev Development/engineering skills needed Status: Triage We're triaging this issue and grooming if necessary Type: Bug A problem in the code
Projects
USWDS Core Project Data
Status: TBD
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

USWDS - In-Page Navigation: Fix scrolling to nested headers jhancock532/uswds
7 participants
@mejiaj @richard8 @thisisdano @mattcoulon-ia @jhancock532 @mahoneycm @amyleadem