Pending

User tests: Successful: Unsuccessful:

avatar Saswatsusmoy
Saswatsusmoy
8 Mar 2026

Pull Request resolves #45679

  • [ x ] I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

  • Added id="top" to the element so the back-to-top link has a valid anchor target when JavaScript is unavailable
  • Expanded landmark to include main-top modules, system messages, and main-bottom modules so all primary page content is within a landmark region
  • Wrapped main-top and main-bottom module includes in countModules guards to prevent empty markup when no modules are published
  • Moved the back-to-top link inside so it resides within a landmark region
  • Excluded #top from the sticky-header scroll-margin-top rule to prevent incorrect scroll offset on anchor navigation

Testing Instructions

  1. Enable "Back to Top" in Cassiopeia template style options
  2. Scroll down the page and click the back-to-top arrow — page should scroll to top
  3. Right-click the back-to-top link and "Open in new tab" — should navigate to the header
  4. Enable "Sticky Header" in template style options and repeat step 2 — should scroll to the very top, not offset
  5. Run Axe DevTools accessibility scan — the "region" violations for main content area and back-to-top link should be resolved
  6. Verify no modules are assigned to main-top or main-bottom positions, then inspect the element — there should be no empty wrapper divs

Actual result BEFORE applying this Pull Request

  • The back-to-top link has no matching anchor target on the page
  • System messages, main-top, and main-bottom modules are outside the landmark, triggering Axe "region" rule violations
  • The back-to-top link sits outside , between landmarks, also triggering the "region" rule
  • On sticky-header pages, the scroll-margin-top: 10rem rule applies to all elements with an id, which would incorrectly offset the #top scroll target

Expected result AFTER applying this Pull Request

  • The back-to-top link navigates to the element as a proper fallback when JavaScript is disabled
  • All primary page content is within landmark regions (, , , )
  • The back-to-top link is inside the landmark
  • No empty markup is rendered for unpublished module positions
  • Scrolling to #top on sticky-header pages goes to the very top without offset

Link to documentations

Please select:

  • Documentation link for guide.joomla.org:

  • [ x ] No documentation changes for guide.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • [ x ] No documentation changes for manual.joomla.org needed

avatar Saswatsusmoy Saswatsusmoy - open - 8 Mar 2026
avatar Saswatsusmoy Saswatsusmoy - change - 8 Mar 2026
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 8 Mar 2026
Category Repository NPM Change Front End Templates (site)
avatar brianteeman
brianteeman - comment - 8 Mar 2026

finally someone who added the id=top

avatar ceford
ceford - comment - 10 Mar 2026

For me, the Back to Top button has a white icon on a white background. I can see the button outline. On hover I see the white icon on a blue background. I ran npm run build:css to compile the CSS. Note that the button is invisible if JavaScript is disabled.

Add a Comment

Login with GitHub to post a comment