Change 'previous'/'next' buttons into text links in Configuration Wizard

[luckickken]

During the design meeting of 21-02-2019 we've decided that the 'previous' and 'next' buttons in the Configuration Wizard should be replaced by regular text links. This for two reasons:

1. The styling of those specific buttons is inconsistent with our design system (as in: they're not used anywhere else)
2. The primary button ('next') conflicts too much with other possible primary actions on the page

Current situation

The screenshot below illustrates this situation:

New situation

In the new situation the buttons are replaced by regular text links, where 'Previous is aligned to the left and 'Next' aligned to the right. See design below:

@IreneStr / @moorscode could you assign the correct labels for this? Not sure which are relevant for you.

[afercia]

where 'Previous is aligned to the left and 'Next' aligned to the right

@luckickken / design team: I'd recommend to reconsider the point above and place the two links close to each other. Pretty important for persons with low vision / reduced vision field who use very high zoom levels or screen magnifiers.

Quoting from the latest W3C "Accessibility Requirements for People with Low Vision" draft
(Editor's Draft 10 January 2019, at the time of writing)
http://w3c.github.io/low-vision-a11y-tf/requirements.html#proximity-of-related-information

Proximity of Related Information

People with limited field of vision or who use large text have little in their field of view at one time. If related information is not close together, they can have trouble knowing about it, seeing it, and using it. In most cases, it is best if:

• Related information — such as labels and controls, instructions for data fields, matching tests in two columns, and feedback — is in close proximity.
• Feedback is in close proximity to the user’s visual focus.
• Dialog boxes and other such pop-up messages appear over the users' point of regard.
• Users are informed of new information that may be outside of their view — such as a new browser tab opening in the background.

For WP core, see also https://core.trac.wordpress.org/ticket/40822

[Djennez]

I agree with @afercia and question the placement overall. Usually, with pagination, I see the next and previous buttons alongside the page numbers. In these examples (and our current product), the "page numbers" are at the top and the next and previous buttons at the bottom. Do we want to merge these together so that they compliment each other, instead of looking like seperate elements?

[luckickken]

@afercia I'm not opposed to aligning them side by side, but I want @jdevalk opinion on this.

@Djennez This issue is specifically about solving the problems I stated above. And specifically within the scope of the OAuth project. I don't want to broaden that scope. Also, we're currently in the process of redesigning the Configuration Wizard altogether and that will probably address your concerns.

[jdevalk]

I'd argue previous and next are not related. They are in fact two very distinctly different steps.

[jdevalk]

Let's stick with this design. For a screenreader, previous and next would still be close to each other, for everyone else, it's not like Previous is in any way as important or as widely used of an action as Next. Separating them visually thus improves the flow for most people.

[afercia]

Fair enough :)

I'd argue previous and next are not related

To clarify and for future refrence: the point is

• users who use screen magnifiers with a very high zoom level and use the keyboard
• users with reduced vision field (no central or no peripheral vision)

they won't see where focus goes when tabbing from "previous" to "next". They will be forced to explore the content a small portion at a time.

Screenshot emulating the new buttons placement: this is the entire screen (used the phone camera because macOS isn't able to take screenshots while zoom is enabled):

You can enable macOS zoom under system preferences > Accessibility (set mode to "full screen":

[jdevalk]

In the redesign linked above we'll get rid of the previous altogether. I think that's even better.

[IreneStr]

As discussed with @afercia and @luckickken, next and previous will be buttons styled to look like links, instead of 'real' links. There are multiple advantages to this:

• If we would use real links, the href should contain a meaningful hash, which means we should know what the hash of the next step is.
• Clicking a real link would trigger a page reload (by default), which is not a11y-friendly.
• It currently already is a <button>, which makes the implementation of the change easier.