WordPress/wp-admin/includes/options.php
Andrea Fercia f28f4fc637 Accessibility: Avoid a keyboard trap on the permalink custom structure setting.
Using the `focus` event on the permalink custom structure field made impossible
to navigate through all the form fields using only the keyboard without actually
selecting the custom structure setting. Instead, using click and input preserves
the original functionality when using any kind of pointing or input device.

Also changes `attr()` to `prop()`` as recommended for a `checked` property.

Fixes #40982.

Built from https://develop.svn.wordpress.org/trunk@40897


git-svn-id: http://core.svn.wordpress.org/trunk@40747 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-06-12 14:09:43 +00:00

142 lines
4.1 KiB
PHP

<?php
/**
* WordPress Options Administration API.
*
* @package WordPress
* @subpackage Administration
* @since 4.4.0
*/
/**
* Output JavaScript to toggle display of additional settings if avatars are disabled.
*
* @since 4.2.0
*/
function options_discussion_add_js() {
?>
<script>
(function($){
var parent = $( '#show_avatars' ),
children = $( '.avatar-settings' );
parent.change(function(){
children.toggleClass( 'hide-if-js', ! this.checked );
});
})(jQuery);
</script>
<?php
}
/**
* Display JavaScript on the page.
*
* @since 3.5.0
*/
function options_general_add_js() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
var $siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
homeURL = ( <?php echo wp_json_encode( get_home_url() ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );
$( '#blogname' ).on( 'input', function() {
var title = $.trim( $( this ).val() ) || homeURL;
// Truncate to 40 characters.
if ( 40 < title.length ) {
title = title.substring( 0, 40 ) + '\u2026';
}
$siteName.text( title );
});
$("input[name='date_format']").click(function(){
if ( "date_format_custom_radio" != $(this).attr("id") )
$( "input[name='date_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
});
$( 'input[name="date_format_custom"]' ).on( 'click input', function() {
$( '#date_format_custom_radio' ).prop( 'checked', true );
});
$("input[name='time_format']").click(function(){
if ( "time_format_custom_radio" != $(this).attr("id") )
$( "input[name='time_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
});
$( 'input[name="time_format_custom"]' ).on( 'click input', function() {
$( '#time_format_custom_radio' ).prop( 'checked', true );
});
$("input[name='date_format_custom'], input[name='time_format_custom']").change( function() {
var format = $(this);
format.siblings( '.spinner' ).addClass( 'is-active' );
$.post(ajaxurl, {
action: 'date_format_custom' == format.attr('name') ? 'date_format' : 'time_format',
date : format.val()
}, function(d) { format.siblings( '.spinner' ).removeClass( 'is-active' ); format.siblings('.example').text(d); } );
});
var languageSelect = $( '#WPLANG' );
$( 'form' ).submit( function() {
// Don't show a spinner for English and installed languages,
// as there is nothing to download.
if ( ! languageSelect.find( 'option:selected' ).data( 'installed' ) ) {
$( '#submit', this ).after( '<span class="spinner language-install-spinner is-active" />' );
}
});
});
</script>
<?php
}
/**
* Display JavaScript on the page.
*
* @since 3.5.0
*/
function options_permalink_add_js() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.permalink-structure input:radio').change(function() {
if ( 'custom' == this.value )
return;
jQuery('#permalink_structure').val( this.value );
});
jQuery( '#permalink_structure' ).on( 'click input', function() {
jQuery( '#custom_selection' ).prop( 'checked', true );
});
});
</script>
<?php
}
/**
* Display JavaScript on the page.
*
* @since 3.5.0
*/
function options_reading_add_js() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
var section = $('#front-static-pages'),
staticPage = section.find('input:radio[value="page"]'),
selects = section.find('select'),
check_disabled = function(){
selects.prop( 'disabled', ! staticPage.prop('checked') );
};
check_disabled();
section.find('input:radio').change(check_disabled);
});
</script>
<?php
}
/**
* Render the site charset setting.
*
* @since 3.5.0
*/
function options_reading_blog_charset() {
echo '<input name="blog_charset" type="text" id="blog_charset" value="' . esc_attr( get_option( 'blog_charset' ) ) . '" class="regular-text" />';
echo '<p class="description">' . __( 'The <a href="https://codex.wordpress.org/Glossary#Character_set">character encoding</a> of your site (UTF-8 is recommended)' ) . '</p>';
}