Bootstrap model Header Text Repeated Several Times While Focusing in a Custom MultiSelect Component in JAWS

[UdhayaKumarDuraisamy]

Summary

The custom MultiSelect dropdown component is placed inside a Bootstrap modal. If the MultiSelect component is focused, JAWS reads the Bootstrap modal header each time the user selects a value. The same issue does not occur when using Windows Narrator. The issue only occurred with the JAWS screen reader. Below is the sample that was tested on both the Windows Narrator and JAWS tool.

Expected result

JAWS needs to announce the bootstrap model header only once when focusing the component.

Actual result

If the MultiSelect component is focused, JAWS reads the Bootstrap modal header each time the user selects a value.

Example

Sample: https://stackblitz.com/edit/angular-rxd3vu-qrp1f4?file=src%2Fapp.component.html

Additional Information

https://github.com/FreedomScientific/standards-support/issues/755

[UdhayaKumarDuraisamy]

GitHub Link: https://github.com/FreedomScientific/standards-support/issues/755#issuecomment-2042595643

This is the follow-up to the above issue. The previous issue has been closed, so I have opened a new one.

In the latest version of JAWS 2024.2403.3, we are still facing the issue where the dialog header is repeated when a value is selected on the MultiSelect component. We have added all the necessary ARIA attributes to both the dialog and the Custom MultiSelect, yet the JAWS screen reader continues to repeat the dialog header when a value is selected on the MultiSelect component. Below, I have shared a runnable sample, a video illustration, and replication steps.

Sample: https://stackblitz.com/edit/github-ejyjgu-myx2ba?file=src%2Fapp%2Fhome%2Fhome.component.html,src%2Fapp%2Fhome%2Fhome.component.ts

Replication steps:

1. Run the sample.
2. Open the dialog by clicking on the "Open Dialog" button.
3. Use the "Down" key to open the MultiSelect popup.
4. Select a value from the popup by pressing the "Enter" key, and the dialog header will be repeated.
5. Repeat step 4 again, and the dialog header will be repeated.

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/JAWS_Video_illustration-2093785506

Could you please confirm if the JWAS screen reader behavior includes repeating the dialog header each time a value is selected in the MultiSelect? If not, what attributes are missing in the sample provided, or if it is a bug, when will it be addressed?

Note: We have added ARIA attributes based on the following documentation: • https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ • https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

[edcourtney74]

@JAWS-test @stevefaulkner We're still having an issue with the above sample using JAWS 2024.2403.3. Can you advise whether this is an issue with the component setup or with JAWS? Thank you!

[stevefaulkner]

Tested with JAWS 2024.2403.3 and Chrome Version 124.0.6367.61 (Official Build) (64-bit) can reproduce Also tested with NVDA in Chrome, same issue. Tested with NVDA in Firefox 125.0.1 (64-bit) The widget was unusable.

[prsdthkr]

Also seeing this in a setup like:

<div role="dialog" aria-labelledby="header" aria-describedby="subheader">
    <span id="header">Header</span>
    <span id="subheader">Sub Header</span>
    <div role="toolbar">
        <button>ok</button>
    </div>
</div>

Where, focusing on the toolbar button causes JAWS 2024.2403.3 and Chrome Version 123.0.6312.107 to announce "Sub Header" again.