Ticket #31354: 31354_hide.patch

src/wp-admin/includes/options.php

@@ -16 +16 @@
         ?>
         <script>
         (function($){
-                var parent = $( '#show_avatars' ),
-                        children = $( '.avatar-settings' );
-                parent.on( 'change', function(){
-                        children.toggleClass( 'hide-if-js', ! this.checked );
-                });
+                function toggleVisibility(parentCheckboxId, childInputElement){
+                        var parentCheckbox = $(parentCheckboxId ),
+                                childrenInputs = $(childInputElement );
+                                ariaLiveRegion = $('#aria-live-region');
+
+                        // Set visibility based on checkbox default state.
+                        childrenInputs.toggleClass( 'hide-if-js', ! parentCheckbox.prop( 'checked' ) );
+                        parentCheckbox.attr( 'aria-expanded', parentCheckbox.prop( 'checked' ) );
+                        // Hide the children if the parent is unchecked.
+                        parentCheckbox.on( 'change', function(){
+                                childrenInputs.toggleClass( 'hide-if-js', ! this.checked );
+                                $(this).attr( 'aria-expanded', this.checked);
+
+                                // Announce the change to screen readers.
+                                var message = this.checked ? 'Checked Checkbox, Dependent fields are now available below.' : 'Unchecked Checkbox, Dependent fields are now hidden.';
+                                ariaLiveRegion.text( message );
+                        });
+                }
+
+                // Call function for each expandable section of discussion settings.
+                toggleVisibility('#close_comments_for_old_posts', '.close-comments-setting' );
+                toggleVisibility('#thread_comments', '.thread-comments-setting' );
+                toggleVisibility('#page_comments', '.pagination-setting' );
+                toggleVisibility( '#show_avatars', '.avatar-settings' );
         })(jQuery);
         </script>
         <?php

src/wp-admin/options-discussion.php

@@ -39 +39 @@
 <div class="wrap">
 <h1><?php echo esc_html( $title ); ?></h1>
 
+    <!-- ARIA live region for screen readers -->
+    <div id="aria-live-region" aria-live="polite" class="screen-reader-text"></div>
+
+
 <form method="post" action="options.php">
 <?php settings_fields( 'discussion' ); ?>
 
@@ -89 +93 @@
 
 <label for="close_comments_for_old_posts">
 <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' ) ); ?> />
-<?php
-printf(
-        /* translators: %s: Number of days. */
-        __( 'Automatically close comments on posts older than %s days' ),
-        '</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" />'
-);
-?>
+<?php _e("Automatically close comments for old posts" )?>
+</label>
+<br />
+
+<label for="close_comments_days_old" class="close-comments-setting" >
+<?php _e('Number of days to keep old comments: ')?>
+<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" />
 </label>
 <br />
 
@@ -107 +111 @@
 
 <label for="thread_comments">
 <input name="thread_comments" type="checkbox" id="thread_comments" value="1" <?php checked( '1', get_option( 'thread_comments' ) ); ?> />
+<?php _e( 'Enable threaded (nested) comments' ); ?>
+</label>
+<br />
+
+<label for="thread_comments_depth" class="thread-comments-setting">
 <?php
 /**
  * Filters the maximum depth of threaded/nested comments.
@@ -117 +126 @@
  */
 $maxdeep = (int) apply_filters( 'thread_comments_depth_max', 10 );
 
-$thread_comments_depth = '</label> <label for="thread_comments_depth"><select name="thread_comments_depth" id="thread_comments_depth">';
+$thread_comments_depth = '<select name="thread_comments_depth" id="thread_comments_depth">';
 for ( $i = 2; $i <= $maxdeep; $i++ ) {
         $thread_comments_depth .= "<option value='" . esc_attr( $i ) . "'";
         if ( (int) get_option( 'thread_comments_depth' ) === $i ) {
@@ -128 +137 @@
 $thread_comments_depth .= '</select>';
 
 /* translators: %s: Number of levels. */
-printf( __( 'Enable threaded (nested) comments %s levels deep' ), $thread_comments_depth );
+printf( __( 'Number of levels for threaded (nested) comments: %s' ), $thread_comments_depth );
 
 ?>
 </label>
 <br />
+</fieldset></td>
+</tr>
+
+<tr>
+<th scope="row"><?php _e( 'Comment Pagination' ); ?></th>
+<td><fieldset><legend class="screen-reader-text"><span>
+        <?php
+        /* translators: Hidden accessibility text. */
+        _e( 'Comment Pagination' );
+        ?>
+</span></legend>
 <label for="page_comments">
 <input name="page_comments" type="checkbox" id="page_comments" value="1" <?php checked( '1', get_option( 'page_comments' ) ); ?> />
-<?php
-$default_comments_page = '</label> <label for="default_comments_page"><select name="default_comments_page" id="default_comments_page"><option value="newest"';
-if ( 'newest' === get_option( 'default_comments_page' ) ) {
-        $default_comments_page .= ' selected="selected"';
-}
-$default_comments_page .= '>' . __( 'last' ) . '</option><option value="oldest"';
-if ( 'oldest' === get_option( 'default_comments_page' ) ) {
-        $default_comments_page .= ' selected="selected"';
-}
-$default_comments_page .= '>' . __( 'first' ) . '</option></select>';
-printf(
-        /* translators: 1: Form field control for number of top level comments per page, 2: Form field control for the 'first' or 'last' page. */
-        __( 'Break comments into pages with %1$s top level comments per page and the %2$s page displayed by default' ),
-        '</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" />',
-        $default_comments_page
-);
-?>
+<?php _e("Break comments into pages" )?>
 </label>
 <br />
-<label for="comment_order">
-<?php
 
-$comment_order = '<select name="comment_order" id="comment_order"><option value="asc"';
-if ( 'asc' === get_option( 'comment_order' ) ) {
-        $comment_order .= ' selected="selected"';
-}
-$comment_order .= '>' . __( 'older' ) . '</option><option value="desc"';
-if ( 'desc' === get_option( 'comment_order' ) ) {
-        $comment_order .= ' selected="selected"';
-}
-$comment_order .= '>' . __( 'newer' ) . '</option></select>';
+<label for="comments_per_page" class="pagination-setting">
+<?php _e('Top level comments per page: ')?>
+<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" />
+</label>
+<br />
 
-/* translators: %s: Form field control for 'older' or 'newer' comments. */
-printf( __( 'Comments should be displayed with the %s comments at the top of each page' ), $comment_order );
+<label for="default_comments_page" class="pagination-setting"><?php _e('Comments page to display by default: '); ?>
+<select name="default_comments_page" id="default_comments_page">
+        <option value="newest" <?php selected( 'newest', get_option( 'default_comments_page' ) ); ?>><?php _e('last page'); ?></option>
+        <option value="oldest" <?php selected( 'oldest', get_option( 'default_comments_page' ) ); ?>><?php _e('first page'); ?></option>
+</select>
+</label>
+<br />
 
-?>
+<label for="comment_order" class="pagination-setting">
+<?php _e('Comments to display at the top of each page: ')?>
+<select name="comment_order" id="comment_order">
+        <option value="asc" <?php selected( 'asc', get_option( 'comment_order' ) ); ?>><?php _e('older'); ?></option>
+        <option value="desc" <?php selected( 'desc', get_option( 'comment_order' ) ); ?>><?php _e('newer'); ?></option>
+</select>
 </label>
+<br />
 </fieldset></td>
 </tr>
+
 <tr>
 <th scope="row"><?php _e( 'Email me whenever' ); ?></th>
 <td><fieldset><legend class="screen-reader-text"><span>
@@ -186 +196 @@
 <input name="comments_notify" type="checkbox" id="comments_notify" value="1" <?php checked( '1', get_option( 'comments_notify' ) ); ?> />
 <?php _e( 'Anyone posts a comment' ); ?> </label>
 <br />
+
 <label for="moderation_notify">
 <input name="moderation_notify" type="checkbox" id="moderation_notify" value="1" <?php checked( '1', get_option( 'moderation_notify' ) ); ?> />
 <?php _e( 'A comment is held for moderation' ); ?> </label>
@@ -203 +214 @@
 <input name="comment_moderation" type="checkbox" id="comment_moderation" value="1" <?php checked( '1', get_option( 'comment_moderation' ) ); ?> />
 <?php _e( 'Comment must be manually approved' ); ?> </label>
 <br />
+
 <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>
 </fieldset></td>
 </tr>