WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/02/2017 04:11:50 AM (9 years ago)
Author:
westonruter
Message:

Customize: Fix WP_Customize_Date_Time_Control to be re-usable for plugins and custom settings.

  • Allow time fields to be omitted by constructing with timeIncluded as false.
  • Ensure reportValidity is only called on a control when it is in an expanded section.
  • Rename "ampm" to "meridian".
  • Improve accessibility and fix HTML validation and style issues for both the date/time control and the preview link control.
  • Fix styling of dropdowns and clean CSS.
  • Improve accessibility of nav menus component.

Props westonruter, afercia, sayedwp, melchoyce.
Amends [41626].
See #39896.
Fixes #42022.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/qunit/index.html

    r41626 r41670  
    873873                        <# } #>
    874874                </script>
    875         <script type="text/html" id="tmpl-customize-control-date_time-content">
    876 
    877                 <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":69,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
     875                <script type="text/html" id="tmpl-customize-control-date_time-content">
     876
     877                <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
     878                <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
    878879
    879880                <span class="customize-control-title">
    880                         <label>{{ data.label }}</label>
     881                        {{ data.label }}
    881882                </span>
    882883                <div class="customize-control-notifications-container"></div>
    883884                <span class="description customize-control-description">{{ data.description }}</span>
    884885                <div class="date-time-fields">
    885                         <div class="day-row">
    886                                 <span class="title-day">Day</span>
     886                        <fieldset class="day-row">
     887                                <legend class="title-day">Date</legend>
    887888                                <div class="day-fields clear">
    888                                         <label class="month-field">
    889                                                 <span class="screen-reader-text">Month</span>
    890                                                 <select class="date-input month" data-component="month">
    891                                                         <# _.each( data.month_choices, function( choice ) {
    892                                                                         if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
    893                                                                         text = choice.text;
    894                                                                         value = choice.value;
    895                                                                         }
    896                                                                         #>
    897                                                                 <option value="{{ value }}" >
    898                                                                         {{ text }}
    899                                                                 </option>
    900                                                                 <# } ); #>
    901                                                 </select>
    902                                         </label>
    903                                         <label class="day-field">
    904                                                 <span class="screen-reader-text">Day</span>
    905                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
    906                                         </label>
     889                                        <label for="{{ idPrefix }}date-time-month" class="screen-reader-text">Month</label>
     890                                        <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
     891                                                <# _.each( data.month_choices, function( choice ) {
     892                                                                if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
     893                                                                text = choice.text;
     894                                                                value = choice.value;
     895                                                                }
     896                                                                #>
     897                                                        <option value="{{ value }}" >
     898                                                                {{ text }}
     899                                                        </option>
     900                                                <# } ); #>
     901                                        </select>
     902                                        <label for="{{ idPrefix }}date-time-day" class="screen-reader-text">Day</label>
     903                                        <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
    907904                                        <span class="time-special-char date-time-separator">,</span>
    908                                         <label class="year-field">
    909                                                 <span class="screen-reader-text">Year</span>
    910                                                 <# var maxYearLength = String( data.maxYear ).length; #>
    911                                                         <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
    912                                         </label>
    913                                 </div>
    914                         </div>
    915                         <div class="time-row clear">
    916                                 <span class="title-time">Time</span>
    917                                 <div class="time-fields clear">
    918                                         <label class="hour-field">
    919                                                 <span class="screen-reader-text">Hour</span>
     905                                        <label for="{{ idPrefix }}date-time-year" class="screen-reader-text">Year</label>
     906                                        <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
     907                                </div>
     908                        </fieldset>
     909                        <# if ( data.includeTime ) { #>
     910                                <fieldset class="time-row clear">
     911                                        <legend class="title-time">Time</legend>
     912                                        <div class="time-fields clear">
     913                                                <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">Hour</label>
    920914                                                <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
    921                                                         <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
    922                                         </label>
    923                                         <span class="time-special-char date-time-separator">:</span>
    924                                         <label class="minute-field">
    925                                                 <span class="screen-reader-text">Minute</span>
    926                                                 <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
    927                                         </label>
    928                                         <# if ( data.twelveHourFormat ) { #>
    929                                                 <label class="am-pm-field">
    930                                                         <span class="screen-reader-text">AM / PM</span>
    931                                                         <select class="date-input" data-component="ampm">
     915                                                <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
     916                                                <span class="time-special-char date-time-separator">:</span>
     917                                                <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">Minute</label>
     918                                                <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
     919                                                <# if ( data.twelveHourFormat ) { #>
     920                                                        <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">Meridian</label>
     921                                                        <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
    932922                                                                <option value="am">AM</option>
    933923                                                                <option value="pm">PM</option>
    934924                                                        </select>
    935                                                 </label>
    936925                                                <# } #>
    937                                         <abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
    938                                 </div>
    939                         </div>
     926                                                <abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
     927                                        </div>
     928                                </fieldset>
     929                        <# } #>
    940930                </div>
    941931        </script>
    942932        <script type="text/html" id="tmpl-customize-preview-link-control" >
    943                 <span class="customize-control-title">
    944                 <label>Share Preview Link</label>
    945         </span>
    946                 <span class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</span>
     933                <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
     934                <p class="customize-control-title">
     935                        Share Preview Link                      </p>
     936                <p class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can&#039;t access the Customizer.</p>
    947937                <div class="customize-control-notifications-container"></div>
    948938                <div class="preview-link-wrapper">
    949                         <label>
    950                                 <span class="screen-reader-text">Preview Link</span>
    951                                 <a class="preview-control-element" data-component="link" href="" target=""></a>
    952                                 <input readonly class="preview-control-element" data-component="input" value="test" >
    953                                 <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
    954                         </label>
     939                        <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">Preview Link</label>
     940                        <a href="" target="">
     941                                <span class="preview-control-element" data-component="url"></span>
     942                                <span class="screen-reader-text">(opens in a new window)</span>
     943                        </a>
     944                        <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
     945                        <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
    955946                </div>
    956947        </script>
Note: See TracChangeset for help on using the changeset viewer.