Steps to Reproduce the Issue:
Open the link: https://nvda-test.w3spaces.com/button-accessibility-label.html Two buttons: This page contains two buttons, each with a focusable icon inside. ARIA Attributes: The first button has an aria-label attribute or an aria-labelledby attribute, while the second button does not have either. NVDA Behavior: When using a screen reader like NVDA, focusing the icon within the first button (the one with aria-label or aria-labelledby) and pressing Enter or Space will cause the focus to return back to the button itself. This issue doesn't occur with the second button (without ARIA attributes). Project Use Case:
In my project, I have a button with a close icon inside. Ideally, focusing the close icon and pressing Enter/Space should remove the button from the page. This works as expected without NVDA, but the issue mentioned above arises when NVDA is enabled. While removing the aria-labelledby attribute from the button fixes this issue, but it's necessary for other accessibility concerns and hence cannot be removed.
I want to prevent the focus from returning to the button when pressing Enter/Space on the icon inside the button, while still maintaining the aria-label or aria-labelledby attribute on the button for accessibility.
The issue got resolved by changing the NVDA from "Browse mode" to "Focus mode". Figured out @keydown on Space/Enter won't fire because NVDA intercepts the keys if it is in browse mode, which is normal.Switching to focus mode (insert + space will hear a "typewriter" sound), the code should get passed through and focus does not switch back to button