Just adding here that we should consider other components in this consideration, such as Popover.

Change #1262215 had a related patch set uploaded (by Dtorsani; author: Dtorsani):

[design/codex@main] Dialog, Popover: Update alignment of footer actions

https://gerrit.wikimedia.org/r/1262215

I've put together a proof of concept patch.

A few notes before going into my concept:

• As mentioned in the task description, we want to find more alignment and consistency with the Constructing forms guidelines and how actions in a footer should be aligned. Essentially, it says that the most progressive or forward moving action should be on the end of the group of actions, and that the actions should align to the start of the container.
• Currently in Dialogs and Popovers, it does the former, but not the latter. Instead the actions group is aligned to the end of the overall container.
• One reason this is helpful is the accessibility factor for people using zoom accessibility functionalities on their device. When someone is zoomed in to read content or input data, these elements are aligned to, or at least start at, the start of the container. When they get to the bottom, if the actions are aligned to the end of the container, they can feel like they are missing, because nothing seems present.

Okay, so my proposal is to update the actions in Dialog and Popover footers to equally span the width of the overall container. This is the same behavior that occurs on smaller screens, though vertically stacked then. It maintains the intended order of buttons when horizontally aligned, with the most progressive action being at the end. But it also gives the person using zoom features something at the start of the overall container. Additionally, it creates more overall alignment and balance, especially when button labels might be much longer than others. We do guide in the Dialog guidelines to include at least one action in the footer, but ideally a default action like "Cancel" as well, so in theory, there shouldn't really ever be only one action, which would help to not have just one long (the length of the Dialog) button spanning the entire width.

I also tried these other two layouts but they not only go against the order of groups of buttons guidelines but they also just don't feel right.

This third layout option does follow the order of groups of buttons guidelines, but also not sure it feels right.

Curious what others think.

@DTorsani-WMF thank you for working on this. After reviewing the proposed updated, I would rather leave the Dialog buttons position as it is, aligned on the left in LTR to match the natural reading and decision flow. This way, users can scan the Dialog's content from left to right (in LTR and opposite in RTL), so placing actions on the right aligns with where their attention naturally ends.

@bmartinezcalvo thanks for your thoughts. Does a Dialog actually change its order and alignment of buttons in RTL languages? I am not aware of us changing the layout based on reading direction.

El T358359#11765211, @DTorsani-WMF escribió:

@bmartinezcalvo thanks for your thoughts. Does a Dialog actually change its order and alignment of buttons in RTL languages? I am not aware of us changing the layout based on reading direction.

@DTorsani-WMF yes, the Dialog changes its layout based on reading direction, so button's position also changes from right alignment (LTR) to left (RTL).

Got it, thank you. Yeah, I still don't know about the alignment and positioning. Maybe worth bringing to a design review or getting more opinions. I'll put something together.

Change #1262215 abandoned by Dtorsani:

[design/codex@main] Dialog, Popover: Update alignment of footer actions

Reason:

Not moving forward with changes to Dialog and Popover footer action behavior at this time.

https://gerrit.wikimedia.org/r/1262215