Make WordPress Core

Ticket #31354: 31354_disable.patch

File 31354_disable.patch, 10.4 KB (added by jwgoedert, 7 months ago)

Disable dependent input fields on parent toggle patch-need feedback on accessibility and structure

  • src/wp-admin/css/forms.css

    diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
    index 63eb3e88eb..a22525d59e 100644
    a b ul#add-to-blog-users { 
    898898        display: inline-block;
    899899}
    900900
     901.form-table td fieldset label.indent-child {
     902        margin-left: 1.5em !important;
     903}
     904
    901905.form-table td fieldset p label {
    902906        margin-top: 0 !important;
    903907}
  • src/wp-admin/includes/options.php

    diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php
    index 2ede58cfa3..2e5ea11f29 100644
    a b function options_discussion_add_js() { 
    1616        ?>
    1717        <script>
    1818        (function($){
    19                 var parent = $( '#show_avatars' ),
    20                         children = $( '.avatar-settings' );
    21                 parent.on( 'change', function(){
    22                         children.toggleClass( 'hide-if-js', ! this.checked );
    23                 });
     19                function toggleEditableState(parentCheckboxId, childInputElement){
     20                        var parentCheckbox = $(parentCheckboxId ),
     21                                childrenInputs = $(childInputElement );
     22                                ariaLiveRegion = $('#aria-live-region');
     23
     24
     25                        function applyDisabledStyle(element, isDisabled) {
     26                                element.prop('disabled', isDisabled);
     27                                if (isDisabled) {
     28                                        element.css({
     29                                                'color': 'gray',
     30                                                'opacity': '0.85',
     31                                                'cursor': 'not-allowed'
     32                                        });
     33                                        element.closest('label').css({
     34                                                'color': 'gray',
     35                                                'opacity': '0.85',
     36                                                'cursor': 'not-allowed',
     37                                        });
     38                                } else {
     39                                        element.css({
     40                                                'color': '',
     41                                                'opacity': '',
     42                                                'cursor': ''
     43                                        });
     44                                        element.closest('label').css({
     45                                                'color': '',
     46                                                'opacity': '',
     47                                                'cursor': '',
     48                                        });
     49                                }
     50                        }
     51
     52                        // Set the initial state based on the checkbox state
     53                        childrenInputs.find('input, select, textarea').each(function() {
     54                                applyDisabledStyle($(this), !parentCheckbox.prop('checked'));
     55                        });
     56                        parentCheckbox.attr('aria-expanded', parentCheckbox.prop('checked'));
     57                        // Update the disabled state of children on parent checkbox change
     58                        parentCheckbox.on('change', function() {
     59                                var isChecked = this.checked;
     60                                childrenInputs.find('input, select, textarea').each(function() {
     61                                        applyDisabledStyle($(this), !isChecked);
     62                                });
     63                                $(this).attr('aria-expanded', isChecked);
     64
     65                                // Announce the change to screen readers.
     66                                var message = this.checked ? 'Checked Checkbox, Dependent fields are now editable.' : 'Unchecked Checkbox, Dependent fields are now disabled.';
     67                                ariaLiveRegion.text( message );
     68                        });
     69                }
     70
     71                // Call function for each expandable section of discussion settings.
     72                toggleEditableState('#close_comments_for_old_posts', '.close-comments-setting' );
     73                toggleEditableState('#thread_comments', '.thread-comments-setting' );
     74                toggleEditableState('#page_comments', '.pagination-setting' );
     75                toggleEditableState( '#show_avatars', '.avatar-settings' );
    2476        })(jQuery);
    2577        </script>
    2678        <?php
  • src/wp-admin/options-discussion.php

    diff --git a/src/wp-admin/options-discussion.php b/src/wp-admin/options-discussion.php
    index 19e3c45dc8..4f1003e9c3 100644
    a b require_once ABSPATH . 'wp-admin/admin-header.php'; 
    3939<div class="wrap">
    4040<h1><?php echo esc_html( $title ); ?></h1>
    4141
     42<!-- ARIA live region for screen readers -->
     43<div id="aria-live-region" aria-live="polite" class="screen-reader-text"></div>
     44
     45
    4246<form method="post" action="options.php">
    4347<?php settings_fields( 'discussion' ); ?>
    4448
    if ( ! get_option( 'users_can_register' ) && is_multisite() ) { 
    8993
    9094<label for="close_comments_for_old_posts">
    9195<input name="close_comments_for_old_posts" type="checkbox" id="close_comments_for_old_posts" value="1" <?php checked( '1', get_option( 'close_comments_for_old_posts' ) ); ?> />
    92 <?php
    93 printf(
    94         /* translators: %s: Number of days. */
    95         __( 'Automatically close comments on posts older than %s days' ),
    96         '</label> <label for="close_comments_days_old"><input name="close_comments_days_old" type="number" min="0" step="1" id="close_comments_days_old" value="' . esc_attr( get_option( 'close_comments_days_old' ) ) . '" class="small-text" />'
    97 );
    98 ?>
     96<?php _e( 'Automatically close comments for old posts' ); ?>
     97</label>
     98<br />
     99
     100<label for="close_comments_days_old" class="close-comments-setting indent-child" >
     101<?php _e( 'Number of days to keep old comments: ' ); ?>
     102<input name="close_comments_days_old" type="number" step="1" min="0" id="close_comments_days_old" value="<?php echo esc_attr( get_option( 'close_comments_days_old' ) ); ?>" class="small-text" />
    99103</label>
    100104<br />
    101105
    printf( 
    107111
    108112<label for="thread_comments">
    109113<input name="thread_comments" type="checkbox" id="thread_comments" value="1" <?php checked( '1', get_option( 'thread_comments' ) ); ?> />
     114<?php _e( 'Enable threaded (nested) comments' ); ?>
     115</label>
     116<br />
     117
     118<label for="thread_comments_depth" class="thread-comments-setting indent-child">
    110119<?php
    111120/**
    112121 * Filters the maximum depth of threaded/nested comments.
    printf( 
    117126 */
    118127$maxdeep = (int) apply_filters( 'thread_comments_depth_max', 10 );
    119128
    120 $thread_comments_depth = '</label> <label for="thread_comments_depth"><select name="thread_comments_depth" id="thread_comments_depth">';
     129$thread_comments_depth = '<select name="thread_comments_depth" id="thread_comments_depth">';
    121130for ( $i = 2; $i <= $maxdeep; $i++ ) {
    122131        $thread_comments_depth .= "<option value='" . esc_attr( $i ) . "'";
    123132        if ( (int) get_option( 'thread_comments_depth' ) === $i ) {
    for ( $i = 2; $i <= $maxdeep; $i++ ) { 
    128137$thread_comments_depth .= '</select>';
    129138
    130139/* translators: %s: Number of levels. */
    131 printf( __( 'Enable threaded (nested) comments %s levels deep' ), $thread_comments_depth );
     140printf( __( 'Number of levels for threaded (nested) comments: %s' ), $thread_comments_depth );
    132141
    133142?>
    134143</label>
    135144<br />
     145</fieldset></td>
     146</tr>
     147
     148<tr>
     149<th scope="row"><?php _e( 'Comment Pagination' ); ?></th>
     150<td><fieldset><legend class="screen-reader-text"><span>
     151        <?php
     152        /* translators: Hidden accessibility text. */
     153        _e( 'Comment Pagination' );
     154        ?>
     155</span></legend>
    136156<label for="page_comments">
    137157<input name="page_comments" type="checkbox" id="page_comments" value="1" <?php checked( '1', get_option( 'page_comments' ) ); ?> />
    138 <?php
    139 $default_comments_page = '</label> <label for="default_comments_page"><select name="default_comments_page" id="default_comments_page"><option value="newest"';
    140 if ( 'newest' === get_option( 'default_comments_page' ) ) {
    141         $default_comments_page .= ' selected="selected"';
    142 }
    143 $default_comments_page .= '>' . __( 'last' ) . '</option><option value="oldest"';
    144 if ( 'oldest' === get_option( 'default_comments_page' ) ) {
    145         $default_comments_page .= ' selected="selected"';
    146 }
    147 $default_comments_page .= '>' . __( 'first' ) . '</option></select>';
    148 printf(
    149         /* translators: 1: Form field control for number of top level comments per page, 2: Form field control for the 'first' or 'last' page. */
    150         __( 'Break comments into pages with %1$s top level comments per page and the %2$s page displayed by default' ),
    151         '</label> <label for="comments_per_page"><input name="comments_per_page" type="number" step="1" min="0" id="comments_per_page" value="' . esc_attr( get_option( 'comments_per_page' ) ) . '" class="small-text" />',
    152         $default_comments_page
    153 );
    154 ?>
     158<?php _e( 'Break comments into pages' ); ?>
    155159</label>
    156160<br />
    157 <label for="comment_order">
    158 <?php
    159161
    160 $comment_order = '<select name="comment_order" id="comment_order"><option value="asc"';
    161 if ( 'asc' === get_option( 'comment_order' ) ) {
    162         $comment_order .= ' selected="selected"';
    163 }
    164 $comment_order .= '>' . __( 'older' ) . '</option><option value="desc"';
    165 if ( 'desc' === get_option( 'comment_order' ) ) {
    166         $comment_order .= ' selected="selected"';
    167 }
    168 $comment_order .= '>' . __( 'newer' ) . '</option></select>';
     162<label for="comments_per_page" class="pagination-setting indent-child">
     163<?php _e( 'Top level comments per page: ' ); ?>
     164<input name="comments_per_page" type="number" step="1" min="0" id="comments_per_page" value="<?php echo esc_attr( get_option( 'comments_per_page' ) ); ?>" class="small-text" />
     165</label>
     166<br />
    169167
    170 /* translators: %s: Form field control for 'older' or 'newer' comments. */
    171 printf( __( 'Comments should be displayed with the %s comments at the top of each page' ), $comment_order );
     168<label for="default_comments_page" class="pagination-setting indent-child"><?php _e( 'Comments page to display by default: ' ); ?>
     169<select name="default_comments_page" id="default_comments_page">
     170        <option value="newest" <?php selected( 'newest', get_option( 'default_comments_page' ) ); ?>><?php _e( 'last page' ); ?></option>
     171        <option value="oldest" <?php selected( 'oldest', get_option( 'default_comments_page' ) ); ?>><?php _e( 'first page' ); ?></option>
     172</select>
     173</label>
     174<br />
    172175
    173 ?>
     176<label for="comment_order" class="pagination-setting indent-child">
     177<?php _e( 'Comments to display at the top of each page: ' ); ?>
     178<select name="comment_order" id="comment_order">
     179        <option value="asc" <?php selected( 'asc', get_option( 'comment_order' ) ); ?>><?php _e( 'older' ); ?></option>
     180        <option value="desc" <?php selected( 'desc', get_option( 'comment_order' ) ); ?>><?php _e( 'newer' ); ?></option>
     181</select>
    174182</label>
     183<br />
    175184</fieldset></td>
    176185</tr>
     186
    177187<tr>
    178188<th scope="row"><?php _e( 'Email me whenever' ); ?></th>
    179189<td><fieldset><legend class="screen-reader-text"><span>
    printf( __( 'Comments should be displayed with the %s comments at the top of eac 
    186196<input name="comments_notify" type="checkbox" id="comments_notify" value="1" <?php checked( '1', get_option( 'comments_notify' ) ); ?> />
    187197<?php _e( 'Anyone posts a comment' ); ?> </label>
    188198<br />
     199
    189200<label for="moderation_notify">
    190201<input name="moderation_notify" type="checkbox" id="moderation_notify" value="1" <?php checked( '1', get_option( 'moderation_notify' ) ); ?> />
    191202<?php _e( 'A comment is held for moderation' ); ?> </label>
    printf( __( 'Comments should be displayed with the %s comments at the top of eac 
    203214<input name="comment_moderation" type="checkbox" id="comment_moderation" value="1" <?php checked( '1', get_option( 'comment_moderation' ) ); ?> />
    204215<?php _e( 'Comment must be manually approved' ); ?> </label>
    205216<br />
     217
    206218<label for="comment_previously_approved"><input type="checkbox" name="comment_previously_approved" id="comment_previously_approved" value="1" <?php checked( '1', get_option( 'comment_previously_approved' ) ); ?> /> <?php _e( 'Comment author must have a previously approved comment' ); ?></label>
    207219</fieldset></td>
    208220</tr>