Skip to content
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

Merged
merged 2 commits into from
Sep 5, 2021
Merged

Fix button not allowed inside anchor in footer #551

merged 2 commits into from
Sep 5, 2021

Conversation

danielfdickinson
Copy link
Contributor

@danielfdickinson danielfdickinson commented Sep 3, 2021

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 an aria-hidden="true" to avoid screen readers repeating go to top, which is already present as an aria-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

  • This change adds/updates translations and I have used the template present here.
  • I have enabled maintainer edits for this PR.
  • I have verified that the code works as described/as intended.
  • This change adds a Social Icon which has a permissive license to use it.
  • This change does not include any CDN resources/links.
  • This change does not include any unrelated scripts such as bash and python scripts.
  • This change updates the overridden internal templates from HUGO's repository.

Copy link
Owner

@adityatelange adityatelange left a 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

@danielfdickinson
Copy link
Contributor Author

danielfdickinson commented Sep 3, 2021

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 <[email protected]>
@sonarcloud
Copy link

sonarcloud bot commented Sep 4, 2021

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@danielfdickinson
Copy link
Contributor Author

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).

Copy link
Owner

@adityatelange adityatelange left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@adityatelange adityatelange merged commit 8456ad8 into adityatelange:master Sep 5, 2021
@danielfdickinson danielfdickinson deleted the pr-top-link-button-not-allowed branch September 5, 2021 06:32
kylethedeveloper pushed a commit to kylethedeveloper/hugo-PaperMod that referenced this pull request Feb 21, 2023
…aint (adityatelange#551)

Move attributes to anchor and remove not required span (which was used
place of a button which was against HTML spec).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] <button> element not allowed inside anchor (<a>)
2 participants