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
*
*
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
* when pressing
* 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
Then, I tried to replace
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).
Since I've been writing this app in Vue, the popup's appearence is controlled by the
v-if directive. Since it seems to matter, I'll explain briefly how v-if and v-show work in Vue, for those who don't know Vue:*
v-if removes the element from the DOM (when a given condition isn't met)*
v-show only adds/removes display: none; to the elementAnd 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, the focus is shifted onto the first button, but NVDA reads this area as "blank" - same for the other button* when pressing
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 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 with v-show (only to see what would happen, in fact, I need for it to be v-if, not v-show) and the behavior was exactly the same as for 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).
A browser plugin that helps you develop accessible websites by simulating a range of experiences.
