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

[dashaluna]

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

[dashaluna]

Connection Information admin form

[dashaluna]

General Settings admin form

[swissspidy]

Related / possible duplicate of: #36973

[dashaluna]

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

[joedolson]

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.

[afercia]

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.

[ibdz]

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

[jorbin]

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.

[jorbin]

#36973 was marked as a duplicate.