Changeset 48234

Timestamp:

06/30/2020 01:54:40 PM (4 years 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:

• js/_enqueues/admin/privacy-tools.js (modified) (13 diffs)
• wp-admin/css/edit.css (modified) (3 diffs)
• wp-admin/includes/class-wp-privacy-policy-content.php (modified) (2 diffs)
• wp-admin/includes/privacy-tools.php (modified) (2 diffs)

trunk/src/js/_enqueues/admin/privacy-tools.js

@@ -7 +7 @@
 // Privacy request action handling.
 jQuery( document ).ready( function( $ ) {
-    var strings = window.privacyToolsL10n || {};
+    var strings = window.privacyToolsL10n || {},
+        copiedNoticeTimeout;
 
     function setActionState( $action, state ) {
@@ -89 +90 @@
             }
 
-            setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
+            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
         }
 
@@ -98 +99 @@
             }
 
-            setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
+            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
         }
 
         function setExportProgress( exporterIndex ) {
-            var progress       = ( exportersCount > 0 ? exporterIndex / exportersCount : 0 );
-            var progressString = Math.round( progress * 100 ).toString() + '%';
+            var progress       = ( exportersCount > 0 ? exporterIndex / exportersCount : 0 ),
+                progressString = Math.round( progress * 100 ).toString() + '%';
+
             $progress.html( progressString );
         }
@@ -126 +128 @@
                 if ( ! response.success ) {
                     // e.g. invalid request ID.
-                    setTimeout( function(){ onExportFailure( response.data ); }, 500 );
+                    setTimeout( function() { onExportFailure( response.data ); }, 500 );
                     return;
                 }
@@ -137 +139 @@
                         setTimeout( doNextExport( exporterIndex + 1, 1 ) );
                     } else {
-                        setTimeout( function(){ onExportDoneSuccess( responseData.url ); }, 500 );
+                        setTimeout( function() { onExportDoneSuccess( responseData.url ); }, 500 );
                     }
                 }
             }).fail( function( jqxhr, textStatus, error ) {
                 // e.g. Nonce failure.
-                setTimeout( function(){ onExportFailure( error ); }, 500 );
+                setTimeout( function() { onExportFailure( error ); }, 500 );
             });
         }
@@ -174 +176 @@
 
         function onErasureDoneSuccess() {
-            var summaryMessage = strings.noDataFound;
-            var classes = 'notice-success';
+            var summaryMessage = strings.noDataFound,
+                classes = 'notice-success';
 
             setActionState( $action, 'remove-personal-data-success' );
@@ -196 +198 @@
             appendResultsAfterRow( $requestRow, classes, summaryMessage, messages );
 
-            setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
+            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
         }
 
@@ -203 +205 @@
             appendResultsAfterRow( $requestRow, 'notice-error', strings.removalError, [] );
 
-            setTimeout( function(){ $rowActions.removeClass( 'processing' ); }, 500 );
+            setTimeout( function() { $rowActions.removeClass( 'processing' ); }, 500 );
         }
 
         function setErasureProgress( eraserIndex ) {
-            var progress       = ( erasersCount > 0 ? eraserIndex / erasersCount : 0 );
-            var progressString = Math.round( progress * 100 ).toString() + '%';
+            var progress       = ( erasersCount > 0 ? eraserIndex / erasersCount : 0 ),
+                progressString = Math.round( progress * 100 ).toString() + '%';
+
             $progress.html( progressString );
         }
@@ -227 +230 @@
 
                 if ( ! response.success ) {
-                    setTimeout( function(){ onErasureFailure(); }, 500 );
+                    setTimeout( function() { onErasureFailure(); }, 500 );
                     return;
                 }
@@ -246 +249 @@
                         setTimeout( doNextErasure( eraserIndex + 1, 1 ) );
                     } else {
-                        setTimeout( function(){ onErasureDoneSuccess(); }, 500 );
+                        setTimeout( function() { onErasureDoneSuccess(); }, 500 );
                     }
                 }
             }).fail( function() {
-                setTimeout( function(){ onErasureFailure(); }, 500 );
+                setTimeout( function() { onErasureFailure(); }, 500 );
             });
         }
@@ -269 +272 @@
             copiedNotice = $target.siblings( '.success' );
 
+        clearTimeout( copiedNoticeTimeout );
+
         if ( $target.is( 'button.privacy-text-copy' ) ) {
             $parent = $target.parent().parent();
@@ -310 +315 @@
 
                     // Delay notice dismissal.
-                    setTimeout( function(){ copiedNotice.removeClass( 'visible' ); }, 3000 );
+                    copiedNoticeTimeout = setTimeout( function() {
+                        copiedNotice.removeClass( 'visible' );
+                    }, 3000 );
                 } catch ( er ) {}
             }
@@ -316 +323 @@
     });
 });
-

trunk/src/wp-admin/css/edit.css

@@ -718 +718 @@
 
 .privacy-text-actions {
+    display: inline-block;
+    width: 100%;
     height: 32px;
     line-height: 2.46153846;
@@ -744 +746 @@
 }
 
-.privacy-text-section a.return-to-top {
+.privacy-text-section .return-to-top {
     float: right;
     margin-right: -250px;
     margin-top: 6px;
+}
+
+#wpbody:target:before {
+    content: "";
+    display: block;
+    padding-top: 50px;
+    margin-top: -50px;
 }
 
@@ -1759 +1768 @@
     }
 
-    .privacy-text-section a.return-to-top {
-        float: none;
-        margin: 0;
-    }
-}
+    .privacy-text-section .return-to-top {
+        margin: 2em 0 0;
+    }
+}

trunk/src/wp-admin/includes/class-wp-privacy-policy-content.php

@@ -413 +413 @@
 
             $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
-            $content .= '<a href="#" class="return-to-top">' . __( '&uarr; Return to Top' ) . '</a>';
 
             if ( empty( $section['removed'] ) ) {
@@ -419 +418 @@
                 $content .= '<button type="button" class="privacy-text-copy button">';
                 $content .= __( 'Copy this section to clipboard' );
-                $content .= '<span class="screen-reader-text">';
-                /* translators: %s: Plugin name. */
-                $content .= sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name );
-                $content .= '</span>';
                 $content .= '</button>';
                 $content .= '<span class="success" aria-hidden="true">' . __( 'Copied!' ) . '</span>';
                 $content .= '</div>';
             }
+
+            $content .= '<a href="#wpbody" class="return-to-top"><span aria-hidden="true">&uarr; </span> ' . __( 'Return to Top' ) . '</a>';
 
             $content .= '</div>'; // End of .privacy-text-section.

trunk/src/wp-admin/includes/privacy-tools.php

@@ -279 +279 @@
 
     if ( 1 < $groups_count ) {
-        $group_html .= '<div class="return_to_top">';
-        $group_html .= '<a href="#top">' . esc_html__( '&uarr; Return to top' ) . '</a>';
+        $group_html .= '<div class="return-to-top">';
+        $group_html .= '<a href="#top"><span aria-hidden="true">&uarr; </span> ' . esc_html__( 'Return to top' ) . '</a>';
         $group_html .= '</div>';
     }
@@ -424 +424 @@
     fwrite( $file, 'td { padding: 5px; }' );
     fwrite( $file, 'tr:nth-child(odd) { background-color: #fafafa; }' );
-    fwrite( $file, '.return_to_top { text-align:right; }' );
+    fwrite( $file, '.return-to-top { text-align: right; }' );
     fwrite( $file, '</style>' );
     fwrite( $file, '<title>' );