3 replies

NVDA doesn't see buttons inside a popup

I have a part of UI (shown in the screen below) that consists of this user icon and some additional options inside a popup below. The popup isn't visible all the time, it only shows when you click the user icon.

Since I've been writing this app in Vue, the popup's appearence is controlled by the

v-if

v-if

directive. Since it seems to matter, I'll explain briefly how

v-if

v-if

and

v-show

v-show

work in Vue, for those who don't know Vue:
*

v-if

v-if

removes the element from the DOM (when a given condition isn't met)
*

v-show

v-show

only adds/removes

display: none;

display: none;

to the element

And my problem is that in chromium-based browsers (tested on Brave, Chrome and Edge) the behavior of NVDA is a bit weird, when showing this popup:
* when pressing

Tab

Tab

, the focus is shifted onto the first button, but NVDA reads this area as "blank" - same for the other button
* when pressing

ArrowDown

ArrowDown

, NVDA ignores this popup completely and moves to another part of the UI
* after tabbing through both buttons, up/down arrows begin to work and what NVDA reads is correct

When noticing the latter behavior, I started to think that maybe it's

v-if

v-if

that's causing this issue and I removed it temporarly. After doing that, my popup was all the time on the screen but NVDA behaved correctly.
Then, I tried to replace

v-if

v-if

with

v-show

v-show

(only to see what would happen, in fact, I need for it to be

v-if

v-if

, not

v-show

v-show

) and the behavior was exactly the same as for

v-if

v-if

, meaning NVDA completely ignored my popup.

What's more, I observe this weird behavior only in the browsers mentioned above. In Firefox, it works perfectly fine. I don't have any Apple device to test it on Safari.
I also checked it with this accessibility simulator: https://chrome.google.com/webstore/detail/silktide-website-accessib/okcpiimdfkpkjcbihbmhppldhiebhhaf that I have installed on Brave and use sometimes for testing and it also works perfectly fine (on Brave).

Silktide - website accessibility simulator

A browser plugin that helps you develop accessible websites by simulating a range of experiences.

NVDA doesn't see buttons inside a popup

v-if

v-if

directive. Since it seems to matter, I'll explain briefly how

v-if

v-if

and

v-show

v-show

work in Vue, for those who don't know Vue:
*

v-if

v-if

removes the element from the DOM (when a given condition isn't met)
*

v-show

v-show

only adds/removes

display: none;

display: none;

to the element

And my problem is that in chromium-based browsers (tested on Brave, Chrome and Edge) the behavior of NVDA is a bit weird, when showing this popup:
* when pressing

Tab

Tab

, the focus is shifted onto the first button, but NVDA reads this area as "blank" - same for the other button
* when pressing

ArrowDown

ArrowDown

v-if

v-if

that's causing this issue and I removed it temporarly. After doing that, my popup was all the time on the screen but NVDA behaved correctly.
Then, I tried to replace

v-if

v-if

with

v-show

v-show

(only to see what would happen, in fact, I need for it to be

v-if

v-if

, not

v-show

v-show

) and the behavior was exactly the same as for

v-if

v-if

Silktide - website accessibility simulator

A browser plugin that helps you develop accessible websites by simulating a range of experiences.

NVDA doesn't see buttons inside a popup

NVDA doesn't see buttons inside a popup

Similar Threads

Similar Threads

Similar Threads