WordPress.org

Make WordPress Core

Changeset 48234


Ignore:
Timestamp:
06/30/2020 01:54:40 PM (15 months ago)
Author:
afercia
Message:

Accessibility: Privacy: Accessibility improvements for the Privacy Policy Guide page.

Improves accessibility of the "Copy this section" button and "Return to Top" link:

  • uses setTimeout() and clearTimeout() to properly handle the "Copied!" text
  • simplifies the button text by removing the redundant visually hidden text
  • fixes the mismatching visual and DOM order of the Copy button and the "Return to Top" link
  • improves the "Return to Top" links by providing real page fragment identifiers, when possible
  • hides the "Return to Top" up arrow from assistive technologies
  • minor coding standards

Props afercia, garrett-eclipse.
See #48463, #50322.
Fixes #50335.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/privacy-tools.js

    r47572 r48234  
    77// Privacy request action handling.
    88jQuery( document ).ready( function( $ ) {
    9     var strings = window.privacyToolsL10n || {};
     9    var strings = window.privacyToolsL10n || {},
     10        copiedNoticeTimeout;
    1011
    1112    function setActionState( $action, state ) {
     
    8990            }
    9091
    91             setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
     92            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
    9293        }
    9394
     
    9899            }
    99100
    100             setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
     101            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
    101102        }
    102103
    103104        function setExportProgress( exporterIndex ) {
    104             var progress       = ( exportersCount > 0 ? exporterIndex / exportersCount : 0 );
    105             var progressString = Math.round( progress * 100 ).toString() + '%';
     105            var progress       = ( exportersCount > 0 ? exporterIndex / exportersCount : 0 ),
     106                progressString = Math.round( progress * 100 ).toString() + '%';
     107
    106108            $progress.html( progressString );
    107109        }
     
    126128                if ( ! response.success ) {
    127129                    // e.g. invalid request ID.
    128                     setTimeout( function(){ onExportFailure( response.data ); }, 500 );
     130                    setTimeout( function() { onExportFailure( response.data ); }, 500 );
    129131                    return;
    130132                }
     
    137139                        setTimeout( doNextExport( exporterIndex + 1, 1 ) );
    138140                    } else {
    139                         setTimeout( function(){ onExportDoneSuccess( responseData.url ); }, 500 );
     141                        setTimeout( function() { onExportDoneSuccess( responseData.url ); }, 500 );
    140142                    }
    141143                }
    142144            }).fail( function( jqxhr, textStatus, error ) {
    143145                // e.g. Nonce failure.
    144                 setTimeout( function(){ onExportFailure( error ); }, 500 );
     146                setTimeout( function() { onExportFailure( error ); }, 500 );
    145147            });
    146148        }
     
    174176
    175177        function onErasureDoneSuccess() {
    176             var summaryMessage = strings.noDataFound;
    177             var classes = 'notice-success';
     178            var summaryMessage = strings.noDataFound,
     179                classes = 'notice-success';
    178180
    179181            setActionState( $action, 'remove-personal-data-success' );
     
    196198            appendResultsAfterRow( $requestRow, classes, summaryMessage, messages );
    197199
    198             setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
     200            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
    199201        }
    200202
     
    203205            appendResultsAfterRow( $requestRow, 'notice-error', strings.removalError, [] );
    204206
    205             setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
     207            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
    206208        }
    207209
    208210        function setErasureProgress( eraserIndex ) {
    209             var progress       = ( erasersCount > 0 ? eraserIndex / erasersCount : 0 );
    210             var progressString = Math.round( progress * 100 ).toString() + '%';
     211            var progress       = ( erasersCount > 0 ? eraserIndex / erasersCount : 0 ),
     212                progressString = Math.round( progress * 100 ).toString() + '%';
     213
    211214            $progress.html( progressString );
    212215        }
     
    227230
    228231                if ( ! response.success ) {
    229                     setTimeout( function(){ onErasureFailure(); }, 500 );
     232                    setTimeout( function() { onErasureFailure(); }, 500 );
    230233                    return;
    231234                }
     
    246249                        setTimeout( doNextErasure( eraserIndex + 1, 1 ) );
    247250                    } else {
    248                         setTimeout( function(){ onErasureDoneSuccess(); }, 500 );
     251                        setTimeout( function() { onErasureDoneSuccess(); }, 500 );
    249252                    }
    250253                }
    251254            }).fail( function() {
    252                 setTimeout( function(){ onErasureFailure(); }, 500 );
     255                setTimeout( function() { onErasureFailure(); }, 500 );
    253256            });
    254257        }
     
    269272            copiedNotice = $target.siblings( '.success' );
    270273
     274        clearTimeout( copiedNoticeTimeout );
     275
    271276        if ( $target.is( 'button.privacy-text-copy' ) ) {
    272277            $parent = $target.parent().parent();
     
    310315
    311316                    // Delay notice dismissal.
    312                     setTimeout( function(){ copiedNotice.removeClass( 'visible' ); }, 3000 );
     317                    copiedNoticeTimeout = setTimeout( function() {
     318                        copiedNotice.removeClass( 'visible' );
     319                    }, 3000 );
    313320                } catch ( er ) {}
    314321            }
     
    316323    });
    317324});
    318 
  • trunk/src/wp-admin/css/edit.css

    r48145 r48234  
    718718
    719719.privacy-text-actions {
     720    display: inline-block;
     721    width: 100%;
    720722    height: 32px;
    721723    line-height: 2.46153846;
     
    744746}
    745747
    746 .privacy-text-section a.return-to-top {
     748.privacy-text-section .return-to-top {
    747749    float: right;
    748750    margin-right: -250px;
    749751    margin-top: 6px;
     752}
     753
     754#wpbody:target:before {
     755    content: "";
     756    display: block;
     757    padding-top: 50px;
     758    margin-top: -50px;
    750759}
    751760
     
    17591768    }
    17601769
    1761     .privacy-text-section a.return-to-top {
    1762         float: none;
    1763         margin: 0;
    1764     }
    1765 }
     1770    .privacy-text-section .return-to-top {
     1771        margin: 2em 0 0;
     1772    }
     1773}
  • trunk/src/wp-admin/includes/class-wp-privacy-policy-content.php

    r48145 r48234  
    413413
    414414            $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
    415             $content .= '<a href="#" class="return-to-top">' . __( '&uarr; Return to Top' ) . '</a>';
    416415
    417416            if ( empty( $section['removed'] ) ) {
     
    419418                $content .= '<button type="button" class="privacy-text-copy button">';
    420419                $content .= __( 'Copy this section to clipboard' );
    421                 $content .= '<span class="screen-reader-text">';
    422                 /* translators: %s: Plugin name. */
    423                 $content .= sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name );
    424                 $content .= '</span>';
    425420                $content .= '</button>';
    426421                $content .= '<span class="success" aria-hidden="true">' . __( 'Copied!' ) . '</span>';
    427422                $content .= '</div>';
    428423            }
     424
     425            $content .= '<a href="#wpbody" class="return-to-top"><span aria-hidden="true">&uarr; </span> ' . __( 'Return to Top' ) . '</a>';
    429426
    430427            $content .= '</div>'; // End of .privacy-text-section.
  • trunk/src/wp-admin/includes/privacy-tools.php

    r48127 r48234  
    279279
    280280    if ( 1 < $groups_count ) {
    281         $group_html .= '<div class="return_to_top">';
    282         $group_html .= '<a href="#top">' . esc_html__( '&uarr; Return to top' ) . '</a>';
     281        $group_html .= '<div class="return-to-top">';
     282        $group_html .= '<a href="#top"><span aria-hidden="true">&uarr; </span> ' . esc_html__( 'Return to top' ) . '</a>';
    283283        $group_html .= '</div>';
    284284    }
     
    424424    fwrite( $file, 'td { padding: 5px; }' );
    425425    fwrite( $file, 'tr:nth-child(odd) { background-color: #fafafa; }' );
    426     fwrite( $file, '.return_to_top { text-align:right; }' );
     426    fwrite( $file, '.return-to-top { text-align: right; }' );
    427427    fwrite( $file, '</style>' );
    428428    fwrite( $file, '<title>' );
Note: See TracChangeset for help on using the changeset viewer.