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>