Make WordPress Core

Opened 20 months ago

Closed 10 months ago

Last modified 8 months ago

#54302 closed defect (bug) (fixed)

Add labels to read-only form fields

Reported by: sabernhardt's profile sabernhardt Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit has-screenshots
Focuses: accessibility, administration, coding-standards Cc:

Description

#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.)

Attachments (7)

54302.patch (5.0 KB) - added by sabernhardt 20 months ago.
54302.1.diff (6.8 KB) - added by sabernhardt 18 months ago.
network-config-labels-htaccess.png (61.0 KB) - added by sabernhardt 18 months ago.
network setup (.htaccess, with field for missing authentication keys)
network-config-labels-iis.png (37.2 KB) - added by sabernhardt 18 months ago.
network setup (web.config)
setup-config.png (27.7 KB) - added by sabernhardt 18 months ago.
wp-config.php setup
54302.2.diff (6.2 KB) - added by sabernhardt 12 months ago.
non-visual labels
Capture d’écran 2022-07-20 à 20.16.34.png (199.8 KB) - added by audrasjb 10 months ago.

Download all attachments as: .zip

Change History (29)

@sabernhardt
20 months ago

#1 @sabernhardt
20 months ago

  • Keywords has-patch added

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 );

#2 @audrasjb
20 months ago

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 🤔

#3 @sabernhardt
20 months ago

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 :)

Last edited 20 months ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


20 months ago

#5 @ryokuhi
20 months ago

  • Keywords needs-copy-review added
  • Milestone changed from Awaiting Review to 5.9

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


19 months ago

#7 @joedolson
19 months ago

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.

#8 @sabernhardt
19 months ago

  • Keywords needs-refresh added
  • Milestone changed from 5.9 to 6.0

@sabernhardt
18 months ago

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

@sabernhardt
18 months ago

network setup (web.config)

@sabernhardt
18 months ago

wp-config.php setup

#9 @sabernhardt
18 months ago

  • Keywords needs-refresh removed

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)

Last edited 18 months ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


14 months ago

#11 @sabernhardt
14 months ago

  • Milestone changed from 6.0 to 6.1

@sabernhardt
12 months ago

non-visual labels

#12 @sabernhardt
12 months ago

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.

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


11 months ago

#14 @joedolson
11 months ago

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.

#15 @audrasjb
11 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for review/testing.

#16 @audrasjb
10 months ago

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.

#18 @audrasjb
10 months ago

  • Keywords commit has-screenshots added; needs-copy-review removed

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

#19 @audrasjb
10 months ago

  • Component changed from General to Administration

#20 @audrasjb
10 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

This ticket was mentioned in Slack in #accessibility by abhanonstopnews. View the logs.


8 months ago

Note: See TracTickets for help on using tickets.