Skip to content

Commit ab2cd6f

Browse files
joedolsonjoedolson
committed
Permalinks: Label and describe permalink settings fields.
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
1 parent 3fa0773 commit ab2cd6f

File tree

2 files changed

+153
-97
lines changed

2 files changed

+153
-97
lines changed

‎src/wp-admin/css/forms.css‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1070,11 +1070,34 @@ table.form-table td .updated p {
10701070
vertical-align: middle;
10711071
}
10721072

1073+
.form-table.permalink-structure .available-structure-tags {
1074+
margin-top: 8px;
1075+
}
1076+
10731077
.form-table.permalink-structure .available-structure-tags li {
10741078
float: left;
10751079
margin-right: 5px;
10761080
}
10771081

1082+
.form-table.permalink-structure .structure-selection .row {
1083+
margin-bottom: 16px;
1084+
}
1085+
1086+
.form-table.permalink-structure .structure-selection .row > div {
1087+
max-width: calc(100% - 24px);
1088+
margin-left: 4px;
1089+
display: inline-flex;
1090+
flex-direction: column;
1091+
}
1092+
1093+
.form-table.permalink-structure .structure-selection .row label {
1094+
font-weight: 600;
1095+
}
1096+
1097+
.form-table.permalink-structure .structure-selection .row p {
1098+
margin-top: 0;
1099+
}
1100+
10781101
/*------------------------------------------------------------------------------
10791102
21.0 - Network Admin
10801103
------------------------------------------------------------------------------*/
@@ -1577,14 +1600,20 @@ table.form-table td .updated p {
15771600
}
15781601

15791602
.form-table.permalink-structure td code {
1580-
margin-left: 32px;
15811603
display: inline-block;
15821604
}
15831605

1606+
.form-table.permalink-structure .structure-selection {
1607+
margin-top: 8px;
1608+
}
1609+
1610+
.form-table.permalink-structure .structure-selection .row > div {
1611+
max-width: calc(100% - 36px);
1612+
width: 100%;
1613+
}
1614+
15841615
.form-table.permalink-structure td input[type="text"] {
1585-
margin-left: 32px;
15861616
margin-top: 4px;
1587-
width: 96%;
15881617
}
15891618

15901619
.form-table input.regular-text {

‎src/wp-admin/options-permalink.php‎

Lines changed: 121 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -235,103 +235,130 @@
235235
3 => $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/%post_id%',
236236
4 => $prefix . '/%postname%/',
237237
);
238+
239+
$inputs = array(
240+
0 => array(
241+
'id' => 'plain',
242+
'label' => __( 'Plain' ),
243+
'example' => get_option( 'home' ) . '/?p=123',
244+
'value' => $structures[0],
245+
),
246+
1 => array(
247+
'id' => 'day-name',
248+
'label' => __( 'Day and name' ),
249+
'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . gmdate( 'd' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/',
250+
'value' => $structures[1],
251+
),
252+
2 => array(
253+
'id' => 'month-name',
254+
'label' => __( 'Month and name' ),
255+
'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/',
256+
'value' => $structures[2],
257+
),
258+
3 => array(
259+
'id' => 'day-numeric',
260+
'label' => __( 'Numeric' ),
261+
'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/123',
262+
'value' => $structures[3],
263+
),
264+
4 => array(
265+
'id' => 'post-name',
266+
'label' => __( 'Post name' ),
267+
'example' => get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/',
268+
'value' => $structures[4],
269+
),
270+
);
238271
?>
239272
<h2 class="title"><?php _e( 'Common Settings' ); ?></h2>
240-
<table class="form-table permalink-structure">
241-
<tr>
242-
<th scope="row"><label><input name="selection" type="radio" value="" <?php checked( '', $permalink_structure ); ?> /> <?php _e( 'Plain' ); ?></label></th>
243-
<td><code><?php echo get_option( 'home' ); ?>/?p=123</code></td>
244-
</tr>
245-
<tr>
246-
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[1] ); ?>" <?php checked( $structures[1], $permalink_structure ); ?> /> <?php _e( 'Day and name' ); ?></label></th>
247-
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . gmdate( 'd' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
248-
</tr>
249-
<tr>
250-
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[2] ); ?>" <?php checked( $structures[2], $permalink_structure ); ?> /> <?php _e( 'Month and name' ); ?></label></th>
251-
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . gmdate( 'Y' ) . '/' . gmdate( 'm' ) . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
252-
</tr>
253-
<tr>
254-
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[3] ); ?>" <?php checked( $structures[3], $permalink_structure ); ?> /> <?php _e( 'Numeric' ); ?></label></th>
255-
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'archives', 'sample permalink base' ) . '/123'; ?></code></td>
256-
</tr>
257-
<tr>
258-
<th scope="row"><label><input name="selection" type="radio" value="<?php echo esc_attr( $structures[4] ); ?>" <?php checked( $structures[4], $permalink_structure ); ?> /> <?php _e( 'Post name' ); ?></label></th>
259-
<td><code><?php echo get_option( 'home' ) . $blog_prefix . $prefix . '/' . _x( 'sample-post', 'sample permalink structure' ) . '/'; ?></code></td>
260-
</tr>
261-
<tr>
262-
<th scope="row">
263-
<label><input name="selection" id="custom_selection" type="radio" value="custom" <?php checked( ! in_array( $permalink_structure, $structures, true ) ); ?> />
264-
<?php _e( 'Custom Structure' ); ?>
265-
</label>
266-
</th>
267-
<td>
268-
<code><?php echo get_option( 'home' ) . $blog_prefix; ?></code>
269-
<input name="permalink_structure" id="permalink_structure" type="text" value="<?php echo esc_attr( $permalink_structure ); ?>" class="regular-text code" />
270-
<div class="available-structure-tags hide-if-no-js">
271-
<div id="custom_selection_updated" aria-live="assertive" class="screen-reader-text"></div>
272-
<?php
273-
$available_tags = array(
274-
/* translators: %s: Permalink structure tag. */
275-
'year' => __( '%s (The year of the post, four digits, for example 2004.)' ),
276-
/* translators: %s: Permalink structure tag. */
277-
'monthnum' => __( '%s (Month of the year, for example 05.)' ),
278-
/* translators: %s: Permalink structure tag. */
279-
'day' => __( '%s (Day of the month, for example 28.)' ),
280-
/* translators: %s: Permalink structure tag. */
281-
'hour' => __( '%s (Hour of the day, for example 15.)' ),
282-
/* translators: %s: Permalink structure tag. */
283-
'minute' => __( '%s (Minute of the hour, for example 43.)' ),
284-
/* translators: %s: Permalink structure tag. */
285-
'second' => __( '%s (Second of the minute, for example 33.)' ),
286-
/* translators: %s: Permalink structure tag. */
287-
'post_id' => __( '%s (The unique ID of the post, for example 423.)' ),
288-
/* translators: %s: Permalink structure tag. */
289-
'postname' => __( '%s (The sanitized post title (slug).)' ),
290-
/* translators: %s: Permalink structure tag. */
291-
'category' => __( '%s (Category slug. Nested sub-categories appear as nested directories in the URL.)' ),
292-
/* translators: %s: Permalink structure tag. */
293-
'author' => __( '%s (A sanitized version of the author name.)' ),
294-
);
295-
296-
/**
297-
* Filters the list of available permalink structure tags on the Permalinks settings page.
298-
*
299-
* @since 4.9.0
300-
*
301-
* @param string[] $available_tags An array of key => value pairs of available permalink structure tags.
302-
*/
303-
$available_tags = apply_filters( 'available_permalink_structure_tags', $available_tags );
304-
305-
/* translators: %s: Permalink structure tag. */
306-
$structure_tag_added = __( '%s added to permalink structure' );
307-
308-
/* translators: %s: Permalink structure tag. */
309-
$structure_tag_already_used = __( '%s (already used in permalink structure)' );
310-
311-
if ( ! empty( $available_tags ) ) :
273+
<table class="form-table permalink-structure" role="presentation">
274+
<tbody>
275+
<tr>
276+
<th scope="row"><?php _e( 'Permalink structure' ); ?></th>
277+
<td>
278+
<fieldset class="structure-selection">
279+
<legend class="screen-reader-text"><?php _e( 'Permalink structure' ); ?></legend>
280+
<?php
281+
foreach ( $inputs as $structure_id => $structure_values ) {
282+
$input_markup = '<div class="row">';
283+
$input_markup .= '<input id="permalink-input-' . $structure_values['id'] . '" name="selection" aria-describedby="permalink-' . $structure_values['id'] . '" type="radio" value="' . $structure_values['value'] . '" ' . checked( $structure_values['value'], $permalink_structure, false ) . ' />';
284+
$input_markup .= '<div><label for="permalink-input-' . $structure_values['id'] . '">' . $structure_values['label'] . '</label>';
285+
$input_markup .= '<p><code id="permalink-' . $structure_values['id'] . '">' . $structure_values['example'] . '</code></p>';
286+
$input_markup .= '</div>';
287+
$input_markup .= '</div>';
288+
289+
echo $input_markup;
290+
}
312291
?>
313-
<p><?php _e( 'Available tags:' ); ?></p>
314-
<ul role="list">
315-
<?php
316-
foreach ( $available_tags as $tag => $explanation ) {
317-
?>
318-
<li>
319-
<button type="button"
320-
class="button button-secondary"
321-
aria-label="<?php echo esc_attr( sprintf( $explanation, $tag ) ); ?>"
322-
data-added="<?php echo esc_attr( sprintf( $structure_tag_added, $tag ) ); ?>"
323-
data-used="<?php echo esc_attr( sprintf( $structure_tag_already_used, $tag ) ); ?>">
324-
<?php echo '%' . $tag . '%'; ?>
325-
</button>
326-
</li>
327-
<?php
328-
}
329-
?>
330-
</ul>
331-
<?php endif; ?>
332-
</div>
333-
</td>
334-
</tr>
292+
<div class="row">
293+
<input id="custom_selection" name="selection" type="radio" value="custom" <?php checked( ! in_array( $permalink_structure, $structures, true ) ); ?> /><div><label for="custom_selection"><?php _e( 'Custom Structure' ); ?></label>
294+
<p><label for="permalink_structure" class="screen-reader-text"><?php _e( 'Customize permalink structure by selecting available tags' ); ?></label><span class="code"><code id="permalink-custom"><?php echo get_option( 'home' ) . $blog_prefix; ?></code><input name="permalink_structure" id="permalink_structure" type="text" value="<?php echo esc_attr( $permalink_structure ); ?>" aria-describedby="permalink-custom" class="regular-text code" /></span></p>
295+
<div class="available-structure-tags hide-if-no-js">
296+
<div id="custom_selection_updated" aria-live="assertive" class="screen-reader-text"></div>
297+
<?php
298+
$available_tags = array(
299+
/* translators: %s: Permalink structure tag. */
300+
'year' => __( '%s (The year of the post, four digits, for example 2004.)' ),
301+
/* translators: %s: Permalink structure tag. */
302+
'monthnum' => __( '%s (Month of the year, for example 05.)' ),
303+
/* translators: %s: Permalink structure tag. */
304+
'day' => __( '%s (Day of the month, for example 28.)' ),
305+
/* translators: %s: Permalink structure tag. */
306+
'hour' => __( '%s (Hour of the day, for example 15.)' ),
307+
/* translators: %s: Permalink structure tag. */
308+
'minute' => __( '%s (Minute of the hour, for example 43.)' ),
309+
/* translators: %s: Permalink structure tag. */
310+
'second' => __( '%s (Second of the minute, for example 33.)' ),
311+
/* translators: %s: Permalink structure tag. */
312+
'post_id' => __( '%s (The unique ID of the post, for example 423.)' ),
313+
/* translators: %s: Permalink structure tag. */
314+
'postname' => __( '%s (The sanitized post title (slug).)' ),
315+
/* translators: %s: Permalink structure tag. */
316+
'category' => __( '%s (Category slug. Nested sub-categories appear as nested directories in the URL.)' ),
317+
/* translators: %s: Permalink structure tag. */
318+
'author' => __( '%s (A sanitized version of the author name.)' ),
319+
);
320+
321+
/**
322+
* Filters the list of available permalink structure tags on the Permalinks settings page.
323+
*
324+
* @since 4.9.0
325+
*
326+
* @param string[] $available_tags An array of key => value pairs of available permalink structure tags.
327+
*/
328+
$available_tags = apply_filters( 'available_permalink_structure_tags', $available_tags );
329+
330+
/* translators: %s: Permalink structure tag. */
331+
$structure_tag_added = __( '%s added to permalink structure' );
332+
333+
/* translators: %s: Permalink structure tag. */
334+
$structure_tag_already_used = __( '%s (already used in permalink structure)' );
335+
336+
if ( ! empty( $available_tags ) ) :
337+
?>
338+
<fieldset>
339+
<legend><?php _e( 'Available tags:' ); ?></legend>
340+
<ul role="list">
341+
<?php foreach ( $available_tags as $tag => $explanation ) : ?>
342+
<li>
343+
<button type="button"
344+
class="button button-secondary"
345+
aria-label="<?php echo esc_attr( sprintf( $explanation, $tag ) ); ?>"
346+
data-added="<?php echo esc_attr( sprintf( $structure_tag_added, $tag ) ); ?>"
347+
data-used="<?php echo esc_attr( sprintf( $structure_tag_already_used, $tag ) ); ?>">
348+
<?php echo '%' . $tag . '%'; ?>
349+
</button>
350+
</li>
351+
<?php endforeach; ?>
352+
</ul>
353+
</fieldset>
354+
<?php endif; ?>
355+
</div>
356+
</div>
357+
</div>
358+
</fieldset>
359+
</td>
360+
</tr>
361+
</tbody>
335362
</table>
336363

337364
<h2 class="title"><?php _e( 'Optional' ); ?></h2>

0 commit comments

Comments
 (0)