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.


git-svn-id: https://develop.svn.wordpress.org/trunk@48234 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2020-06-30 13:54:40 +00:00
parent 2df56667b3
commit 0445f4b95c
4 changed files with 42 additions and 31 deletions
+12 -4
View File
@@ -717,6 +717,8 @@ form#tags-filter {
}
.privacy-text-actions {
display: inline-block;
width: 100%;
height: 32px;
line-height: 2.46153846;
padding-bottom: 6px;
@@ -743,12 +745,19 @@ form#tags-filter {
font-style: italic;
}
.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;
}
.hide-privacy-policy-tutorial {
background-color: #fff;
}
@@ -1758,8 +1767,7 @@ table.links-table {
flex-direction: column;
}
.privacy-text-section a.return-to-top {
float: none;
margin: 0;
.privacy-text-section .return-to-top {
margin: 2em 0 0;
}
}
@@ -412,21 +412,18 @@ final class WP_Privacy_Policy_Content {
$content .= $removed;
$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'] ) ) {
$content .= '<div class="privacy-text-actions">';
$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.
}
+3 -3
View File
@@ -278,8 +278,8 @@ function wp_privacy_generate_personal_data_export_group_html( $group_data, $grou
}
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>';
}
@@ -423,7 +423,7 @@ function wp_privacy_generate_personal_data_export_file( $request_id ) {
fwrite( $file, 'th { padding: 5px; text-align: left; width: 20%; }' );
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>' );
fwrite( $file, esc_html( $title ) );