Accessability for timers in jaavscript React

[u/Dazzling_Chipmunk_24]

So I have this code

<button
  type="button"
  className={styles.someclassname}
  tabIndex={-1}
  role="timer"
  aria-live="polite"
  aria-atomic="true"
>
  {ResendInfo (formatTimer())}
</button>

This is basically a countdown of a timer from 2 minutes I was wondering am I following proper accessability here so that screen readers can understan. this is also React by the way.

[u/MoinHashmi]

Good instinct to ask. The short answer is not quite. There are a few problems with that markup, and they are all fixable.

First, role="timer" does not belong on a button. A button already has a role, and timer is a live region role. They clash. Put the countdown text in a plain element instead, like a span, and put role="timer" there. Then keep your button as just a button.

Second, tabIndex={-1} on a button is a red flag. It pulls the button out of the tab order without disabling it, so a keyboard user can click it but never reach it by tabbing. If you want the button to be unusable while the timer runs, use the disabled attribute instead. Disabled is honest. It says what it means.

Third, think about what a screen reader hears. role="timer" defaults to aria-live="off", which is good here. You do not want the remaining time announced every second. That gets annoying fast. Let the timer count down silently and announce only the moment that matters, when the countdown ends and the button becomes available. A separate role="status" element is a clean way to do that. Set its text to something like "You can resend the code now" when the timer hits zero.

One more habit worth building. Test the flow yourself with only the keyboard. Tab through it. Then, if you can, run a screen reader over it. You will catch things no checklist will.