WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 8 months ago

#40470 new defect (bug)

WordPress installation steps - button press differences

Reported by: xavortm Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Upgrade/Install Keywords: has-patch has-screenshots needs-design
Focuses: ui, accessibility Cc:

Description

Something that has been bothering me for every single WP install I do - the first two buttons in the step - Begin WP Installation, Input settings and Update wp-config.php are happening by typing, pressing tab and space to click the "next" buttons, but once I get to the "All done, now you can login" screen I can't use space to go next.

This is closely related to #26504 , as well as some older tickets that were closed in favor of the mentioned one, but since the login screen is not discussed there but the inner dashboard, I thought that this can be separated in a new ticket. (maybe "good first ticket"?)

http://i.imgur.com/VSzBXvC.png

As mentioned above, to replicate: Clone WP core in new folder and install it through the browser, follow all steps and go to the next by pressing "space" on the final action buttons. Only the last step doesn't work with space but with enter instead.

Attachments (5)

40470.patch (939 bytes) - added by menakas 2 years ago.
Removed button classes for Log In - 2 cases - Already installed & just installed
NewInstallBefore.png (17.1 KB) - added by menakas 2 years ago.
Before pic for New installation
NewInstallAfter.png (17.0 KB) - added by menakas 2 years ago.
After pic for New installation
AlreadyInstallBefore.png (13.5 KB) - added by menakas 2 years ago.
Before pic for Existing installation
AlreadyInstallAfter.png (13.2 KB) - added by menakas 2 years ago.
After pic for Existing installation

Download all attachments as: .zip

Change History (16)

#1 @swissspidy
2 years ago

  • Component changed from General to Upgrade/Install
  • Keywords needs-patch added
  • Version trunk deleted

#2 @afercia
2 years ago

That's because it's actually a link that looks like a button:
<a href="<?php echo esc_url( wp_login_url() ); ?>" class="button button-large"><?php _e( 'Log In' ); ?></a>

There are a lot of such links in the admin, also in the context of the installation process, e.g.:
<a href="<?php echo $install; ?>" class="button button-large"><?php _e( 'Run the install' ); ?></a>

Links can be activated pressing Enter, while real buttons can be activated pressing either Enter or Spacebar, that's native behaviour in all browsers. Regardless, I share the concern about potential confusion resulting for the design, as basically the current styling makes controls that behave differently, look the same.

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


2 years ago

#4 @rianrietveld
2 years ago

  • Milestone changed from Awaiting Review to Future Release

Discussed this in the wpa11y meeting:

  • Using a link is correct, but the design should be changed.
  • "Log in" one in the final step could be changed to look like a link. It's the final step. No need to be consistent.
  • There are no form fields on the page, so there's no reason to include any implication that this is "form-like".

@menakas
2 years ago

Removed button classes for Log In - 2 cases - Already installed & just installed

#6 @menakas
2 years ago

  • Keywords has-patch needs-unit-tests added; needs-patch removed

#7 @swissspidy
2 years ago

  • Keywords needs-screenshots added; needs-unit-tests removed

This isn't really something we do/should have unit tests for.

However, screenshots highlighting before / after state would be nice.

@menakas
2 years ago

Before pic for New installation

@menakas
2 years ago

After pic for New installation

@menakas
2 years ago

Before pic for Existing installation

@menakas
2 years ago

After pic for Existing installation

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


20 months ago

#9 @afercia
20 months ago

  • Focuses ui added
  • Keywords has-screenshots added; needs-screenshots removed
  • Milestone changed from Future Release to 5.0

#10 @johnbillion
11 months ago

  • Keywords 2nd-opinion added
  • Milestone changed from 5.0 to 5.1

The phrase "Log In" as a link instead of a button is quite a small target to hit with a mouse pointer. I think that in itself is an accessibility concern. Thoughts? Does the text need to be made larger?

#11 @afercia
8 months ago

  • Keywords needs-design added; 2nd-opinion removed
  • Milestone changed from 5.1 to Future Release

Looking back at this, I'd tend to think WordPress need to stop styling links as buttons. We need a new design for links that need a larger clickable area without having to look like buttons. Going to add the need-design keyword and move to Future Release.

Note: See TracTickets for help on using tickets.