Visitar URL original
docs(Return to top) Use #top for "Return to top" component by caseywatts · Pull Request #7005 · uswds/uswds · GitHub
Skip to content

docs(Return to top) Use #top for "Return to top" component - #7005

Closed
caseywatts wants to merge 1 commit into
uswds:developfrom
caseywatts:cw/return-to-top-anchor
Closed

caseywatts wants to merge 1 commit into
uswds:developfrom
caseywatts:cw/return-to-top-anchor

Conversation

@caseywatts

Copy link
Copy Markdown

Summary

Updates the example template for the "Return to top" component to make it clearer that the anchor link works. Both # and #top work, but #top is a bit more explicit about the intention behind it.

Problem statement

Some individuals implementing USWDS get confused, believing they need to manually add an anchor tag to the top of the page for this feature to work. We can be explicit about this in the documentation, and avoid having this question come up at all. This makes the code easier to understand, and more intention-revealing.

Solution

  1. (in this PR) This updates the example templates to suggest using #top -- that's the main way people end up using these templates.
  2. (not in this PR) We should probably also link to references about this feature, but I'm not sure where exactly in the documentation to do that. Here are two references that show that # and #top both work, and that both are widely supported by browsers:

AI disclosure

What AI tools did you use to create this MR?

  • No AI
  • Chat
  • Completions (e.g. Copilot)
  • Coding Agent

Testing and review

Test this feature in a multiple browsers (locally, or in a tool like SauceLabs if you have access to that):

  1. Create (or go to) a page that has the "return to top" component, where the DOM has replaced # with #top (is there a way to preview that in this repo? A Storybook or something? I'm not sure)
  2. Make sure clicking on the "return to top" link takes you to the top of the page, even without an element with id #top on the page.

@github-actions

github-actions Bot commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

✅ All commits on this PR have a verified signature. Thanks!

@coderabbitai

coderabbitai Bot commented Oct 7, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository: uswds/uswds/.coderabbit.yaml
  • Review profile: QUIET
  • Plan: Advanced
  • Run ID: b8fdfa44-cc09-4869-81ed-64dce22eb7bc
📥 Commits

Reviewing files that changed from the base of the PR and between ec80133 and ee3639b.

📒 Files selected for processing (3)
  • packages/usa-footer/src/test/template.html
  • packages/usa-skipnav/src/test/template.html
  • packages/usa-tooltip/src/test/test-patterns/test-usa-tooltip-utilities.twig

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.


📝 Summary

Summary by CodeRabbit

  • Bug Fixes
    • Updated return-to-top links in footer, skip-navigation, and tooltip examples to target the page’s top anchor, so they return users to the top instead of navigating to an empty fragment. These updates apply to the corresponding component examples and test pages.
  • Style
    • Reformatted footer markup without changing its displayed content, contact details, or attributes.

Walkthrough

Three test templates change their return-to-top link target from # to #top. The footer and skip-navigation templates also have markup layout changes.

Changes

Test template link updates

Layer / File(s) Summary
Align return-to-top links
packages/usa-footer/src/test/template.html, packages/usa-skipnav/src/test/template.html, packages/usa-tooltip/src/test/test-patterns/test-usa-tooltip-utilities.twig
All three templates now target #top. The footer markup is reformatted, and the skip-navigation template’s empty main element is condensed to one line.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~4 minutes

Change: Other

Suggested labels: Is: Breaking 🔴, Affects: Markup 🟡, Affects: Testing

Merge Risk: ⚪ Minimal · up to ee363

The updated example links continue to take users to the page top in supported browsers. These template changes present no identified merge-blocking behavior risk.

🚥 Pre-merge checks | ✅ 8 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Title check ⚠️ Warning The title describes the change, but it does not follow the required syntax. The type is uppercase, and the scope contains uppercase letters and spaces. Change the title to use a lowercase type and an optional lowercase scope, followed by a colon and description. For example: "docs(return-to-top): use #top for the return-to-top component".
Breaking Change Declared ⚠️ Warning The pull request description contains none of the three required breaking-change statements. It must contain exactly one approved statement. Add exactly one of these statements to the description: “This is not a breaking change.”, “:warning: This is potentially a breaking change.”, or “:warning: This is a breaking change.”
✅ Passed checks (8 passed)
Check name Status Explanation
Description check ✅ Passed The description clearly explains that the example templates change from # to #top and states the reason for the change.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
No New Runtime Dependency ✅ Passed PASS. The PR changes only three HTML/Twig test templates; no package.json file changes the dependencies field, and no production JavaScript files under packages//src//*.js are changed. Therefore, …
Regression Test Targets The Change ✅ Passed PASS: The PR changes only HTML/Twig fixtures under packages/**/src/test/**. It does not change production JavaScript or Sass, so this regression-test check is not applicable. The diff only updates e…
New Api Surface Follow-Ups ✅ Passed The check is not applicable. The pull request changes only test-template markup: three Return to top links now use href="#top", with unrelated HTML formatting changes. It adds no $theme-* settin…
Accessibility Verification Declared ✅ Passed PASS — The pull request changes example link targets from # to #top and makes unrelated markup formatting changes. The diff does not change ARIA attributes, focus management, keyboard handling, sc…
Theme Token Discipline ✅ Passed PASS: The pull request changes only HTML and Twig test templates. No *.scss file under packages/ changes, so it introduces no literal replacement or new hardcoded theme value covered by this check…
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@caseywatts

Copy link
Copy Markdown
Author

I don't consent to using CodeRabbit... sorry, I'll close this PR 😞

@caseywatts caseywatts closed this Oct 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant