WordPress.org

Make WordPress Core

Changeset 42725


Ignore:
Timestamp:
02/21/2018 10:30:34 PM (3 years ago)
Author:
afercia
Message:

Accessibility: Change the posts "Quick Edit" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation. Also,
adds an aria-expanded attribute to the button to communicate to assistive
technologies the expanded / collapsed status of the Quick Edit form.

Props Cheffheid, audrasjb, afercia.
Fixes #38677.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-wp-posts-list-table.php

    r42638 r42725  
    12681268            );
    12691269            $actions['inline hide-if-no-js'] = sprintf(
    1270                 '<a href="#" class="editinline" aria-label="%s">%s</a>',
     1270                '<button type="button" class="button-link editinline" aria-label="%s" aria-expanded="false">%s</button>',
    12711271                /* translators: %s: post title */
    12721272                esc_attr( sprintf( __( 'Quick edit &#8220;%s&#8221; inline' ), $title ) ),
  • trunk/src/wp-admin/js/inline-edit-post.js

    r42411 r42725  
    120120
    121121        /**
    122          * Binds click event to the .editinline link which opens the quick editor.
    123          */
    124         $('#the-list').on( 'click', 'a.editinline', function( e ) {
    125             e.preventDefault();
    126             inlineEditPost.edit(this);
     122         * Binds click event to the .editinline button which opens the quick editor.
     123         */
     124        $( '#the-list' ).on( 'click', '.editinline', function() {
     125            $( this ).attr( 'aria-expanded', 'true' );
     126            inlineEditPost.edit( this );
    127127        });
    128128
     
    423423                        $('#edit-'+id).before(r).remove();
    424424                        $( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
    425                             // Move focus back to the Quick Edit link. $( this ) is the row being animated.
    426                             $( this ).find( '.editinline' ).focus();
     425                            // Move focus back to the Quick Edit button. $( this ) is the row being animated.
     426                            $( this ).find( '.editinline' )
     427                                .attr( 'aria-expanded', 'false' )
     428                                .focus();
    427429                            wp.a11y.speak( inlineEditL10n.saved );
    428430                        });
     
    478480                id = id.substr( id.lastIndexOf('-') + 1 );
    479481
    480                 // Show the post row and move focus back to the Quick Edit link.
    481                 $( this.what + id ).show().find( '.editinline' ).focus();
     482                // Show the post row and move focus back to the Quick Edit button.
     483                $( this.what + id ).show().find( '.editinline' )
     484                    .attr( 'aria-expanded', 'false' )
     485                    .focus();
    482486            }
    483487        }
Note: See TracChangeset for help on using the changeset viewer.