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>
Which one is the correct based on standard or, third better option ?
Tried to look up for standard for this, could not find any.
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.)