Add labels to read-only form fields

[sabernhardt]

#53142 added label tags on the Permalinks settings screen, but there are still some more read-only form fields without a label.

• The network setup screen has four textareas for code users need to paste into their wp-config file and the server configuration file (web.config or .htaccess).
• When failing to create a wp-config.php file automatically, setup-config.php displays the code to include in the wp-config manually.
• The admin toolbar can have a feature that shows a shortlink field when viewing a post. (This was only activated in core in 2011, from WP 3.1 to 3.3, and deactivated in r19519. However, the code is still available for plugins.)

[sabernhardt]

Most of these can have label tags, but I had console errors when adding a non-visual label for the toolbar shortlink input. So I used an ARIA label instead for that one.

To view the toolbar shortlink, you need this in a plugin (or in class-wp-admin-bar.php):

add_action( 'admin_bar_menu', 'wp_admin_bar_shortlink_menu', 90 );

[audrasjb]

For the first textarea, I may be wrong but it looks like you're using this as a label:

'<code>/* ' . __( 'That&#8217;s all, stop editing! Happy publishing.' ) . ' */</code>'

I'm not convinced that it's the best option for this textarea as it's not a description of the goal of this field 🤔

[sabernhardt]

That's part of the proposed label text for the first textarea. I simply wrapped the full instruction for each of these in network setup:

Add the following to your wp-config.php file in [location] above the line reading /* That’s all, stop editing! Happy publishing. */:

These unique authentication keys are also missing from your wp-config.php file. To make your installation more secure, you should also add:

Add the following to your web.config file in [location], replacing other WordPress rules:

Add the following to your .htaccess file in [location], replacing other WordPress rules:

And the setup-config label is similar:

You can create the wp-config.php file manually and paste the following text into it.

Of course, there might be a better way :)

[ryokuhi]

We reviewed the ticket today during the weekly Accessibility Team's bug-scrub.
The ticket doesn't seem to require a lot of work, so it can be solved in time for the next major release.
To improve the wording of the labels, this ticket will probably benefit from a little copy review.

[joedolson]

The copy for the labels needs to state the content of the fields; this patch uses text that would serve better as extra context via aria-describedby.

I think the labels should be simple: "Network Configuration Rules for wp-config.php", "Network Configuration Authentication Keys", and "Network Configuration rules for [htaccess/nginx config]"

These fields are almost exclusively for pretty high-level users, so they don't need to be elaborate.

The shortlink label text is fine as is.

[sabernhardt]

network setup (.htaccess, with field for missing authentication keys)

[sabernhardt]

network setup (web.config)

[sabernhardt]

wp-config.php setup

[sabernhardt]

Network setup: 54302.1.diff​ uses one text string for the authentication keys and another string that specifies each of the three files.

Network configuration authentication keys

Network configuration rules for [wp-config.php / .htaccess / web.config]

wp-config setup

Configuration rules for wp-config.php:

(And the toolbar shortlink still has the same aria-label)

[sabernhardt]

non-visual labels

[sabernhardt]

I changed my mind about showing the labels on network setup and setup config pages. 54302.2.diff​ hides these new labels with the screen-reader-text class, but the text is the same as in the previous patch.

[joedolson]

Following discussion in the Accessibility bug scrub, we're preferring the version of the patch with visible labels, preferring to add visible labels on principle, since we can't identify a strong argument for hiding them.

Assuming that copy review is OK, I'd like to commit this.

[audrasjb]

Self assigning for review/testing.

[audrasjb]

These changes (with visual label) look good to me.
I'll put together a GitHub PR, just to make sure the patch applies against trunk and passes unit tests.

Trac ticket: https://core.trac.wordpress.org/ticket/54302

[audrasjb]

I reviewed each new string and all looks good to me.
Marking for commit.

[audrasjb]

In 53745:

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.

Committed in https://core.trac.wordpress.org/changeset/53745