WordPress.org
Get WordPress

Make WordPress Core

Changeset 53706


Ignore:
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.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.