From bf61851c38eab893c32c6505c1979b881ba5aebc Mon Sep 17 00:00:00 2001
From: Jb Audras <audrasjb@git.wordpress.org>
Date: Thu, 21 Jul 2022 09:02:52 +0000
Subject: [PATCH] Administration: Add labels to read-only form fields.

This changeset improves admin forms accessibility by adding labels to the following read-only form fields:

- Network setup screen: new visible label to the four textareas for code users need to paste into their wp-config file and the server configuration file (web.config or .htaccess).
- `setup-config.php`: new visible label to one textarea for code to include in the `wp-config` file manually.
- Admin toolbar: adds an `arial-label` attribute to the old "shortlink" feature (not used anymore but still activable by plugins).

Props sabernhardt, audrasjb, ryokuhi, joedolson.
Fixes #54302.


git-svn-id: https://develop.svn.wordpress.org/trunk@53745 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/forms.css        |  5 ++++
 src/wp-admin/includes/network.php | 44 +++++++++++++++++++++++++------
 src/wp-admin/setup-config.php     | 12 ++++++---
 src/wp-includes/admin-bar.php     |  2 +-
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 6db6d188a8..ff8de1c4f9 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1130,6 +1130,11 @@ table.form-table td .updated p {
 	max-width: 60%;
 }
 
+.configuration-rules-label {
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
 /*------------------------------------------------------------------------------
    Credentials check dialog for Install and Updates
 ------------------------------------------------------------------------------*/
diff --git a/src/wp-admin/includes/network.php b/src/wp-admin/includes/network.php
index ae3e906fcc..aef0b2e4b6 100644
--- a/src/wp-admin/includes/network.php
+++ b/src/wp-admin/includes/network.php
@@ -470,7 +470,7 @@ function network_step2( $errors = false ) {
 	}
 	?>
 	<ol>
-		<li><p>
+		<li><p id="network-wpconfig-rules-description">
 		<?php
 		printf(
 			/* translators: 1: wp-config.php, 2: Location of wp-config file, 3: Translated version of "That's all, stop editing! Happy publishing." */
@@ -486,7 +486,16 @@ function network_step2( $errors = false ) {
 		);
 		?>
 		</p>
-		<textarea class="code" readonly="readonly" cols="100" rows="7">
+		<p class="configuration-rules-label"><label for="network-wpconfig-rules">
+			<?php
+			printf(
+				/* translators: %s: File name (wp-config.php, .htaccess or web.config). */
+				__( 'Network configuration rules for %s' ),
+				'<code>wp-config.php</code>'
+			);
+			?>
+		</label></p>
+		<textarea id="network-wpconfig-rules" class="code" readonly="readonly" cols="100" rows="7" aria-describedby="network-wpconfig-rules-description">
 define( 'MULTISITE', true );
 define( 'SUBDOMAIN_INSTALL', <?php echo $subdomain_install ? 'true' : 'false'; ?> );
 define( 'DOMAIN_CURRENT_SITE', '<?php echo $hostname; ?>' );
@@ -526,7 +535,7 @@ define( 'BLOG_ID_CURRENT_SITE', 1 );
 			}
 			$num_keys_salts = count( $keys_salts );
 			?>
-		<p>
+		<p id="network-wpconfig-authentication-description">
 			<?php
 			if ( 1 === $num_keys_salts ) {
 				printf(
@@ -544,7 +553,8 @@ define( 'BLOG_ID_CURRENT_SITE', 1 );
 			?>
 			<?php _e( 'To make your installation more secure, you should also add:' ); ?>
 		</p>
-		<textarea class="code" readonly="readonly" cols="100" rows="<?php echo $num_keys_salts; ?>"><?php echo esc_textarea( $keys_salts_str ); ?></textarea>
+		<p class="configuration-rules-label"><label for="network-wpconfig-authentication"><?php _e( 'Network configuration authentication keys' ); ?></label></p>
+		<textarea id="network-wpconfig-authentication" class="code" readonly="readonly" cols="100" rows="<?php echo $num_keys_salts; ?>" aria-describedby="network-wpconfig-authentication-description"><?php echo esc_textarea( $keys_salts_str ); ?></textarea>
 			<?php
 		}
 		?>
@@ -603,7 +613,7 @@ define( 'BLOG_ID_CURRENT_SITE', 1 );
 </configuration>
 ';
 
-			echo '<li><p>';
+			echo '<li><p id="network-webconfig-rules-description">';
 			printf(
 				/* translators: 1: File name (.htaccess or web.config), 2: File path. */
 				__( 'Add the following to your %1$s file in %2$s, <strong>replacing</strong> other WordPress rules:' ),
@@ -615,7 +625,16 @@ define( 'BLOG_ID_CURRENT_SITE', 1 );
 			echo '<p><strong>' . __( 'Warning:' ) . ' ' . __( 'Subdirectory networks may not be fully compatible with custom wp-content directories.' ) . '</strong></p>';
 		}
 		?>
-		<textarea class="code" readonly="readonly" cols="100" rows="20"><?php echo esc_textarea( $web_config_file ); ?></textarea>
+			<p class="configuration-rules-label"><label for="network-webconfig-rules">
+				<?php
+				printf(
+					/* translators: %s: File name (wp-config.php, .htaccess or web.config). */
+					__( 'Network configuration rules for %s' ),
+					'<code>web.config</code>'
+				);
+				?>
+			</label></p>
+			<textarea id="network-webconfig-rules" class="code" readonly="readonly" cols="100" rows="20" aria-describedby="network-webconfig-rules-description"><?php echo esc_textarea( $web_config_file ); ?></textarea>
 		</li>
 	</ol>
 
@@ -656,7 +675,7 @@ RewriteRule . index.php [L]
 
 EOF;
 
-		echo '<li><p>';
+		echo '<li><p id="network-htaccess-rules-description">';
 		printf(
 			/* translators: 1: File name (.htaccess or web.config), 2: File path. */
 			__( 'Add the following to your %1$s file in %2$s, <strong>replacing</strong> other WordPress rules:' ),
@@ -668,7 +687,16 @@ EOF;
 			echo '<p><strong>' . __( 'Warning:' ) . ' ' . __( 'Subdirectory networks may not be fully compatible with custom wp-content directories.' ) . '</strong></p>';
 		}
 		?>
-		<textarea class="code" readonly="readonly" cols="100" rows="<?php echo substr_count( $htaccess_file, "\n" ) + 1; ?>"><?php echo esc_textarea( $htaccess_file ); ?></textarea>
+			<p class="configuration-rules-label"><label for="network-htaccess-rules">
+				<?php
+				printf(
+					/* translators: %s: File name (wp-config.php, .htaccess or web.config). */
+					__( 'Network configuration rules for %s' ),
+					'<code>.htaccess</code>'
+				);
+				?>
+			</label></p>
+			<textarea id="network-htaccess-rules" class="code" readonly="readonly" cols="100" rows="<?php echo substr_count( $htaccess_file, "\n" ) + 1; ?>" aria-describedby="network-htaccess-rules-description"><?php echo esc_textarea( $htaccess_file ); ?></textarea>
 		</li>
 	</ol>
 
diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php
index 86c2fbce7f..b1b7a16ccb 100644
--- a/src/wp-admin/setup-config.php
+++ b/src/wp-admin/setup-config.php
@@ -393,13 +393,13 @@ switch ( $step ) {
 		if ( ! is_writable( ABSPATH ) ) :
 			setup_config_display_header();
 			?>
-	<p>
+<p>
 			<?php
 			/* translators: %s: wp-config.php */
 			printf( __( 'Unable to write to %s file.' ), '<code>wp-config.php</code>' );
 			?>
 </p>
-<p>
+<p id="wp-config-description">
 			<?php
 			/* translators: %s: wp-config.php */
 			printf( __( 'You can create the %s file manually and paste the following text into it.' ), '<code>wp-config.php</code>' );
@@ -411,7 +411,13 @@ switch ( $step ) {
 			}
 			?>
 </p>
-<textarea id="wp-config" cols="98" rows="15" class="code" readonly="readonly"><?php echo $config_text; ?></textarea>
+<p class="configuration-rules-label"><label for="wp-config">
+			<?php
+			/* translators: %s: wp-config.php */
+			printf( __( 'Configuration rules for %s:' ), '<code>wp-config.php</code>' );
+			?>
+	</label></p>
+<textarea id="wp-config" cols="98" rows="15" class="code" readonly="readonly" aria-describedby="wp-config-description"><?php echo $config_text; ?></textarea>
 <p><?php _e( 'After you&#8217;ve done that, click &#8220;Run the installation&#8221;.' ); ?></p>
 <p class="step"><a href="<?php echo $install; ?>" class="button button-large"><?php _e( 'Run the installation' ); ?></a></p>
 <script>
diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php
index 274212acf7..5304b45ca8 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -724,7 +724,7 @@ function wp_admin_bar_shortlink_menu( $wp_admin_bar ) {
 		return;
 	}
 
-	$html = '<input class="shortlink-input" type="text" readonly="readonly" value="' . esc_attr( $short ) . '" />';
+	$html = '<input class="shortlink-input" type="text" readonly="readonly" value="' . esc_attr( $short ) . '" aria-label="' . __( 'Shortlink' ) . '" />';
 
 	$wp_admin_bar->add_node(
 		array(