[FIX] Cassiopeia: Back-to-top button and bottom-a section was missing landmark regions (Issue #45679)#47314
Open
Rishu-Soni wants to merge 2 commits intojoomla:5.4-devfrom
Open
[FIX] Cassiopeia: Back-to-top button and bottom-a section was missing landmark regions (Issue #45679)#47314Rishu-Soni wants to merge 2 commits intojoomla:5.4-devfrom
Rishu-Soni wants to merge 2 commits intojoomla:5.4-devfrom
Conversation
…egion for screen readers. and no visual effect.
…egion for screen readers. and no visual effect.
Collaborator
|
Changing to |
Contributor
|
Passing an automated test is not a sign of success |
Member
|
@Rishu-Soni Have you checked if there is already a PR for the same issue? There is #47307 . So now we have 2 concurrent PRs for the same issue, and it seems both are wrong. |
Member
Hmm, it seems both PRs try to solve the issue partly for the 2 different parts. So they are not concurrent. |
Member
|
And now he have a 3rd PR: #47332 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Added landmark region wrapper and role="button" to the Back-to-Top link, and changed
the container-bottom-a wrapper from
resolve Axe DevTools accessibility violations and improve screen-reader accessibility.
Fixes #45679
Pull Request resolves #45679.
Summary of Changes
Both changes are in [templates/cassiopeia/index.php], Nothing visual changed, just two small structural fixes.
Change 1 — Back-to-top button:
So basically, the back-to-top
<a>tag was sitting completely outside all the landmark sections on the page (it was after the</footer>closing tag with nothing around it). This means screen-reader users who navigate using landmarks would just never find this button — it was kind of invisible to them. I wrapped it in a<div role="region">and gave it the label fromTPL_CASSIOPEIA_BACKTOTOP_LABELwhich already exists in the anchor tag. I also addedrole="button"on the<a>itself because it behaves like a button, not a link,and screen readers should say "button" not "link" when you click to it.
Change 2 —
container-bottom-asection:Same kind of problem — the wrapper around the
bottom-amodule position was just a plain<div>, which doesn't count as a landmark. So anything inside it was also "lost" for screen-reader users. I changed<div>to<aside>which is a proper HTML5 landmark by itself. The CSS classes are exactly the same, so nothing breaks visually.Testing Instructions
#back-top..container-bottom-a.should say "Back-to-top Link, region" and then "Back to Top, button".
Actual result BEFORE applying this Pull Request
When you run Axe DevTools on a Cassiopeia page, it gives two "region" errors saying
"Some page content is not contained by landmarks." One points to the
#back-topanchor and the other to
.container-bottom-a. If someone is using a screen readerand navigating by landmarks, they completely miss both of these sections because
they aren't wrapped in any landmark at all.
Expected result AFTER applying this Pull Request
Both Axe errors go away. The back-to-top button is now inside a named region
landmark so screen readers can find it. It also gets announced as a "button"
which makes more sense than "link". The bottom-a section becomes an
<aside>which is a real landmark, so its content is reachable too.
2 Axe violations fixed, nothing broken visually.
Link to documentations
Please select: