Skip to content

Commit

Permalink
Ensure that parent elements that are NOT buttons or links don't have …
Browse files Browse the repository at this point in the history 
…further aria-hidden pass conditions checked
  • Loading branch information
@pattonwebz
pattonwebz committed Mar 15, 2024
1 parent 5b8b577 commit 3089283
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 16 deletions.
15 changes: 9 additions & 6 deletions includes/rules/aria_hidden.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,18 @@ function edac_rule_aria_hidden( $content, $post ) { // phpcs:ignore -- $post is
}

$parent_node = $element->parent();
if ( $parent_node && edac_rule_aria_hidden_valid_parentnode_condition_check( $parent_node, $element ) ) {
continue;
}
if ( $parent_node && ( strtolower( $parent_node->tag ) === 'button' || strtolower( $parent_node->tag ) === 'a' ) ) {
if ( edac_rule_aria_hidden_valid_parentnode_condition_check( $parent_node, $element ) ) {
continue;
}

$siblings = $parent_node->children();
if ( $siblings && edac_rule_aria_hidden_siblings_are_screen_reader_text_elements( $siblings ) ) {
continue;
$siblings = $parent_node->children();
if ( $siblings && edac_rule_aria_hidden_siblings_are_screen_reader_text_elements( $siblings ) ) {
continue;
}
}


$errors[] = $element;
}
}
Expand Down
38 changes: 28 additions & 10 deletions tests/phpunit/includes/rules/AriaHiddenTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,19 @@ public function test_screen_reader_text_classes( string $sibling_class, bool $pa
$this->assertEquals( $pass, edac_rule_aria_hidden_siblings_are_screen_reader_text_elements( $siblings ) );
}

/**
* Test elements with aria-label that are not links or buttons still error.
*/
public function test_parent_with_lable_that_is_not_link_or_button_errors() {

$test_elements = array( 'div', 'span', 'section' );
foreach ( $test_elements as $element ) {
$markup = "<$element aria-label='label'><div aria-hidden='true'></div></$element>";
$errors = $this->get_errors_from_rule_check( $markup );
$this->assertNotEmpty( $errors );
}
}

/**
* Collection of different markup to use for test cases.
*
Expand All @@ -156,43 +169,48 @@ public function test_screen_reader_text_classes( string $sibling_class, bool $pa
*/
private function get_test_markup( string $type = '' ): string {
$markup_fragments = array(
'element_with_aria-hidden' => '<div aria-hidden="true"></div>',
'element_with_aria-hidden_false' => '<div aria-hidden="false"></div>',
'element_that_is_wp-block-spacer' => '<div aria-hidden="true" class="wp-block-spacer"></div>',
'button_with_aria-label' => <<<EOT
'element_with_aria-hidden' => '<div aria-hidden="true"></div>',
'element_with_aria-hidden_false' => '<div aria-hidden="false"></div>',
'element_that_is_wp-block-spacer' => '<div aria-hidden="true" class="wp-block-spacer"></div>',
'button_with_aria-label' => <<<EOT
<button type="button" aria-haspopup="true" aria-label="Open menu" class="components-button wp-block-navigation__responsive-container-open" inert="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
</button>
EOT,
'link_with_aria-label' => <<<EOT
'link_with_aria-label' => <<<EOT
<a href="http://example.com" aria-label="label">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
</a>
EOT,
'link_with_screen_reader_text' => <<<EOT
'link_with_screen_reader_text' => <<<EOT
<a href="/about" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
<span class="sr-only">About Us</span>
EOT,
'button_with_screen_reader_text' => <<<EOT
'button_with_screen_reader_text' => <<<EOT
<button type="button" aria-haspopup="true" class="components-button wp-block-navigation__responsive-container-open" inert="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
<span class="sr-only">Open menu</span>
</button>
EOT,
'link_with_visible_text' => <<<EOT
'link_with_visible_text' => <<<EOT
<a href="/about" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
About Us
</a>
EOT,
'button_with_visible_text' => <<<EOT
'button_with_visible_text' => <<<EOT
<button type="button" aria-haspopup="true" class="components-button wp-block-navigation__responsive-container-open" inert="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
Menu
</button>
EOT,
'image_that_is_presentational' => '<img src="http://example.com/image.jpg" aria-hidden="true" role="presentation" />',
'element_with_aria_label_on_parent' => <<<EOT
<div aria-label="label">
<div aria-hidden="true"></div>
</div>
EOT,
'image_that_is_presentational' => '<img src="http://example.com/image.jpg" aria-hidden="true" role="presentation" />',
);
return $markup_fragments[ $type ] ?? '';
}
Expand Down

0 comments on commit 3089283

Please sign in to comment.