Should modal component keyboard focus go directly to primary button?

[srambach]

When a modal appears, the focus is automatically set to the close (x) button. If there is a primary action button for the modal, it may be desirable to set the focus to that button instead.

This would be a change in interaction design and also has a11y considerations.

This came up as a question in the Kogito application, but is a very common interaction pattern.

[seanforyou23]

+1 for adding flexibility around which element can receive focus when the modal launches, or to even not focus anything automatically at all. I don't think the close button is necessarily wrong or a bad default, but would be nice to control this if needed. If we wanted to extend beyond that single use-case - we could consider adding support for both dialog and alertdialog roles. To date, we don't take advantage of alertdialog role and I think making a distinction between them could help clarify what interaction patterns should be used in which cases.

Perhaps a delete modal would have a danger button, and we would not default focus to it?

I think this could be a good example case to correspond to an alertdialog modal, where the close button is focused by default, to avoid accidentally deleting something.

Then "normal" models could receive a typical dialog role and could focus any interactive control that's specified, with probably the close button as a default (unless there's a reason to change it). The close button is the only button that's sure to be there I suppose, so it's not a bad default.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role#Focus_management

When the dialog appears on the screen, keyboard focus (whose control depends upon the dialogs purpose) should be moved to the default focusable control inside the dialog. For dialogs that only provide a basic message, it could be an "OK" button. For dialogs containing a form it could be the first field in the form.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role#Description

Unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears. Generally alert dialogs have at least a Confirmation, Close or Cancel button that can be used to move focus to. Additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes. Which particular control focus should be moved to depends on the purpose of the dialog.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

[tlabaj]

cc @jessiehuff