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

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;
}
}