vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-09 15:14:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Administration: Set accessible state for list table headers.

Browse Source 
Implement `aria-sort` and change icon states to indicate current sort for list tables. Allow screen reader users to get context about the current sort and allow sighted users to know how the table is currently sorted.

Props afercia, rianrietveld, joedolson, alexstine, johnjamesjacoby.
Fixes #32170.

git-svn-id: https://develop.svn.wordpress.org/trunk@55971 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2023-06-21 21:45:52 +00:00
parent 5e347c1c52
commit 09fb3ea03e
11 changed files with 234 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/wp-admin/css/list-tables.css
View File

@@ -461,50 +461,64 @@ table.media .column-title .filename {
width: 160px;
}
.sorting-indicators {
display: grid;
}
.sorting-indicator {
display: block;
visibility: hidden;
width: 10px;
height: 4px;
margin-top: 8px;
margin-top: 4px;
margin-left: 7px;
}
.sorting-indicator:before {
content: "\f142";
font: normal 20px/1 dashicons;
speak: never;
display: inline-block;
padding: 0;
top: -4px;
left: -8px;
color: #3c434a;
line-height: 0.5;
position: relative;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
color: #3c434a;
color: #a7aaad;
}
.column-comments .sorting-indicator:before {
top: 0;
left: -10px;
}
th.sorted.asc .sorting-indicator:before,
th.desc:hover span.sorting-indicator:before,
th.desc a:focus span.sorting-indicator:before {
.sorting-indicator.asc:before {
content: "\f142";
}
th.sorted.desc .sorting-indicator:before,
th.asc:hover span.sorting-indicator:before,
th.asc a:focus span.sorting-indicator:before {
.sorting-indicator.desc:before {
content: "\f140";
}
th.sorted.desc .sorting-indicator.desc:before {
color: #1d2327;
}
th.sorted.asc .sorting-indicator.asc:before {
color: #1d2327;
}
th.sorted.asc a:focus .sorting-indicator.asc:before,
th.sorted.asc:hover .sorting-indicator.asc:before,
th.sorted.desc a:focus .sorting-indicator.desc:before,
th.sorted.desc:hover .sorting-indicator.desc:before {
color: #a7aaad;
}
th.sorted.asc a:focus .sorting-indicator.desc:before,
th.sorted.asc:hover .sorting-indicator.desc:before,
th.sorted.desc a:focus .sorting-indicator.asc:before,
th.sorted.desc:hover .sorting-indicator.asc:before {
color: #1d2327;
}
.wp-list-table .toggle-row {
position: absolute;
right: 8px;
@@ -613,10 +627,6 @@ tr.wp-locked .row-actions .trash {
display: none;
}
.fixed .column-comments .sorting-indicator {
margin-top: 3px;
}
#menu-locations-wrap .widefat {
width: 60%;
}
@@ -644,14 +654,6 @@ th.sorted a span {
cursor: pointer;
}
th.sorted .sorting-indicator,
th.desc:hover span.sorting-indicator,
th.desc a:focus span.sorting-indicator,
th.asc:hover span.sorting-indicator,
th.asc a:focus span.sorting-indicator {
visibility: visible;
}
.tablenav-pages .current-page {
margin: 0 2px 0 0;
font-size: 13px;