Add sanitizer to ensure 'role' and 'tabindex' attributes are present for elements with 'on' attribute

[westonruter]

Feature description

Something that comes up over and over again in the support forums is people adding on handler attributes for tap events but then not also adding role=button and tabindex=0 (actually, the value doesn't matter, just role and tabindex). Examples:

• https://wordpress.org/support/topic/the-attribute-tabindex-in-tag-span-is-missing-or-incorrect/
• https://wordpress.org/support/topic/amp-next-page-v1-strange-behaviour/#post-12625539
• https://wordpress.org/support/topic/search-console-error-with-amp-plugin/#post-12445708
• https://wordpress.org/support/topic/tabindex-bug/

In #4447 I proposed to add validator support to remove the elements that lack these attributes. However, this would be somewhat jarring, especially in Reader mode where we don't yet have validation error reporting (#4480).

Therefore, I suggest a better behavior would be to introduce a new AMP_Accessibility_Sanitizer that looks for //*[ @on and contains( @on, 'tap:' ) and ( not( @tabindex ) or not( @role ) )] and then automatically supply the role=button if no role attribute is present, or tabindex=0 if no tabindex is present. Note that this should only be done for elements that are not intrinsically focusable, for example button and a would not be included. The specific elements that don't require role and tabindex attributes are indicated in the spec like for the button element:

  attrs: {
    name: "role"
    implicit: true
  }
  attrs: {
    name: "tabindex"
    implicit: true
  }

See the on attribute spec:

  attrs: {
    name: "on"
    trigger: {
      if_value_regex: "tap:.*"
      also_requires_attr: "role"
      also_requires_attr: "tabindex"
    }
  }

Ideally these would be extracted from the spec to add to AMP_Allowed_Tags_Generated so that we don't have to hard-code them. This would be an ultimate prerequisite for adding support for the trigger construct in #4447, but it can/should be done up first for a minor release.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

Here's a mini plugin that implements the sanitizer: https://gist.github.com/westonruter/19f18bf520d0b8c37e39d17b82febd2f

Ideally these would be extracted from the spec to add to AMP_Allowed_Tags_Generated so that we don't have to hard-code them.

Nevertheless, there are only two two implicit elements: button and a. So it is not required to extract from the spec.