[#47307] - [5.4] Fix accessibility issue with Back-to-Top link
- Pending
- Medium
- Build: 5.4-dev
- # 47307
- Diff
- ankushx01-dev:patch-1
User tests: Successful: Unsuccessful:
Ensured that the Back-to-Top link in the Cassiopeia template points to a valid target by adding an id="top" anchor at the top of the page.
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 an id="top" anchor to the page so the Back-to-Top link points to a valid target.
This follows accessibility best practices by keeping the semantic anchor link instead of modifying its role attribute.
Testing Instructions
- Install Joomla and use the Cassiopeia template.
- Enable the "Back to Top" option in the template settings.
- Scroll down the page and click the Back-to-Top link.
- Verify that the link navigates to the top of the page using the
id="top"anchor.
Actual result BEFORE applying this Pull Request
The Back-to-Top link may not point to a valid target, which can cause accessibility warnings in automated tools.
Expected result AFTER applying this Pull Request
The Back-to-Top link correctly navigates to the element with id="top", following accessibility best practices for anchor navigation.
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
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Front End Templates (site) |
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.
| Labels |
Added:
PR-5.4-dev
|
||
@ankushx01-dev can you please actualize the description of the PR? Adding the id #top is a correct solution, but the description includes other things you have already removed from the code.
And also update your branch.
Thank you.
| Labels |
Added:
a11y
bug
|
||
Thank you @drmenzelit for the feedback. I have updated the PR description to reflect the current implementation using the id="top" anchor and synced the branch with the latest 5.4-dev.
and synced the branch with the latest 5.4-dev.
@ankushx01-dev It does not need that always when GitHub shows the branch is not up to date. It is only necessary when there are conflicts shown and resolved. Unnecessary branch updates keep our resources unnecessarily busy.
Thanks for the clarification! I’ll keep that in mind and only update the branch when there are conflicts.
HLeithner
- | Title |
|
||||||
why add a role to change the semantic meaning of an
a? if you want it to be a button then change it tobuttonBUT 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