I have a list of offers, each of them with a delete button, that once clicked opens a modal with another 2 buttons: delete and cancel.
When the modal has opened, I want to be able to tab to these 2 buttons first, but at the moment tab continues with the other tabbable elements that are after the delete button in the row, eventually hitting the buttons after completing the tab round.
Is there a way of achieving that?
<section tabIndex="-1" role="dialog" onClick={onCancel}>
<section role="document" onClick={(e) => e.stopPropagation()}>
<Button tabIndex="0" secondary className={Styles.cancel} onClick={onCancel}>
{t("abort")}
</Button>
<Button tabIndex="0" secondary className={Styles.delete} onClick={onDelete}>
{t("deleteModal.CTA")}
</Button>
</section>
</section>
Tab continues wherever the focus is set. Your code already includes tabindex="-1" which allows to focus the dialog element after opening it, with .focus() in JavaScript.
If the dialog content includes semantic structures […] then it is advisable to add tabindex="-1" to a static element at the start of the content and initially focus that element.
In your case, the dialog is really simple, and it would be more advisable to focus the primary button instead of the dialog itself.
See Dialog (Modal) from the ARIA Authoring Practices Guide (APG)
Your dialog needs an accessible name. Usually a aria-labelledby attribute is used to refer to the dialog’s title element, if you don’t have a visual title you can use aria-label.
It is also important that you establish a focus trap in the dialog, meaning that one cannot leave the dialog by means of tab, but only by means of close. Usually the focus wraps around back to the dialog-element.
Browser support for the native <dialog> element recently got better and you might consider using that one.