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

Permalinks: Label and describe permalink settings fields.

Browse Source 
Restructure the permalink settings fields so URL formats are communicated to screen readers through `aria-describedby` relationships, avoid the usage of implicitly labeled input fields, labeling the custom permalink format correctly, and clarifying values. Make settings `table` element presentational.

Props rishishah, sabernhardt, kebbet.
Fixes #55498.

git-svn-id: https://develop.svn.wordpress.org/trunk@53706 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2022-07-15 22:40:03 +00:00
parent 3fa077315c
commit ab2cd6f03b
2 changed files with 152 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/wp-admin/css/forms.css
View File

@@ -1070,11 +1070,34 @@ table.form-table td .updated p {
vertical-align: middle;
}
.form-table.permalink-structure .available-structure-tags {
margin-top: 8px;
}
.form-table.permalink-structure .available-structure-tags li {
float: left;
margin-right: 5px;
}
.form-table.permalink-structure .structure-selection .row {
margin-bottom: 16px;
}
.form-table.permalink-structure .structure-selection .row > div {
max-width: calc(100% - 24px);
margin-left: 4px;
display: inline-flex;
flex-direction: column;
}
.form-table.permalink-structure .structure-selection .row label {
font-weight: 600;
}
.form-table.permalink-structure .structure-selection .row p {
margin-top: 0;
}
/*------------------------------------------------------------------------------
21.0 - Network Admin
------------------------------------------------------------------------------*/
@@ -1577,14 +1600,20 @@ table.form-table td .updated p {
}
.form-table.permalink-structure td code {
margin-left: 32px;
display: inline-block;
}
.form-table.permalink-structure .structure-selection {
margin-top: 8px;
}
.form-table.permalink-structure .structure-selection .row > div {
max-width: calc(100% - 36px);
width: 100%;
}
.form-table.permalink-structure td input[type="text"] {
margin-left: 32px;
margin-top: 4px;
width: 96%;
}
.form-table input.regular-text {