WordPress.org
Get WordPress

Make WordPress Core

Changeset 53706


Ignore:
Timestamp:
07/15/2022 10:40:03 PM (4 years ago)
Author:
joedolson
Message:

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.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/forms.css

    r53567 r53706  
    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;
     1080}
     1081
     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;
    10761099}
    10771100
    … …  
    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

  • trunk/src/wp-admin/options-permalink.php

    r53337 r53706  
    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
Note: See TracChangeset for help on using the changeset viewer.