FreedomScientific
VirtualPC cursor is overriding document focus in overlay
Summary
While navigating an overlay's content, JAWS preserves the location of the virtual PC cursor inside the overlay, even after the overlay is dismissed and the focus has returned to the trigger. As a result, when the user presses Tab to advance focus, the item that receives focus will be the next item that follows the prior location of the VPC cursor, not the next item in the tab order after the trigger.
- Go to https://react.carbondesignsystem.com/iframe.html?args=&id=experimental-unstable-slug-form--revert-test&viewMode=story
- Tab to the AI button and activate
- When the overlay opens/expands, down arrow with VPC cursor to hear some of the contents, then press Esc
- Press Tab to move to next control
Expected result
After pressing Esc at the end of step 3, the focus returns to the AI button and its collapsed state is announced When pressing Tab, focus moves to next item (Sample AI Input)
Actual result
After pressing Esc at the end of step 3, focus is visibly returned to the AI button, but the JAWS focus indicator remains where the overlay position was previously, even though the overlay has disappeared. Pressing tab moves focus to the next item AFTER the 'phantom' VPC position. Depending which chunk of information in the overlay last had focus, the focus could be on the second input, the second AI button, or another control.
Example
A test case that demonstrates the issue - provide linked test case, CodePen, JSbin, etc...
Additional Information
Any of the sample AI pages has the same issue, for instance it can be carried out at https://react.carbondesignsystem.com/iframe.html?args=&id=experimental-unstable-slug-form--revert-test&viewMode=story
This issue does not happen without JAWS running, and does not happen with NVDA running.
JAWS version and build number
2024.2406.121
Operating System and version
Windows 11 Enterprise 10.0.22631 Build 22631
Browser and version:
Microsoft Edge 127.0.2651.86 (Official build) (64-bit)
Ah, they renamed the component. Here is the new link: https://react.carbondesignsystem.com/?path=/story/components-ailabel--playground
Note that they also modified the examples a bit as part of this change, and no longer have a sample with just 2 AI buttons on the page, which mean that the 'steps to reproduce' probably won't work precisely, but hopefully sufficient to recreate the problem. You could also try looking at the default page to recreate, but note that there are MANY AI buttons on this page with no context (they are just illustrating all the different sizes of the button availablle), and it would be disorienting for a blind user.