Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
09/06/2016 03:10:36 AM (7 years ago)
Author:
boonebgorges
Message:

XProfile: Improvements to markup for Date settings panel.

  • Improved appearance at narrow widths.
  • Add missing labels and aria attributes.

Props mercime.
See #5500.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php

    r11043 r11061  
    483483                    <div class="bp-date-format-option">
    484484                        <label for="date-format-elapsed">
    485                             <input type="radio" name="field_settings[date_format]" id="date-format-elapsed" <?php checked( 'elapsed', $settings['date_format'] ); ?> value="elapsed" />
    486                             <span class="date-format-label"><?php esc_html_e( 'Time elapsed', 'buddypress' ); ?></span> <?php _e( '<code>4 years ago</code>, <code>4 years from now</code>', 'buddypress' ); ?>
     485                            <input type="radio" name="field_settings[date_format]" id="date-format-elapsed" <?php checked( 'elapsed', $settings['date_format'] ); ?> value="elapsed" aria-describedby="date-format-elapsed-setting" />
     486                            <span class="date-format-label" id="date-format-elapsed-setting"><?php esc_html_e( 'Time elapsed', 'buddypress' ); ?></span> <?php _e( '<code>4 years ago</code>, <code>4 years from now</code>', 'buddypress' ); ?>
    487487                        </label>
    488488                    </div>
    … …  
    492492                            <input type="radio" name="field_settings[date_format]" id="date-format-custom" <?php checked( 'custom', $settings['date_format'] ); ?> value="custom" />
    493493                            <span class="date-format-label"><?php esc_html_e( 'Custom:', 'buddypress' ); ?></span>
    494                             <input type="text" name="field_settings[date_format_custom]" id="date-format-custom-value" class="date-format-custom-value" value="<?php echo esc_attr( $settings['date_format_custom'] ); ?>" /> <span class="screen-reader-text"><?php esc_html_e( 'Example:', 'buddypress' ); ?></span><span class="date-format-custom-sample" id="date-format-custom-sample"><?php if ( $settings['date_format_custom'] ) : ?><?php echo esc_html( date( $settings['date_format_custom'] ) ); endif; ?></span><span class="spinner" id="date-format-custom-spinner"></span>
    495494                        </label>
     495                        <label for="date-format-custom-value" class="screen-reader-text"><?php esc_html_e( 'Enter custom time format', 'buddypress' ); ?></label>
     496                        <input type="text" name="field_settings[date_format_custom]" id="date-format-custom-value" class="date-format-custom-value" value="<?php echo esc_attr( $settings['date_format_custom'] ); ?>" aria-describedby="date-format-custom-value-info" /> <span class="screen-reader-text"><?php esc_html_e( 'Example:', 'buddypress' ); ?></span><span class="date-format-custom-sample" id="date-format-custom-sample"><?php if ( $settings['date_format_custom'] ) : ?><?php echo esc_html( date( $settings['date_format_custom'] ) ); endif; ?></span><span class="spinner" id="date-format-custom-spinner" aria-hidden="true"></span>
     497
     498                        <p><a href="https://codex.wordpress.org/Formatting_Date_and_Time"><?php esc_html_e( 'Documentation on date and time formatting', 'buddypress' ); ?></a></p>
    496499                    </div>
     500
    497501                </fieldset>
    498 
    499                 <p><a href="https://codex.wordpress.org/Formatting_Date_and_Time"><?php esc_html_e( 'Documentation on date and time formatting', 'buddypress' ); ?></a></p>
    500502            </td>
    501503        </tr>
    … …  
    507509
    508510            <td>
    509                 <fieldset>
     511                <fieldset class="bp-range-types">
    510512                    <legend class="screen-reader-text">
    511513                        <?php esc_html_e( 'Range', 'buddypress' ); ?>
    … …  
    513515
    514516                    <div class="bp-date-format-option">
    515                         <label>
    516                             <input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
    517 
    518                             <?php
    519                             printf(
    520                                 /* translators: 1: Start year for date range, 2: End year for date range */
    521                                 __( 'From %1$s to %2$s', 'buddypress' ),
    522                                 sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ),
    523                                 sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) )
    524                             );
     517                        <div class="bp-date-range-type-label">
     518                            <label for="range_type_absolute">
     519                                <input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
     520                                <?php esc_html_e( 'Absolute', 'buddypress' ); ?>
     521                            </label>
     522                        </div>
     523
     524                        <div class="bp-date-range-type-values">
     525                            <label for="field_settings[range_absolute_start]" aria-label="Year"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
     526                            <?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" id="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ); ?>
     527                            <label for="field_settings[range_absolute_end]" aria-label="Year"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
     528                            <?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" id="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) ); ?>
     529                        </div>
     530                    </div>
     531
     532                    <div class="bp-date-format-option">
     533                        <div class="bp-date-range-type-label">
     534                            <label for="range_type_relative">
     535                                <input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
     536                                <?php esc_html_e( 'Relative', 'buddypress' ); ?>
     537                            </label>
     538                        </div>
     539
     540                        <div class="bp-date-range-type-values">
     541                            <label for="field_settings[range_relative_start]"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
     542                            <?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" id="field_settings[range_relative_start]" value="%s" />',
     543                                esc_attr( abs( $settings['range_relative_start'] ) )
     544                                );
    525545                            ?>
    526                         </label>
    527                     </div>
    528 
    529                     <div class="bp-date-format-option">
    530                         <label>
    531                             <input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
    532 
    533                             <?php
    534                             printf(
    535                                 /* translators: 1: "From" year count for date range, 2: "To" year count for date range */
    536                                 __( 'From %1$s to %2$s', 'buddypress' ),
    537                                 sprintf(
    538                                     '<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" value="%s" /> <select name="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
    539                                     esc_attr( abs( $settings['range_relative_start'] ) ),
    540                                     selected( true, $settings['range_relative_start'] <= 0, false ),
    541                                     esc_attr__( 'years ago', 'buddypress' ),
    542                                     selected( true, $settings['range_relative_start'] > 0, false ),
    543                                     esc_attr__( 'years from now', 'buddypress' )
    544                                 ),
    545                                 sprintf(
    546                                     '<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" value="%s" /> <select name="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
    547                                     esc_attr( abs( $settings['range_relative_end'] ) ),
     546
     547                            <label class="screen-reader-text" for="field_settings[range_relative_start_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
     548                            <?php printf( '<select name="field_settings[range_relative_start_type]" id="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
     549                                selected( true, $settings['range_relative_start'] <= 0, false ),
     550                                esc_attr__( 'years ago', 'buddypress' ),
     551                                selected( true, $settings['range_relative_start'] > 0, false ),
     552                                esc_attr__( 'years from now', 'buddypress' )
     553                                );
     554                            ?>
     555
     556                            <label for="field_settings[range_relative_end]"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
     557                            <?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" id="field_settings[range_relative_end]" value="%s" />',
     558                                esc_attr( abs( $settings['range_relative_end'] ) )
     559                                );
     560                            ?>
     561                            <label class="screen-reader-text" for="field_settings[range_relative_end_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
     562                            <?php printf( '<select name="field_settings[range_relative_end_type]" id="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
    548563                                    selected( true, $settings['range_relative_end'] <= 0, false ),
    549564                                    esc_attr__( 'years ago', 'buddypress' ),
    550565                                    selected( true, $settings['range_relative_end'] > 0, false ),
    551566                                    esc_attr__( 'years from now', 'buddypress' )
    552                                 )
    553                             );
     567                                );
    554568                            ?>
    555                         </label>
     569                        </div>
    556570                    </div>
     571
    557572                </fieldset>
    558573            </td>
Note: See TracChangeset for help on using the changeset viewer.