[#47307] - Fix accessibility issue with Back-to-Top link
- Pending
- Medium
- Build: 5.4-dev
- # 47307
- Diff
- ankushx01-dev:patch-1
User tests: Successful: Unsuccessful:
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
- Install Joomla and use the Cassiopeia template.
- Enable the "Back to Top" option in the template settings.
- Inspect the Back-to-Top link element in the page source.
- Verify that the element contains role="button".
- 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
| 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
|
||
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