By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What problem does this feature solve?

NVDA reads a table row as "clickable row" if there is an " @click " in the html tag even if it is set to null. We need an option to completely ignore the " @click " in html without removing it because sometimes the click event needs to be executed.

I am using NVDA 2019.2.1. Chrome browser 80.0.3987.122 (Official Build) (64-bit). Windows 10.

What does the proposed API look like?

the method could be something like "@click.ignore" or something like that.

I'm no sure I understand. So I just learned that NVDA is a screen reader. And you say that this screen reader has a problem with @click on table rows.

But @click is a Vue template-specific directive, which is compiled away during template compilation, and will not appear in the final HTML.

So I don't really understand how or in what way it can intefere with the screen reader. Can you elaborate?

not to render @click entirely instead of making it null not to render @click entirely instead of making it null [Screen Reader related] Mar 3, 2020

@LinusBorg NVDA does read the js and if the @click directive is in a <tr> tag it announces the row as a clickable row regardless of its value. However there are times when you want your row to be clickable and not clickable based on certain conditions. For instance let's say I have a table and when the screen size is large I don't want the rows to be clickable, when the screen is small I want them to be clickable. Something like:
@click="screenLarge ? clickEvent : null"
This works fine logically and visually. But if you run NVDA screen reader it announces the row as "clickable row" regardless of screensize because the @click directive is there. Is there a way to ignore @click directive completely when screen is large so NVDA doesn't read the row as "clickable row"?

NVDA does read the js

Honest curiosity: What? How? Why would it read the JS? It's supposed read from the final DOM, as far as I understand what screenreaders are made & used for. and in the final DOM there are no @click directives left.

If I'm missing some context, please clarify. With the current information I would assume that your problem is likely something very different, so as @posva a said, a demo would be helpful to understand the issue.

Also, have you tried using a dynamic directive argument ?

According to this thread, click, mouseDown or mouseUp event handlers will be read by NVDA.

nvaccess/nvda#5830 (comment)

Yes - but that link just says that a DOM node with defined event listeners for these events will be interpreted as "clickable".

And you can dynamically remove and add event listeners by using a dynamic directive argument, for which I linked the docs above.

Demo: https://jsfiddle.net/Linusborg/oayns38v/