WordPress.org
Get WordPress

Make WordPress Core

Changeset 59224


Ignore:
Timestamp:
10/13/2024 07:07:06 PM (8 weeks ago)
Author:
joedolson
Message:

Administration: A11y: Fix accordion accessibility.

Change accordions in the customizer and the navigation menus to make proper usage of accordion markup patterns. This includes adding missing :focus states, using a button element to control tabbing and interaction, instead of the heading elements, and removing instructional text for screen reader users that was used to compensate for the incorrect markup pattern.

Props afercia, rishishah, kushang78, rcreators, krupajnanda, hmbashar, joedolson.
Fixes #42002.

Location:
trunk
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/lib/accordion.js

    r50547 r59224  
    88 * <div class="accordion-container">
    99 *  <div class="accordion-section open">
    10  *      <h3 class="accordion-section-title"></h3>
    11  *      <div class="accordion-section-content">
     10 *      <h3 class="accordion-section-title"><button type="button" aria-expanded="true" aria-controls="target-1"></button></h3>
     11 *      <div class="accordion-section-content" id="target">
    1212 *      </div>
    1313 *  </div>
    1414 *  <div class="accordion-section">
    15  *      <h3 class="accordion-section-title"></h3>
    16  *      <div class="accordion-section-content">
     15 *      <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-2"></button></h3>
     16 *      <div class="accordion-section-content" id="target-2">
    1717 *      </div>
    1818 *  </div>
    1919 *  <div class="accordion-section">
    20  *      <h3 class="accordion-section-title"></h3>
    21  *      <div class="accordion-section-content">
     20 *      <h3 class="accordion-section-title"><button type="button" aria-expanded="false" aria-controls="target-3"></button></h3>
     21 *      <div class="accordion-section-content" id="target-3">
    2222 *      </div>
    2323 *  </div>
    … …  
    3535
    3636        // Expand/Collapse accordion sections on click.
    37         $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
    38             if ( e.type === 'keydown' && 13 !== e.which ) { // "Return" key.
    39                 return;
    40             }
    41 
    42             e.preventDefault(); // Keep this AFTER the key filter above.
    43 
     37        $( '.accordion-container' ).on( 'click', '.accordion-section-title button', function() {
    4438            accordionSwitch( $( this ) );
    4539        });
    … …  
    5549    function accordionSwitch ( el ) {
    5650        var section = el.closest( '.accordion-section' ),
    57             sectionToggleControl = section.find( '[aria-expanded]' ).first(),
    5851            container = section.closest( '.accordion-container' ),
    5952            siblings = container.find( '.open' ),
    … …  
    8780
    8881        // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value.
    89         if ( sectionToggleControl ) {
    90             sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) );
     82        if ( el ) {
     83            el.attr( 'aria-expanded', String( el.attr( 'aria-expanded' ) === 'false' ) );
    9184        }
    9285    }

  • trunk/src/js/_enqueues/wp/customize/controls.js

    r59197 r59224  
    15311531
    15321532            // Expand/Collapse accordion sections on click.
    1533             section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) {
     1533            section.container.find( '.accordion-section-title button, .customize-section-back' ).on( 'click keydown', function( event ) {
    15341534                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    15351535                    return;
    … …  
    16061606                overlay = section.headContainer.closest( '.wp-full-overlay' ),
    16071607                backBtn = content.find( '.customize-section-back' ),
    1608                 sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
     1608                sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
    16091609                expand, panel;
    16101610
    … …  
    16161616                    expand = function() {
    16171617                        section._animateChangeExpanded( function() {
    1618                             sectionTitle.attr( 'tabindex', '-1' );
    1619                             backBtn.attr( 'tabindex', '0' );
    1620 
    16211618                            backBtn.trigger( 'focus' );
    16221619                            content.css( 'top', '' );
    … …  
    16641661                }
    16651662                section._animateChangeExpanded( function() {
    1666                     backBtn.attr( 'tabindex', '-1' );
    1667                     sectionTitle.attr( 'tabindex', '0' );
    16681663
    16691664                    sectionTitle.trigger( 'focus' );
    … …  
    27002695                content = section.contentContainer,
    27012696                backBtn = content.find( '.customize-section-back' ),
    2702                 sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
     2697                sectionTitle = section.headContainer.find( '.accordion-section-title button' ).first(),
    27032698                body = $( document.body ),
    27042699                expand, panel;
    … …  
    27202715                    expand = function() {
    27212716                        section._animateChangeExpanded( function() {
    2722                             sectionTitle.attr( 'tabindex', '-1' );
    2723                             backBtn.attr( 'tabindex', '0' );
    2724 
    27252717                            backBtn.trigger( 'focus' );
    27262718                            content.css( 'top', '' );
    … …  
    27532745                }
    27542746                section._animateChangeExpanded( function() {
    2755                     backBtn.attr( 'tabindex', '-1' );
    2756                     sectionTitle.attr( 'tabindex', '0' );
    27572747
    27582748                    sectionTitle.trigger( 'focus' );
    … …  
    28442834
    28452835            // Expand/Collapse accordion sections on click.
    2846             panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     2836            panel.headContainer.find( '.accordion-section-title button' ).on( 'click keydown', function( event ) {
    28472837                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    28482838                    return;
    … …  
    29482938                overlay = accordionSection.closest( '.wp-full-overlay' ),
    29492939                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    2950                 topPanel = panel.headContainer.find( '.accordion-section-title' ),
     2940                topPanel = panel.headContainer.find( '.accordion-section-title button' ),
    29512941                backBtn = accordionSection.find( '.customize-panel-back' ),
    29522942                childSections = panel.sections(),
    … …  
    29752965                } else {
    29762966                    panel._animateChangeExpanded( function() {
    2977                         topPanel.attr( 'tabindex', '-1' );
    2978                         backBtn.attr( 'tabindex', '0' );
    2979 
    29802967                        backBtn.trigger( 'focus' );
    29812968                        accordionSection.css( 'top', '' );
    … …  
    29972984                if ( ! skipTransition ) {
    29982985                    panel._animateChangeExpanded( function() {
    2999                         topPanel.attr( 'tabindex', '0' );
    3000                         backBtn.attr( 'tabindex', '-1' );
    30012986
    30022987                        topPanel.focus();

  • trunk/src/js/_enqueues/wp/customize/nav-menus.js

    r58306 r59224  
    11081108                $title;
    11091109
    1110             $title = section.container.find( '.accordion-section-title:first' );
     1110            $title = section.container.find( '.accordion-section-title button:first' );
    11111111            $title.find( '.menu-in-location' ).remove();
    11121112            _.each( themeLocationSlugs, function( themeLocationSlug ) {

  • trunk/src/wp-admin/css/common.css

    r59046 r59224  
    24322432/* Back-compat for nav-menus screen */
    24332433.nav-menus-php .metabox-holder h3 {
     2434    padding: 0;
     2435}
     2436.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
     2437    background: inherit;
     2438    color: #1d2327;
     2439    display: block;
     2440    position: relative;
     2441    text-align: left;
     2442    width: 100%;
     2443    outline: none;
     2444    border: 0;
    24342445    padding: 10px 10px 11px 14px;
    24352446    line-height: 1.5;
     2447    cursor: pointer;
     2448}
     2449.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
     2450    box-shadow: 0 0 0 2px #2271b1;
     2451    outline: 2px solid transparent;
     2452}
     2453.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
     2454    position: absolute;
     2455    right: 10px;
     2456    left: auto;
     2457    color: #787c82;
     2458    border-radius: 50px;
     2459}
     2460.nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
     2461    color: #1d2327;
     2462}
     2463.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
     2464    position: relative;
     2465    left: -1px
     2466}
     2467
     2468.nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
     2469    transform: rotate(180deg);
    24362470}
    24372471
    … …  
    35233557/* @todo: can we use a common class for these? */
    35243558.nav-menus-php .item-edit:before,
    3525 .widget-top .widget-action .toggle-indicator:before,
    3526 .control-section .accordion-section-title:after,
    3527 .accordion-section-title:after {
     3559.wp-customizer .control-section .accordion-section-title:after,
     3560.wp-customizer .accordion-section-title:after,
     3561.widget-top .widget-action .toggle-indicator:before {
    35283562    content: "\f140";
    35293563    font: normal 20px/1 dashicons;
    … …  
    35433577.postbox .handlediv.button-link,
    35443578.item-edit,
    3545 .toggle-indicator,
    3546 .accordion-section-title:after {
     3579.toggle-indicator {
    35473580    color: #787c82;
    35483581}
    … …  
    35603593.item-edit:hover,
    35613594.item-edit:focus,
    3562 .sidebar-name:hover .toggle-indicator,
    3563 .accordion-section-title:hover:after {
     3595.sidebar-name:hover .toggle-indicator {
    35643596    color: #1d2327;
    35653597    /* Only visible in Windows High Contrast mode */
    … …  
    35733605}
    35743606
    3575 .control-section .accordion-section-title:after,
    3576 .accordion-section-title:after {
    3577     float: right;
    3578     right: 20px;
    3579     top: -2px;
    3580 }
    3581 
    3582 .control-section.open .accordion-section-title:after,
    35833607#customize-info.open .accordion-section-title:after,
    35843608.nav-menus-php .menu-item-edit-active .item-edit:before,
    … …  
    39703994    }
    39713995
     3996    .nav-menus-php .metabox-holder h3 {
     3997        padding: 0;
     3998    }
     3999
    39724000    .postbox .handlediv {
    39734001        margin-top: 3px;

  • trunk/src/wp-admin/css/customize-controls.css

    r59078 r59224  
    554554}
    555555
     556.accordion-section-title:has(button.accordion-trigger) {
     557    padding: 0;
     558}
     559
     560.accordion-section-title button.accordion-trigger {
     561    all: unset;
     562    width: 100%;
     563    height: 100%;
     564    padding: 10px 10px 11px 14px;
     565    display: flex;
     566    align-items: center;
     567}
     568
     569.accordion-section-title button.accordion-trigger:has(.menu-in-location) {
     570    display: block;
     571}
     572
    556573@media (prefers-reduced-motion: reduce) {
    557574    #customize-theme-controls .accordion-section-title,
    … …  
    580597
    581598#customize-controls .control-section:hover > .accordion-section-title,
    582 #customize-controls .control-section .accordion-section-title:hover,
     599#customize-controls .control-section .accordion-section-title button:hover,
    583600#customize-controls .control-section.open .accordion-section-title,
    584 #customize-controls .control-section .accordion-section-title:focus {
     601#customize-controls .control-section .accordion-section-title button:focus {
    585602    color: #2271b1;
    586603    background: #f6f7f7;

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r58146 r59224  
    543543}
    544544
    545 #available-menu-items .accordion-section-title button {
    546     display: block;
     545#available-menu-items .accordion-section-title button .toggle-indicator {
     546    display: flex;
     547    align-items: center;
    547548    width: 28px;
    548549    height: 35px;

  • trunk/src/wp-admin/includes/template.php

    r59114 r59224  
    15671567                    $hidden_class = in_array( $box['id'], $hidden, true ) ? 'hide-if-js' : '';
    15681568
    1569                     $open_class = '';
     1569                    $open_class    = '';
     1570                    $aria_expanded = 'false';
    15701571                    if ( ! $first_open && empty( $hidden_class ) ) {
    1571                         $first_open = true;
    1572                         $open_class = 'open';
     1572                        $first_open    = true;
     1573                        $open_class    = 'open';
     1574                        $aria_expanded = 'true';
    15731575                    }
    15741576                    ?>
    15751577                    <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
    1576                         <h3 class="accordion-section-title hndle" tabindex="0">
    1577                             <?php echo esc_html( $box['title'] ); ?>
    1578                             <span class="screen-reader-text">
    1579                                 <?php
    1580                                 /* translators: Hidden accessibility text. */
    1581                                 _e( 'Press return or enter to open this section' );
    1582                                 ?>
    1583                             </span>
     1578                        <h3 class="accordion-section-title hndle">
     1579                            <button type="button" class="accordion-trigger" aria-expanded="<?php echo $aria_expanded; ?>" aria-controls="<?php echo esc_attr( $box['id'] ); ?>-content">
     1580                                <span class="accordion-title">
     1581                                    <?php echo esc_html( $box['title'] ); ?>
     1582                                    <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
     1583                                </span>
     1584                            </button>
    15841585                        </h3>
    1585                         <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
     1586                        <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>-content">
    15861587                            <div class="inside">
    15871588                                <?php call_user_func( $box['callback'], $data_object, $box ); ?>

  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r58306 r59224  
    12241224        <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
    12251225            <h4 class="accordion-section-title" role="presentation">
    1226                 <?php echo esc_html( $available_item_type['title'] ); ?>
    1227                 <span class="spinner"></span>
    1228                 <span class="no-items"><?php _e( 'No items' ); ?></span>
    1229                 <button type="button" class="button-link" aria-expanded="false">
    1230                     <span class="screen-reader-text">
    1231                     <?php
    1232                         /* translators: %s: Title of a section with menu items. */
    1233                         printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) );
    1234                     ?>
    1235                         </span>
     1226                <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="<?php echo esc_attr( $id ); ?>-content">
     1227                    <?php echo esc_html( $available_item_type['title'] ); ?>
     1228                    <span class="spinner"></span>
     1229                    <span class="no-items"><?php _e( 'No items' ); ?></span>
    12361230                    <span class="toggle-indicator" aria-hidden="true"></span>
    12371231                </button>
    12381232            </h4>
    1239             <div class="accordion-section-content">
     1233            <div class="accordion-section-content" id="<?php echo esc_attr( $id ); ?>-content">
    12401234                <?php if ( 'post_type' === $available_item_type['type'] ) : ?>
    12411235                    <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
    … …  
    12651259        <div id="new-custom-menu-item" class="accordion-section">
    12661260            <h4 class="accordion-section-title" role="presentation">
    1267                 <?php _e( 'Custom Links' ); ?>
    1268                 <button type="button" class="button-link" aria-expanded="false">
    1269                     <span class="screen-reader-text">
    1270                         <?php
    1271                         /* translators: Hidden accessibility text. */
    1272                         _e( 'Toggle section: Custom Links' );
    1273                         ?>
    1274                     </span>
     1261                <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="new-custom-menu-item-content">
     1262                    <?php _e( 'Custom Links' ); ?>
    12751263                    <span class="toggle-indicator" aria-hidden="true"></span>
    12761264                </button>
    12771265            </h4>
    1278             <div class="accordion-section-content customlinkdiv">
     1266            <div class="accordion-section-content customlinkdiv" id="new-custom-menu-item-content">
    12791267                <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
    12801268                <p id="menu-item-url-wrap" class="wp-clearfix">

  • trunk/src/wp-includes/class-wp-customize-panel.php

    r56551 r59224  
    347347        ?>
    348348        <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
    349             <h3 class="accordion-section-title" tabindex="0">
    350                 {{ data.title }}
    351                 <span class="screen-reader-text">
    352                     <?php
    353                     /* translators: Hidden accessibility text. */
    354                     _e( 'Press return or enter to open this panel' );
    355                     ?>
    356                 </span>
     349            <h3 class="accordion-section-title">
     350                <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
     351                    {{ data.title }}
     352                </button>
    357353            </h3>
    358             <ul class="accordion-sub-container control-panel-content"></ul>
     354            <ul class="accordion-sub-container control-panel-content" id="{{ data.id }}-content"></ul>
    359355        </li>
    360356        <?php

  • trunk/src/wp-includes/class-wp-customize-section.php

    r56551 r59224  
    356356        ?>
    357357        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
    358             <h3 class="accordion-section-title" tabindex="0">
    359                 {{ data.title }}
    360                 <span class="screen-reader-text">
    361                     <?php
    362                     /* translators: Hidden accessibility text. */
    363                     _e( 'Press return or enter to open this section' );
    364                     ?>
    365                 </span>
     358            <h3 class="accordion-section-title">
     359                <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="{{ data.id }}-content">
     360                    {{ data.title }}
     361                </button>
    366362            </h3>
    367             <ul class="accordion-section-content">
     363            <ul class="accordion-section-content" id="{{ data.id }}-content">
    368364                <li class="customize-section-description-container section-meta <# if ( data.description_hidden ) { #>customize-info<# } #>">
    369365                    <div class="customize-section-title">

  • trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php

    r55276 r59224  
    4545                }
    4646                ?>
    47 
    4847                <?php if ( current_user_can( 'switch_themes' ) ) : ?>
    4948                    <button type="button" class="button change-theme" aria-label="<?php esc_attr_e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>

  • trunk/tests/phpunit/tests/customize/nav-menus.php

    r56548 r59224  
    770770            foreach ( $post_types as $type ) {
    771771                $this->assertStringContainsString( 'available-menu-items-post_type-' . esc_attr( $type->name ), $template );
    772                 $this->assertMatchesRegularExpression( '#<h4 class="accordion-section-title".*>\s*' . esc_html( $type->labels->name ) . '#', $template );
     772                $this->assertMatchesRegularExpression( '#<h4 class="accordion-section-title".*>\s*<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls=".*">\s*' . esc_html( $type->labels->name ) . '#', $template );
    773773                $this->assertStringContainsString( 'data-type="post_type"', $template );
    774774                $this->assertStringContainsString( 'data-object="' . esc_attr( $type->name ) . '"', $template );
    … …  
    781781            foreach ( $taxonomies as $tax ) {
    782782                $this->assertStringContainsString( 'available-menu-items-taxonomy-' . esc_attr( $tax->name ), $template );
    783                 $this->assertMatchesRegularExpression( '#<h4 class="accordion-section-title".*>\s*' . esc_html( $tax->labels->name ) . '#', $template );
     783                $this->assertMatchesRegularExpression( '#<h4 class="accordion-section-title".*>\s*<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls=".*">\s*' . esc_html( $tax->labels->name ) . '#', $template );
    784784                $this->assertStringContainsString( 'data-type="taxonomy"', $template );
    785785                $this->assertStringContainsString( 'data-object="' . esc_attr( $tax->name ) . '"', $template );
    … …  
    789789
    790790        $this->assertStringContainsString( 'available-menu-items-custom_type', $template );
    791         $this->assertMatchesRegularExpression( '#<h4 class="accordion-section-title".*>\s*Custom#', $template );
     791        $this->assertMatchesRegularExpression( '#<h4 class="accordion-section-title".*>\s*<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls=".*">\s*Custom#', $template );
    792792        $this->assertStringContainsString( 'data-type="custom_type"', $template );
    793793        $this->assertStringContainsString( 'data-object="custom_object"', $template );
Note: See TracChangeset for help on using the changeset viewer.