Tab order for confirm dialog buttons

Current behaviour

When using the confirm component the secondary button has a higher tab order than the primary button. This means that when opening the component users automatically have the “No” option focused by default.

Expected behaviour

As the primary action is the “Yes” option, it should come first in the tab order, so as to match the visual hierarchy of the page. This should not overwrite the users tab location as the dialog could have focusable content within it.

Reproducible example

https://carbon.sage.com/?path=/story/confirm--default-story

Suggested solution(s)

Swap the order of the buttons in the confirm component: https://github.com/Sage/carbon/blob/d1c72c1aecede2d228ed03aabd8a4f795c83dba1/src/components/confirm/confirm.component.js

Change the parent to use flex-direction: row-reverse.

https://github.com/Sage/carbon/blob/d1c72c1aecede2d228ed03aabd8a4f795c83dba1/src/components/confirm/confirm.style.js#L7

export const StyledConfirmButtons = styled.div`
  margin-top: 48px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
`;

Additional context

In general the order of the markup should match how it is output onto the page. In this case, the right hand button is more prominent than the secondary button, so sighted users use this component like so:

This is also how we want users to interact with the element, so the markup makes semantic sense.

Your environment

Software	Version(s)
carbon-react	latest
carbon-factory
react-scripts
React
Browser
npm
Operating System

[benwilsonsage]

Hi all - the Design System guidance on Forms says this right now…

Button Order: In a button pair, ‘Cancel’ goes on the left, and ‘Save’ goes on the right - a consensus of surveyed third party Design Systems does it this way (with Windows being a rare exception). Although Nielsen (2008) says “(neither) choice is likely to cause usability catastrophes”.

We’re due to discuss this in the Forms task force shortly, but the cost and inconsistency of changing approach is probably high.

The approach has the benefit that the dialog ‘ends’ with a positive conclusion, but the disadvantage that users must tab past the negative action to get to the positive.

I see the difficulty with that, but suggest that tab sequence following reading order (top-to-bottom, left-to-right) might be best.

[harpalsingh]

@MarkMizenSagecom I think there are few key things that come into play here:

1. We used to make primary left/secondary right, but decision was made to switch that order (Ben might have a better idea why I think it was just general team preference)
2. When a confirm or any dialog is fired, would we want the user to actively choose the “primary” option, as that will have a consequence, whereas the cancel does nothing, so accidentally pressing Enter doesn’t trigger the confirm primary action.
3. From an accessibility POV if they meant to cancel, is it ok to expect Shift+Tab to go back or arrow key in this scenario?

Would be good to open up a chat with Martin Underhill too and discuss the options cause you make a valid question 👍