Skip to content

Add new accessibility sanitizer#4535

Merged
westonruter merged 10 commits intodevelopfrom
add/4528-add-accessibility-sanitizer
Apr 10, 2020
Merged

Add new accessibility sanitizer#4535
westonruter merged 10 commits intodevelopfrom
add/4528-add-accessibility-sanitizer

Conversation

@schlessera
Copy link
Copy Markdown
Collaborator

Summary

This PR includes the following changes:

  • Adds a new AMP_Accessibility_Sanitizer class that adds role and tabindex attributes to elements with the on AMP event.
  • Ports over the MarkupComparison trait from the amp/common test suite and replaces copy-pasted assertEqualMarkup() methods throughout tests with the new trait.
  • Adds a Role interface to define and document ARIA roles and use the provided constants instead of hard-coded strings in existing sanitizers/transformers that define ARIA roles.

Fixes #4528

Checklist

  • My pull request is addressing an open issue (please create one otherwise).
  • My code is tested and passes existing tests.
  • My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

@googlebot googlebot added the cla: yes Signed the Google CLA label Apr 6, 2020
@schlessera schlessera added this to the v1.5.3 milestone Apr 6, 2020
@schlessera schlessera added Accessibility Changes that impact accessibility and need corresponding review (e.g. markup changes). Sanitizers labels Apr 6, 2020
Copy link
Copy Markdown
Contributor

@pierlon pierlon left a comment

Choose a reason for hiding this comment

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

You forgot the most important part, adding it to the list of sanitizers to be run:

--- includes/amp-helper-functions.php	(revision f0c97bbfaddbc59f44e0c9508aa63d1be367a912)
+++ includes/amp-helper-functions.php	(date 1586320714141)
@@ -1220,6 +1220,7 @@
 		'AMP_Style_Sanitizer'             => [],
 		'AMP_Meta_Sanitizer'              => [],
 		'AMP_Layout_Sanitizer'            => [],
+		'AMP_Accessibility_Sanitizer'     => [],
 		'AMP_Tag_And_Attribute_Sanitizer' => [], // Note: This whitelist sanitizer must come at the end to clean up any remaining issues the other sanitizers didn't catch.
 	];

@schlessera schlessera requested a review from pierlon April 9, 2020 07:10
@westonruter westonruter merged commit cfd87a2 into develop Apr 10, 2020
@westonruter westonruter deleted the add/4528-add-accessibility-sanitizer branch April 10, 2020 16:57
westonruter added a commit that referenced this pull request Apr 10, 2020
* Add interfaces for ARIA roles

* Use Role interface in existing transformers

* Add new a11y sanitizer

* Port MarkupComparison trait over to AmpProject\AmpWP

* Use MarkupComparison trait instead of copy-pasted methods

* Add tests for new a11y sanitizer

* Fix tab/space code style issue

* Actually include the new sanitizer in sanitization

* Add test for missing both attrs, and preserving tabindex

Co-authored-by: Weston Ruter <westonruter@google.com>
public function get_sanitize_test_data() {
return [
'valid markup remains unchanged' => [
'<div href="#" on="tap:some_id.toggleClass(some_class)" role="button" tabindex="0"></div>',
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@schlessera The validator complains against href="#"; it is not valid markup.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Does the test catch that?

@amedina
Copy link
Copy Markdown
Member

amedina commented Apr 14, 2020

Would like to validate the acceptance criteria here. These HTML blocks:

Screen Shot 2020-04-14 at 10 55 05 AM

Should yield the corresponding role and/or tabindex attributes

Screen Shot 2020-04-14 at 10 57 47 AM

@kienstra
Copy link
Copy Markdown
Contributor

This looks good in my local.

On copying the Custom HTML markup above verbatim into Custom HTML blocks:

<div on="tap:myfunction()">
None in
</div>

<div on="tap:myfunction()" tabindex="1">
Tabindex in
</div>

<div on="tap:myfunction()" role="button">
Role in
</div>

...the tabindex and role appear as expected:

tabindex

@amedina
Copy link
Copy Markdown
Member

amedina commented Apr 14, 2020

Thanks @kienstra ; reason was missing composer install run

westonruter added a commit that referenced this pull request Apr 15, 2020
* tag '1.5.3':
  Bump 1.5.3
  Bump version to 1.5.3-RC1
  Fix handling of Mustache templates (#4583)
  Stub request based on test scenario (#4588)
  Update tests after block-library/style.css changes in Gutenberg 7.9 (#4579)
  Restrict doing plugin upgrade routine when not in admin (#4538)
  Add new accessibility sanitizer (#4535)
  Fix unit tests (#4564)
  Add button into Site Health to reenable CSS transient caching (#4522)
  Restore unification of multi-page post content in Reader mode (#4547)
  Prevent styles from being removed when in Customizer preview with Standard mode (#4553)
  Omit Jetpack from being activated during PHPUnit test runs (#4474)
  Mock Facebook embed tests (#4474)
  Mock Imgur embed tests (#4474)
  Use title case for Paired Browsing link in edit post screen (#4540)
  Ensure that validation query vars persist through redirects (#4544)
  Add requirements to plugin file header (#4543)
  Force status code of validation responses to be 200 (#4533)
  Update optimizer test specs (#4527)
  Bump 1.5.3-alpha
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility Changes that impact accessibility and need corresponding review (e.g. markup changes). cla: yes Signed the Google CLA Sanitizers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

6 participants