1

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.

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

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

2
  • According to the Mozilla docs you can/should use role="alertdialog" aria-modal="true" which indicates that everything outside the element is non-interactive. Perhaps you can try this and see if the JAWS screenreader understands it better...
    – Pieterjan
    Commented Aug 18, 2023 at 16:46
  • Please provide enough code so others can better understand or reproduce the problem.
    – Community Bot
    Commented Aug 18, 2023 at 21:09

0