sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Improve the Site Health accordions.

Browse Source 
- removes the definition list and uses the markup from the ARIA Authoring Practices example
- removes incorrect ARIA roles
- avoids ARIA landmark regions proliferation

Props mukesh27 for the initial patch.
Fixes #46714.


git-svn-id: https://develop.svn.wordpress.org/trunk@45087 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-04-01 15:07:30 +00:00
parent fe0db882c5
commit 01bc0b9772
3 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/wp-admin/css/site-health.css
View File

@ -271,12 +271,16 @@
border: 1px solid #e2e4e7; border: 1px solid #e2e4e7;
} }
.health-check-accordion dt { .health-check-accordion-heading {
font-weight: 600; margin: 0;
border-top: 1px solid #e2e4e7; border-top: 1px solid #e2e4e7;
font-size: inherit;
line-height: inherit;
font-weight: 600;
color: inherit;
} }
.health-check-accordion dt:first-child { .health-check-accordion-heading:first-child {
border-top: none; border-top: none;
} }

26
src/wp-admin/site-health-info.php
View File

@ -95,7 +95,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<?php endif; ?> <?php endif; ?>
</div> </div>
<dl id="health-check-debug" role="presentation" class="health-check-accordion"> <div id="health-check-debug" class="health-check-accordion">
<?php <?php
foreach ( $info as $section => $details ) { foreach ( $info as $section => $details ) {
@ -103,20 +103,20 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
continue; continue;
} }
?> ?>
<dt role="heading" aria-level="3"> <h3 class="health-check-accordion-heading">
<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" id="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" type="button"> <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" type="button">
<span class="title"> <span class="title">
<?php echo esc_html( $details['label'] ); ?> <?php echo esc_html( $details['label'] ); ?>
<?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?> <?php if ( isset( $details['show_count'] ) && $details['show_count'] ) : ?>
<?php printf( '(%d)', count( $details['fields'] ) ); ?> <?php printf( '(%d)', count( $details['fields'] ) ); ?>
<?php endif; ?> <?php endif; ?>
</span> </span>
<span class="icon"></span> <span class="icon"></span>
</button> </button>
</dt> </h3>
<dd id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" role="region" aria-labelledby="health-check-accordion-heading-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden"> <div id="health-check-accordion-block-<?php echo esc_attr( $section ); ?>" class="health-check-accordion-panel" hidden="hidden">
<?php <?php
if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) { if ( isset( $details['description'] ) && ! empty( $details['description'] ) ) {
printf( printf(
@ -161,9 +161,9 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
?> ?>
</tbody> </tbody>
</table> </table>
</dd> </div>
<?php } ?> <?php } ?>
</dl> </div>
</div> </div>
<?php <?php

16
src/wp-admin/site-health.php
View File

@ -92,7 +92,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<span class="issue-count">0</span> <?php _e( 'Critical issues' ); ?> <span class="issue-count">0</span> <?php _e( 'Critical issues' ); ?>
</h3> </h3>
<dl id="health-check-site-status-critical" role="presentation" class="health-check-accordion issues"></dl> <div id="health-check-site-status-critical" class="health-check-accordion issues"></div>
</div> </div>
<div class="site-health-issues-wrapper" id="health-check-issues-recommended"> <div class="site-health-issues-wrapper" id="health-check-issues-recommended">
@ -100,7 +100,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<span class="issue-count">0</span> <?php _e( 'Recommended improvements' ); ?> <span class="issue-count">0</span> <?php _e( 'Recommended improvements' ); ?>
</h3> </h3>
<dl id="health-check-site-status-recommended" role="presentation" class="health-check-accordion issues"></dl> <div id="health-check-site-status-recommended" class="health-check-accordion issues"></div>
</div> </div>
</div> </div>
@ -115,24 +115,24 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
<span class="issue-count">0</span> <?php _e( 'Items with no issues detected' ); ?> <span class="issue-count">0</span> <?php _e( 'Items with no issues detected' ); ?>
</h3> </h3>
<dl id="health-check-site-status-good" role="presentation" class="health-check-accordion issues"></dl> <div id="health-check-site-status-good" class="health-check-accordion issues"></div>
</div> </div>
</div> </div>
<script id="tmpl-health-check-issue" type="text/template"> <script id="tmpl-health-check-issue" type="text/template">
<dt role="heading" aria-level="4"> <h4 class="health-check-accordion-heading">
<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-{{ data.test }}" id="health-check-accordion-heading-{{ data.test }}" type="button"> <button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-{{ data.test }}" type="button">
<span class="title">{{ data.label }}</span> <span class="title">{{ data.label }}</span>
<span class="badge {{ data.badge.color }}">{{ data.badge.label }}</span> <span class="badge {{ data.badge.color }}">{{ data.badge.label }}</span>
<span class="icon"></span> <span class="icon"></span>
</button> </button>
</dt> </h4>
<dd id="health-check-accordion-block-{{ data.test }}" aria-labelledby="health-check-accordion-heading-{{ data.test }}" role="region" class="health-check-accordion-panel" hidden="hidden"> <div id="health-check-accordion-block-{{ data.test }}" class="health-check-accordion-panel" hidden="hidden">
{{{ data.description }}} {{{ data.description }}}
<div class="actions"> <div class="actions">
<p class="button-container">{{{ data.actions }}}</p> <p class="button-container">{{{ data.actions }}}</p>
</div> </div>
</dd> </div>
</script> </script>
<?php <?php