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

Add missing role=button and tabindex=0 for search icon button to fix AMP validity #1500

Merged
merged 1 commit into from
Apr 5, 2020

Conversation

westonruter
Copy link
Contributor

Summary

AMP requires role and tabindex attributes for elements that have an on="tap:..." attribute, unless they are buttons or links (i.e. elements that aren't normally tappable/tabbable).

Originally reported on the AMP plugin support forum: https://wordpress.org/support/topic/the-attribute-tabindex-in-tag-span-is-missing-or-incorrect/

Note the changes where should be done automatically by the AMP plugin in the future (via ampproject/amp-wp#4528) but it is best if the changes are done up-front.

As an alternative to adding these attributes, the icon could instead be represented by a button instead of a span.

Will affect visual aspect of the product

YES (when tabbing there may be an outline on the element)

Test instructions

  • No validation error should be reported for the page.
  • The search icon should be tabbable with the keyboard.

AMP requires these attributes for elements that have an `on="tap:..."` attribute, unless they are buttons or links (i.e. elements that aren't normally tappable/tabbable).
@westonruter westonruter changed the title Add missing role=button and tabindex=0 for search icon button Add missing role=button and tabindex=0 for search icon button to fix AMP validity Apr 4, 2020
@selul selul changed the base branch from master to development April 5, 2020 10:06
@selul
Copy link
Contributor

selul commented Apr 5, 2020

Thanks a lot for your contribution, @westonruter!

@selul selul merged commit 0d08ddc into Codeinwp:development Apr 5, 2020
@pirate-bot
Copy link
Collaborator

🎉 This PR is included in version 2.6.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Apr 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Indicate that an issue has been resolved and released in a particular version of the product.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants