Make WordPress Core

Opened 9 years ago

Last modified 6 weeks ago

#37484 new enhancement

Make form in request_filesystem_credentials() in line with WP admin form styling / HTML structure / security

Reported by: dashaluna's profile dashaluna Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Upgrade/Install Keywords: needs-patch has-screenshots
Focuses: ui, administration Cc:

Description (last modified by sabernhardt)

Currently, the Connection Information form output by request_filesystem_credentials() looks very sad and doesn't reflect the admin form HTML structure and style.

This is how it looks: Connection Information admin form

It would be great if it can be standardised to look like WP admin settings UI, i.e. General Settings admin form

While at it, it would be great to secure the form code with escape family functions (esc_attr, esc_html and so on).

Attachments (2)

Screen Shot 2016-07-27 at 13.41.23.png (217.9 KB) - added by dashaluna 9 years ago.
Connection Information admin form
Screen Shot 2016-07-27 at 13.41.52.png (380.7 KB) - added by dashaluna 9 years ago.
General Settings admin form

Download all attachments as: .zip

Change History (14)

@dashaluna
9 years ago

Connection Information admin form

@dashaluna
9 years ago

General Settings admin form

#1 @swissspidy
9 years ago

  • Component changed from Formatting to Upgrade/Install

Related / possible duplicate of: #36973

#2 @dashaluna
9 years ago

Oops, sorry I got confused how to add images in the description and now I can't edit it :( Added images as attachments.

#3 @SergeyBiryukov
9 years ago

  • Description modified (diff)

#4 @joedolson
9 years ago

On the accessibility front, these fields should probably be changed to stop using implicit labels, but I don't see any other a11y issues from reviewing the code.

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


6 years ago

#8 @afercia
6 years ago

  • Focuses accessibility removed
  • Keywords ui-feedback added
  • Milestone set to Future Release

Reviewed during today's accessibility bug-scrub. Agreed this form would need some love. Not sure there are important accessibility concerns here. Removing the a11y focus and setting to Future Release.

This ticket was mentioned in Slack in #design by estelaris. View the logs.


5 years ago

#10 @ibdz
5 years ago

  • Keywords needs-patch has-screenshots added; ui-feedback removed

In design triage today, we agreed that this form should keep consistency with other admin forms (Column patterns).

#11 @sabernhardt
6 weeks ago

  • Description modified (diff)

This ticket was mentioned in Slack in #core by jorbin. View the logs.


6 weeks ago

#13 @jorbin
6 weeks ago

From #36973 (note, the first link is now a 404)

As reported by @melchoyce in https://github.com/obenland/shiny-updates/issues/100, the filesystem credentials dialog needs some love to improve accessibility and the overall design.

Here's how it could look like: https://cloudup.com/cnvj5NqMefR

Her notes:

Update modal style to bring more in-line with other wp-admin modals — like including an "x" for closing (even though there's also a cancel button)
Make "Proceed" primary
Also consider changing "proceed" to something more descriptive — maybe connect? Proceed might be okay, it's just such a weird-sounding word. Maybe switch the "proceed" in both the description and the button to "continue."
"This password will not be..." could stand to be decreased in size just a little and made a lighter grey, to match descriptions on the settings pages. At the very least, the line-height should decrease.
"Authentication Keys" is at the same level of hierarchy as the field labels. It should probably be bigger, since it's a header above the labels.
Additionally: the modal is really tall for mockup purposes, but would ideally be whatever height we normally max modals out at. Any content not visible because of height would be scrollable in the modal, like we do in others.

#14 @jorbin
6 weeks ago

#36973 was marked as a duplicate.

Note: See TracTickets for help on using tickets.