A11y correct standard to set focus, when modal is on complete step

Question

My question is related to Accessibility standard.

I have a modal with multi-step form, when modal reaches final step which only has 1 actionable item that is close button, focus goes to close button.

Team suggested me to set focus on the text that is displayed for which i have to add tabIndex="0" on the screen.

    <div tabIndex="0">Completed All Steps.</div>

This is non-interactive, and it voilets eslint jsx-a11y/no-noninteractive-tabindex.

Ideally solution that i can think of this to add an hidden alert and keep focus on close.

  <div id="expirationWarning" role="alert">
     <span class="hidden">Completed All steps.</span>
  </div>

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

Which one is the correct based on standard or, third better option ?

Tried to look up for standard for this, could not find any.

Answer 1

In general, it's best to not put the focus on a non-interactive elements, but sometimes it's necessary to aid in screen reader announcements.

In your case, I would have tabindex="-1" on the "all steps". That allows you to programmatically move the focus to that element using focus() but prevents the user from being able to tab to it.

<div tabIndex="-1">Completed All Steps.</div>

Assuming you are trapping the keyboard focus within the dialog, after the user hears the "all steps" text, when they tab, they'll be taken to the X-close button and won't be able to tab back to the text. (A screen reader user can still navigate to the text using other navigation keys.)