Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
09/06/2016 03:10:36 AM (10 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.