Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 22 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 3 years ago.
54302.1.diff (6.8 KB) - added by sabernhardt 3 years ago.
network-config-labels-htaccess.png (61.0 KB) - added by sabernhardt 3 years ago.
network setup (.htaccess, with field for missing authentication keys)
network-config-labels-iis.png (37.2 KB) - added by sabernhardt 3 years ago.
network setup (web.config)
setup-config.png (27.7 KB) - added by sabernhardt 3 years ago.
wp-config.php setup
54302.2.diff (6.2 KB) - added by sabernhardt 2 years ago.
non-visual labels
Capture d’écran 2022-07-20 à 20.16.34.png (199.8 KB) - added by audrasjb 2 years ago.

Download all attachments as: .zip

Change History (29)

@sabernhardt
3 years ago

#1 @sabernhardt
3 years 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
3 years 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
3 years 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 3 years ago by sabernhardt (previous) (diff)

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


3 years ago

#5 @ryokuhi
3 years 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.


3 years ago

#7 @joedolson
3 years 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
3 years ago

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

@sabernhardt
3 years ago

@sabernhardt
3 years ago

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

@sabernhardt
3 years ago

network setup (web.config)

@sabernhardt
3 years ago

wp-config.php setup

#9 @sabernhardt
3 years 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 3 years ago by sabernhardt (previous) (diff)

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


2 years ago

#11 @sabernhardt
2 years ago

  • Milestone changed from 6.0 to 6.1

@sabernhardt
2 years ago

non-visual labels

#12 @sabernhardt
2 years 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.


2 years ago

#14 @joedolson
2 years 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
2 years ago

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

Self assigning for review/testing.

#16 @audrasjb
2 years 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
2 years 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
2 years ago

  • Component changed from General to Administration

#20 @audrasjb
2 years 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.


22 months ago

Note: See TracTickets for help on using tickets.