Make WordPress Core

Opened 7 years ago

Closed 11 months ago

#40470 closed defect (bug) (fixed)

WordPress installation steps - button press differences

Reported by: xavortm's profile xavortm Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Upgrade/Install Keywords: has-patch has-screenshots commit
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 (6)

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

Download all attachments as: .zip

Change History (23)

#1 @swissspidy
7 years ago

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

#2 @afercia
7 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.


7 years ago

#4 @rianrietveld
7 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
7 years ago

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

#6 @menakas
7 years ago

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

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

Before pic for New installation

@menakas
7 years ago

After pic for New installation

@menakas
7 years ago

Before pic for Existing installation

@menakas
7 years ago

After pic for Existing installation

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


6 years ago

#9 @afercia
6 years ago

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

#10 @johnbillion
6 years 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
5 years 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.

#12 follow-up: @drw158
5 years ago

Can we add functionality to this a element so that it can be activated by pressing the spacebar key?

#13 in reply to: ↑ 12 @afercia
4 years ago

Replying to drw158:

Can we add functionality to this a element so that it can be activated by pressing the spacebar key?

Hacking native HTML elements and altering their expected behavior would be far from ideal. Links are links, buttons are buttons. They have different interaction and semantics. The visual look should reflect their different nature to properly communicate the expected interaction.

Historically, core used the same styling for buttons and links. Then, it tried to remediate introducing the button-link style (which is called "tertiary" in the Gutenberg context) and using some ARIA attributes. Also, several UI controls in core are links that behave like buttons when JavaScript is on (typically via some AJAX) while they behave like links (triggering a post request) when JavaScript is off. All this increases the potential confusion for keyboard and assistive technology users.

I'd tend to think core came to a point where there's now the need to greatly simplify, reconsider this legacy approach, and just make buttons look like buttons and links look like links. I do realize some "action links" need to be styled differently from standard links. I'd suggest to explore a new style for them. Something that clearly identifies them as links, while giving them some visual prominence compared to default links.

#14 @joedolson
13 months ago

  • Milestone changed from Future Release to 6.3
  • Owner set to joedolson
  • Status changed from new to accepted

#15 @joedolson
12 months ago

  • Keywords commit added; needs-design removed

I think that this is a good solution. Regarding @johnbillion's concerns about target size:

The link renders at ~38x19 pixels. While this is well below the AAA requirements of 44x44, it's easily beyond the minimum target size for AA of 24x24. Additionally, as it is the only clickable surface on the screen, there is no risk of accidentally clicking anything else. While target size is about making a control easier to activate, it's also about making it easier to avoid errors, which are not a risk here.

I do think that we should establish a design for link controls that need increased attention, but I think that needs to be done on a holistic basis.

This ticket is not the place to try and establish a WordPress-wide standard for this, and I don't think it helps us in the long-term to create a one-off style for this page.

I'm refreshing the patch and recommending this for commit.

@joedolson
12 months ago

Refreshed patch

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


11 months ago

#17 @joedolson
11 months ago

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

In 55933:

Upgrade/Install: Log in link should look like a link.

Change the log in link that appears after completing installation so that it does not use the button styling. Links should look like links.

Props xavortm, menakas, afercia, rianrietveld, johnbillion, drw158, joedolson.
Fixes #40470.

Note: See TracTickets for help on using tickets.