Unable to trigger Tab+Enter key press on child link which is present inside a clickable div having aria-label/aria-labelledby
Opened this issue · 4 comments
I am trying to make a Clickable Card (implemented with <div> tag with onClick handler) with a <button> present inside it. Here the requirement is that, the click on card must navigate to linkA and button within the card must navigate to linkB. For accessibility purposes, we had to place aria-labelledby on the parent with some role as link. But we observed that with NVDA turned on, when we tab on child button and click Enter, the parent is getting clicked and no click is registered on the child, if we remove the attribute aria-labelledby, it seems to work as expected (child is able to recieve the click)
Note: we can resolve this by giving role=application, as it works fine in focus mode, but this is will again require us to write a keyDown.
Steps to reproduce:
- Place a
<div>container with tabindex=0, role=link/button , valid aria-label / aria-labelledby attribute, onClick function with some console(" parent clicked") to detect the trigger action. - Place a
<button>tag inside the parent div, with onClick function with console ("child clicked"). - Turn the NVDA reader on, tab till you reach the child tag and click Enter key.
Actual behavior:
Only parent onClick is getting triggered.
Expected behavior:
Child onClick must also get triggered.
NVDA logs, crash dumps and other attachments:
System configuration
NVDA installed/portable/running from source:
NVDA version: 2023.1
Windows version: windows 10
Name and version of other software in use when reproducing the issue:
Other information about your system:
Other questions
Does the issue still occur after restarting your computer?
Yes
Have you tried any other versions of NVDA? If so, please report their behaviors.
Also tried in NVDA version 2019
If NVDA add-ons are disabled, is your problem still occurring?
Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?
Welcome @bhantp ,
We are unable to process this issue as it stands.
- To be able to reproduce this issue, we need a code sample. Provide a minimal HTML sample to reproduce this using codepen.
Kind Regards,
NV Access Software Developers
Attatching a simple example @seanbudd you can run NVDA reader over this ( it seems like JAWS is reading perfectly fine i.e. on clicking on child, it will fire child followed by parent)
https://codepen.io/bhantp/pen/MWzOmEL
For now this is by design.
As you have placed an explicit label on the parent, and that parent is / has a role of link, NvDA overrides the content with the label. I.e. the child button is not rendered in NvDA's browse mode.
Thus trying to activate it in browse mode simply activates the parent, not the child.
You could work around this by giving the parent a role of 'group' which will cause NVDA not to fully override the content with the label. Then the child will be activatable in browse mode.
However:
NVDA is contradictory in its own behaviour in that it correctly reports focus when tabbing to the child, but the rest of NvDA's state still think s it is in browse mode. NVDA should probably temporarily force focus mode if focus lands on an element that is apparently contained in the browse mode document I.e. element.treeInterceptor is valid, but has not been actually rendered, I.e. the element's ID has no node in NvDA's virtualBuffer. Either that, or the element's treeInterceptor property should not point to a virtualBuffer. I think the first option is the best here.
@michaelDCurran Making role = group will cause NVDA reader to read content present in aria-labelledby followed by all contents present inside the division. As the character of aria-labelledby is to override the contents present in the child, that's what we are trying to achieve here
In the above attached code snippet, it will cause the screen reader to read it as "this is parent grouping This is parent CHILD BUTTON."
Also is this issue expected to be fixed in future releases