Unable to activate Buttons by SPACE or ENTER when NVDA is active

[AndreasSamjeske]

Description

Customer is conducting an accessibility audit on our web app, which uses Vaadin. They found that,

with NVDA active, pressing SPACE or ENTER on a Button does nothing.

We were able to reproduce the issue.

Expected outcome

Button gets activated, just like clicking on it does.

Minimal reproducible example

Vaadin Docs Button Example will do: https://vaadin.com/docs/latest/components/button

Steps to reproduce

NVDA, Chrome or Edge

1. Focusing Button by pressing TAB (several times).
2. Hitting SPACE ==> Clicked x times does not increase.
3. Hitting ENTER ==> Clicked x times does not increase.
4. Clicking Button with mouse Clicked x times increases.

Exit NVDA.

1. Focusing Button by pressing TAB (several times).
2. Hitting SPACE ==> Clicked x times increases.
3. Hitting ENTER ==> Clicked x times increases.
4. Clicking Button with mouse Clicked x times increases.

Additional Info:
Only Buttons with Text are affected. If a Button has no Text, but just an Icon, SPACE and ENTER works even with NVDA.
If a Button with Text has an ariaLabel (Disclaimer: for a11y reasons, you probably shouldn't set an ariaLabel, if the Button has Text) it works!

We thought about using one of the above as workaround, but it is not feasible for us.

Environment

Vaadin version(s): 24.6.5
OS: MS Windows 11 Version 23H2
NVDA 2023.3.3.30854 and NVDA 2024.4.2 are both affected.
Chrome Version 134.0.6998.89
Edge Version 134.0.3124.66

Vaadin Version doesn't seem to matter. Even https://vaadin.com/docs/v23/components/button is affected.

Something changed in Chromeengine recently:
Google Chrome for Testing Version 134.0.6998.88 is affected.
Google Chrome for Testing Version 131.0.6778.87 is fine.
Google Chrome for Testing Version 129.0.6668.70 is fine.

Browsers

Chrome, Edge

Firefox (tested with 135.x and 136.0.2) works fine.

[rolfsmeds]

So something has changed in Chrome that breaks the button component in NVDA.

Would it be possible for you to test also in Firefox, @AndreasSamjeske?

[AndreasSamjeske]

So something has changed in Chrome that breaks the button component in NVDA.

Would it be possible for you to test also in Firefox, @AndreasSamjeske?

We did. Firefox worked fine.
Checked again. Firefox 136.0.2 still works fine.

[rolfsmeds]

Thanks.

Since the issue seems to be specific to NVDA in combination with recent versions of the Blink rendering engine in Chrome and Edge (and not dependent on e.g. Vaadin version or NVDA version), it's almost certainly caused by some change in Blink that somehow broke the way NVDA conveys clicks to the browser.

There's a risk that we can't do anything about it, and just have to wait that Chrome or NVDA solves the issue in a later version, but we'll take a look and see if some small tweak to the button component could help.

That aria-label detail is baffling, though, and makes me wonder if NVDA even sees the button as a button without aria-label.
Was the button correctly announced as a button in NVDA?

[TatuLund]

I just checked this with Windows 11 and using latest Chrome (Version 134.0.6998.88 (Official Build) (64-bit)), but older NVDA 2023.1.0.27913 (I have been lazy to update the version) and I can't replicate the problem. The buttons seems work in my test app just fine with space and enter.

[rolfsmeds]

Interesting. I only now checked how old the reported NVDA version is and 2023.3.3 is actually not that old: released on March 4, 2024, i.e. after the Button component was formally tested last time.

It's not inconceivable that this is the first time anyone's tried to use the component with that NVDA version.

OTOH, it works fine in Chrome 131, so the oldest Chrome version where the issue occurs would be 132, which shipped only 2 months ago.

[joel-schulbach-vectorsolutions]

We hit this issue as well with Enter and Space not working to trigger a button with NVDA running. If you switch to NVDA's focus mode, then the keys trigger buttons correctly. After trying a number of things, changing the css display property on vaadin-button-container from inline-flex to flex seems to solve it in our testing.

For now, we are doing a patch of the vaadin-button component, and then also updating the style property on any buttons that might have been instantiated before our patch of the component has run. I tested the buttons with this change with before and after use cases like icons and couldn't find any side effects of this style change outside of NVDA now triggering them correctly.

There was another Github issue on NVDA's repo that gave us the idea to try the style change. Here it is for reference. nvaccess/nvda#14216

[knoobie]

@jouni tagging fyi.. might be something to be considered for 25 and your styling initiative

[jouni]

Thanks! Yeah, need to test how the new base styles behave, as .vaadin-button-container is now display: contents, and the label part was just changed to display: inline-flex (#10264).

[jouni]

I admit having very limited experience with NVDA, but I didn't notice any issues with the button component on the main branch. I can trigger the button click with both Enter and Space keys, both when navigating to the button with arrow keys and with the Tab key (I assume the former is the “browse mode” and the latter is the “focus mode”).