Skip to:
Content

BuddyPress.org

Opened 3 years ago

Last modified 2 years ago

#7734 new defect (bug)

BP-Nouveau Group Creation Previous-Next navigation: Links vs Buttons

Reported by: mercime Owned by:
Milestone: Awaiting Contributions Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-screenshots has-patch
Cc:

Description

The "Back to Previous Step" and "Next Step" buttons, i.e., <input type="button" ... onclick="location.href='http://localhost/codex/groups/create/step/<etc>/>, should be links.

  • Buttons/input type="button": initiate immediate action e.g. form submission, toggle, dismiss notice, favorite, star, reply/comment, etc. If there's no href value, if there's no url which tells where to go, use a button
  • Links: trigger navigation to another section of the page or to another screen/page/site.

Screenshot coming up.

Attachments (5)

group-prev-next.png (12.5 KB) - added by mercime 3 years ago.
7734-link.png (11.8 KB) - added by mercime 3 years ago.
7734-link-underline-focus-hover.patch (3.0 KB) - added by mercime 3 years ago.
7734-link-ala-button-1stpass.patch (2.8 KB) - added by mercime 3 years ago.
7734-link-underline-n-left-arrow.patch (2.9 KB) - added by mercime 3 years ago.
Link with underline and left arrow per image attached above

Download all attachments as: .zip

Change History (14)

#1 @mercime
3 years ago

  • Keywords has-screenshots added

#2 @DJPaul
3 years ago

  • Milestone changed from Awaiting Review to 3.0

#3 @DJPaul
3 years ago

I agree we could switch the "back" button to not use the onclick, but the Group creation wizard uses form submission to change state, and that's why "back"/"next" are button elements.

Given the difficulty in styling a regular link to look like a button, I think we keep as-is.

Thoughts?

Last edited 3 years ago by DJPaul (previous) (diff)

#4 @DJPaul
3 years ago

  • Milestone changed from 3.0 to Under Consideration

#5 @DJPaul
3 years ago

I propose we don't change this.

@mercime
3 years ago

#6 @mercime
3 years ago

I propose we change the "Back to Previous Page" input type="button" to a link because the user will be navigating to a new page/URL.

Screenshot and 2 patches attached.
7734-link-ala-button-1stpass.patch was tested only on a couple of themes. Can improve if this is your choice though I prefer the clean link with 7734-link-underline-n-left-arrow.patch below

Last edited 3 years ago by mercime (previous) (diff)

#7 @mercime
3 years ago

  • Keywords has-patch added

@mercime
3 years ago

Link with underline and left arrow per image attached above

#8 @DJPaul
2 years ago

  • Milestone changed from Under Consideration to 4.0

Sorry no-one gave you feedback on this sooner, @mercime.

Both variants of the patch have translation problems. e.g. esc_html__ instead of esc_html, and the patch with the arrow, that arrow needs to be included in the translated string for RTL languages. I am also wary of styling links to look like buttons because that's hard to do reliably cross-browser. It seems that the button element is not appropriate here, either, which is annoying, as that would have solved the visual appearance.

For the arrow patch, I think it just looks bad to have two different types of navigation style next to each other like that.
I think if we can change the layout of these navigation buttons, then perhaps the arrow patch will be better. I don't have any time to play around with better button placement, but I would revisit the never-questioned-decision about whether the previous/next wizard buttons need to be next to each other.

#9 @DJPaul
2 years ago

  • Milestone changed from 4.0 to Awaiting Contributions
Note: See TracTickets for help on using tickets.