-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix button not allowed inside anchor in footer #551
Fix button not allowed inside anchor in footer #551
Conversation
Signed-off-by: Daniel F. Dickinson <20735818+danielfdickinson@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or maybe we can remove span
also, and put the attributes to a
tag
I suspect the CSS styling trick that creates the up arrow requires that there be a sub-element, but I will test. Sorry, I see it is an SVG, not the CSS styling trick. Moving the attributes ought to work, then. |
Move attributes to anchor and remove not required span (which was used place of a button which was against HTML spec). Signed-off-by: Daniel F. Dickinson <20735818+danielfdickinson@users.noreply.github.com>
Kudos, SonarCloud Quality Gate passed!
|
I made the requested change, and it works as expected for me (the access key still works, it looks right, hover is good, the icon is only displayed after scrolling down a bit, etc). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
…aint (adityatelange#551) Move attributes to anchor and remove not required span (which was used place of a button which was against HTML spec).
What does this PR change? What problem does it solve?
HTML validators complain (correctly) about the footer "top-link" which has a <button> inside an anchor (<a>) element.
As per Mozilla Developer Network page for <a> element allowed properties 'interactive elements' (including <button>) are not allowed inside an anchor element (<a>).
I replace the
<button>
with a<span>
and add anaria-hidden="true"
to avoid screen readers repeatinggo to top
, which is already present as anaria-title
on the anchor element.Was the change discussed in an issue or in the Discussions before?
Closes #549
It is currently in action on https://www.princesandmadmen.ca.
PR Checklist