Dialog buttons should not be focused by default [PROPOSAL]

[hacknaked]

When open a Dialog, the leftmost button is always focused. The Material Spec is not very clear if this is the expected behavior but, in all screenshots, Dialog buttons are never focused.

Source:
https://material.io/guidelines/components/dialogs.html

[crisbeto]

This is not down to the spec, but it is an accessibility feature. The dialog automatically focuses the first focusable element. You can avoid focusing the button by setting it's tabindex to -1.

[hacknaked]

I understand the intentions and I'd like to agree but, for some reason, default action buttons in dialogs are a bit confusing for me. Dialogs usually have a simple question for the user and there is not an "obvious" answer that fit most users. I'm wondering if some UX test can help here.

Also, I prefer to set focus explicitally (with "autofocus", "default-button" or similar) instead of removing default focus with tabindex=-1, but this is a personal preference.

[crisbeto]

You can set the element at which the focus trapping starts by adding a cdk-focus-start attribute.

[mischkl]

It would be nice if the trick with cdk-focus-start were documented in the MatDialog docs!

Also, just because accessibility does not mean this behavior is the correct behavior.

1. It breaks Material Design's own guidelines with respect to button ordering - look at any example on the Material Design guidelines page for buttons and you will see that the primary action is positioned at the end, not at the beginning. This also reflects the state of the art regarding usability in application design - the eye naturally travels in the direction you would normally read, i.e. top-to-bottom, left to right, therefore positioning the primary action at the end of the bottom line increases visibility and decreases cognitive load. It is of course possible to achieve "the best of both worlds" for both visual and screen-reader users alike, which would involve styling the button list so that the elements are displayed in reverse order (e.g. by setting flex-direction: row-reverse). But most developers won't think of this.

2. In many cases it doesn't make sense to automatically select one or the other button (again, see the examples on the Material Design guidelines page). For instance, if you are prompting a user "Are you sure you want to delete this file?": "Cancel" / "Delete". Does it really make sense to highlight Delete here? It is the primary action, but selecting it by default and risking the user pressing Enter by accident seems like a bad idea. There is only one possibility for disabling default selection on all buttons: setting tabIndex="-1" for every button. However, this puts all of the buttons all the way at the end of the tab queue for the document, in other words as good as unreachable without using a mouse. So in point of fact there is no workable solution if all you want to do is prevent a default option from being focused.

I think I've made a compelling case for the current default behavior being problematic. Modern UX practices suggest that the first option should not be the default one (at least when disregarding screen reader ordering). On top of that there are many cases where setting default focus is a bad idea, yet there is no workable way to disable it.

In summary. instead of forcing a default focus, IMHO developers should simply be allowed to opt-in to setting a focus (e.g. by using autofocus). And in order to optimize for accessibility, Angular Material could still set tabindex="0" on the first button to ensure that all of the buttons are easily reachable.

[RobertPaulson90]

100% agree. Took me too long to discover the cdk-focus-start trick

[willshowell]

@mischkl see #6558

@amivit it's a little hidden, but they are now https://material.angular.io/cdk/a11y/overview#regions (might need to hard reload)

[TravisLRiffle]

This looks like it's also a problem in Material 5 as well.

[simeyla]

@TravisLRiffle There is a Material 5 ?????!!!

[danielnitu]

@simeyla They matched Material's version with Angular's, so yes there's a Material 5 :)

[mischkl]

Well, it looks like all of my criticism has been addressed now! 🎉

• There is an aufoFocus configuration option on the dialog that can be set to false if no button should be selected initially.
• An example of using the "cdkFocusInitial" (new name) attribute to enable "proper" button ordering is now included in Dialog documentation! (The only slight caveat is that the dialog's source HTML isn't visible in the inline source viewer; you have to click the "Edit in StackBlitz" icon and then select dialog-overview-example-dialog.html.)
• Tab focus is automatically trapped within modal dialogs so it's not possible to tab to some other part of the document (maybe this was already the case and I just discovered it, but it's a good thing).

On the whole I am quite pleased by the features of the dialog now and impressed by the responsiveness of the Angular Material Team!

The only suggestion I would still make is that buttons within mat-dialog-actions be positioned on the right by default; then they would really and truly match up with the Material Design Guidelines' recommendations:

Recommended button placement

Standard dialogs
Button alignment on screen: right
Place the affirmative button on the right, the dismissive button on the left.

There is the possibility of aligning the buttons using <mat-dialog-actions align="right">, but it's not the default. At least it might be nice if this was also included in the documentation examples; otherwise people might miss it.

[adamdport]

Be sure to check the directive you're using to see if you can opt out, eg <mat-drawer [autoFocus]="false">. This solved my issues where I had a stepper that had a drawer on the second step. The first step would scroll to the bottom on page load. Turns out it's because the drawer had a close button in it (it was "rendered" (albeit visibility: hidden) below the current step)

[tobiaseisenschenk]

It would be nice if the trick with cdk-focus-start were documented in the MatDialog docs!

for anyone on version 7+ 'cdkFocusRegionstart' is the directive to use