microsoft-graph-toolkit icon indicating copy to clipboard operation
microsoft-graph-toolkit copied to clipboard

[BUG][MGT-PEOPLE-PICKER] Remove button in selected-person executes incorrect action with JAWS virtual cursor enabled

Open GuillermoCasalCaro opened this issue 1 year ago • 2 comments

Describe the bug In the mgt-people-picker component from @microsoft/mgt-elements, when using JAWS screen reader with the virtual cursor enabled, pressing "Enter" on the "remove" button next to a selected person mistakenly triggers the action associated with the previously selected element rather than removing the selected person. This behavior prevents users from accurately managing selected persons within the component.

To Reproduce Steps to reproduce the behavior:

  1. Open the mgt-people-picker component in the Storybook (https://mgt.dev/?path=/story/components-mgt-people-picker-html--selection-changed-event).
  2. With JAWS while the virtual cursor is enabled, select a person in the picker.
  3. Navigate to the "remove" button for the selected person using key TAB.
  4. Press "Enter" on the "remove" button.
  5. Observe that the action for the previously selected element is triggered instead of removing the person.

Expected behavior Pressing "Enter" on the "remove" button should remove the selected person from the list, without triggering unintended actions from other elements.

Screenshots In the next video, I show how JAWS behaves with the people picker first while the virtual cursor is enabled and seconds with it disabled. https://github.com/user-attachments/assets/2142c159-391f-443f-89ae-a7503e8d2e50

Environment OS: Windows Screen Reader: JAWS JAWS Versions Tested: 2024.2312.53, 2024.2409.2, 2025.2410.106 Browser: Chrome, Edge Framework: React, HTML Environment: Storybook

Additional context The issue was consistently reproducible across multiple versions of JAWS.

GuillermoCasalCaro avatar Nov 05 '24 13:11 GuillermoCasalCaro

Hi @GuillermoCasalCaro, thank you for opening this issue. From the attached video, it seems that pressing enter removes the selected person from the list, then prompts the user to search for a name. Could you confirm if this is the unintended action you mean?

Mnickii avatar Nov 26 '24 10:11 Mnickii

Hello @Mnickii, thanks for answering! No, that's not the unintended action I mean.

First, I would like to say that this buggy behavior only occurs while JAWS is running with the setting "Virtual Cursor" enabled (what is the default behavior of JAWS).

The problem is navigating to the remove person button (the cross icon) using the TAB key, and then pressing the Enter key.

  • Expected behavior: The person is removed.
  • Actual behavior: The person is not removed. Previous selected element is triggered. (In the video was the darkmode slide if you tabulated forward, or the "search for a name" input if you tabulated backwards).

GuillermoCasalCaro avatar Nov 27 '24 16:11 GuillermoCasalCaro