I am trying to make my app more screen reader compatible. I use Google TalkBack. My current obstacle occured while working with Toasts.
I created a button that creates and presents a simple toast. Since the screen reader completely ignores them, I added the following attributes to the DOM:
- role=‘alert’
- aria-live=‘root’
- aria-label=‘message’
Against my expectation the screen reader describes the button twice and the toast afterwards, when i click the button. This only happens once. If I click the button again, the order of read elements is as I wanted it to be from the beginning.
My guess is that the focus jumps back to the button (once) and is therefor read twice.
Does anyone know how I can fix this? What causes the focus to return to the button?
1 post - 1 participant