Skip to content

Fix accessibility issue with Back-to-Top link#47307

Open
ankushx01-dev wants to merge 1 commit intojoomla:5.4-devfrom
ankushx01-dev:patch-1
Open

Fix accessibility issue with Back-to-Top link#47307
ankushx01-dev wants to merge 1 commit intojoomla:5.4-devfrom
ankushx01-dev:patch-1

Conversation

@ankushx01-dev
Copy link

@ankushx01-dev ankushx01-dev commented Mar 5, 2026

Added role="button" attribute to the Back-to-Top link in the Cassiopeia template to improve accessibility and resolve Axe DevTools warning.

Fixes #45679

Pull Request resolves #45679.

  • 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 role="button" attribute to the Back-to-Top link in the Cassiopeia template (templates/cassiopeia/index.php) to improve accessibility and address Axe DevTools warnings.

Testing Instructions

  1. Install Joomla and use the Cassiopeia template.
  2. Enable the "Back to Top" option in the template settings.
  3. Inspect the Back-to-Top link element in the page source.
  4. Verify that the element contains role="button".
  5. Run Axe DevTools accessibility check to confirm the warning is resolved.

Actual result BEFORE applying this Pull Request

The Back-to-Top link does not contain the role="button" attribute, which triggers an accessibility warning in Axe DevTools.

Expected result AFTER applying this Pull Request

The Back-to-Top link includes role="button", improving accessibility and resolving the Axe DevTools warning.

Link to documentations

Please select:

  • Documentation link for guide.joomla.org:

  • No documentation changes for guide.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

Added role="button" attribute to the Back-to-Top link in the Cassiopeia template
to improve accessibility and resolve Axe DevTools warning.

Fixes joomla#45679
@brianteeman
Copy link
Contributor

why add a role to change the semantic meaning of an a ? if you want it to be a button then change it to button

BUT please note that either with or without that change does not mean it is correct. Passing an automated test does not mean it is correct it just means you passed a test.

Have you researched accessibility best practices for back-to-top links and followed their advice or did you just rely on passing a test

@ankushx01-dev
Copy link
Author

Thank you for the feedback.

I understand that adding role="button" to an anchor element may not be the correct semantic approach. I will review accessibility best practices for back-to-top links and update the implementation accordingly instead of relying only on the Axe DevTools warning.

I will update the PR shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Axe Dev Tools Accesibility Error

3 participants