Get WordPress

Make WordPress Core

Changeset 53706

Timestamp:
07/15/2022 10:40:03 PM (2 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
     1074
     1075
     1076
    10731077.form-table.permalink-structure .available-structure-tags li {
    10741078    float: left;
    10751079    margin-right: 5px;
     1080
     1081
     1082
     1083
     1084
     1085
     1086
     1087
     1088
     1089
     1090
     1091
     1092
     1093
     1094
     1095
     1096
     1097
     1098
    10761099}
    10771100
    … …  
    15781601
    15791602    .form-table.permalink-structure td code {
    1580         margin-left: 32px;
    15811603        display: inline-block;
    15821604    }
    15831605
     1606
     1607
     1608
     1609
     1610
     1611
     1612
     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
     240
     241
     242
     243
     244
     245
     246
     247
     248
     249
     250
     251
     252
     253
     254
     255
     256
     257
     258
     259
     260
     261
     262
     263
     264
     265
     266
     267
     268
     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.