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

UdhayaKumarDuraisamy commented 9 months ago

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://stackoverflow.com/q/76927654/18850917)

JAWS-test commented 9 months ago

I do not have this problem. JAWS 2023 with Chrome: After selecting an option, only the selected options are output.

Please note that the example is incorrectly implemented from an accessibility perspective:

When the pop-up is opened, the focus remains on the open button and does not go into the pop-up.
The pop-up list can only be operated with the mouse and not with the keyboard.
The drop-down list has no role. It is only a div element with tabindex. With JAWS it is not recognisable that it is a control.
The list entries have no role, they are also only div elements.

Please fix the problems and close the ticket here.

Correct drop-down lists are implemented with the HTML elements select and option. Multiple selection works best with a checkbox group. For an ARIA implementation see: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

And the dialog should be implemented as follows: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

UdhayaKumarDuraisamy commented 9 months ago

Thank you for your feedback and for taking the time to test the sample. Regarding the specific issue with JAWS and Windows Narrator, it's interesting to note that you didn't encounter the problem with JAWS 2023 in Chrome. I have made efforts to address the issue by adding the 'role' attribute in the necessary places, but it appears that the problem persists with JAWS.

Please note that the sample I provided earlier is a simplified representation of my custom multiselect component. In the full version of my component, I have ensured proper handling of focus and keyboard navigation. The simplified sample was created solely for demonstration and testing purposes. It's worth mentioning that the simplified sample functions correctly with Windows Narrator.

Modified Sample: https://stackblitz.com/edit/angular-rxd3vu-aigymx

JAWS-test commented 9 months ago

I also looked at the example in the current link. A test of your problem is not really possible because the implementation is completely wrong:

role=listbox instead of role=combobox at the control
role=menu at the selection list
the control cannot be operated with the keyboard (with and without JAWS), only with the mouse.

stevefaulkner commented 9 months ago

@UdhayaKumarDuraisamy please provide a conforming working example

UdhayaKumarDuraisamy commented 8 months ago

Below, I am attaching my DOM structure and also a video of the issue I am experiencing. Could you please analyze and provide suggestions on what accessibility is missing, specifically related to the JAWS Screen reader? Additionally, could you identify the cause of the JAWS Screen reader repeating the header each time the user selects a value?

[DOM Structure]

<div id="target" class="col-lg-12 control-section target-element" style="height: 350px">
  <div style="position: relative; top: 10px; left: 10px">
      <!-- Button to open the Dialog -->
      <button id="targetButton" class="e-control e-btn" type="button">
          Open
      </button>
  </div>
  <!-- Initialize template Dialog -->
  <div class="e-dlg-ref-element"></div>
  <div id="template" class="e-control e-dialog e-lib e-popup e-popup-close" role="dialog"
      style="max-height: 330px; z-index: 1000000000; width: 435px; height: 76%; left: 742.5px; top: 42px;"
      aria-labelledby="template_title" aria-modal="false">
      <div class="e-dlg-header-content" id="template_dialog-header"><button
              class="e-dlg-closeicon-btn e-control e-btn e-lib e-flat e-icon-btn" type="button" title="Close"
              aria-label="Close" data-ripple="true"><span class="e-btn-icon e-icon-dlg-close e-icons"></span></button>
          <div class="e-dlg-header" id="template_title">
              <div id="header" title="Test Header" class="e-icon-settings">Test Header</div>
          </div>
      </div>
      <div class="e-dlg-content" id="template_dialog-content">
          <div class="dialogContent">
              <div class="e-multiselect e-input-group e-control-wrapper" style="width: 100%;">
                  <div class="e-multi-select-wrapper">
                      <span class="e-chips-collection" style="display:none" id="chip_default_0"></span>
                      <span class="e-delim-view e-delim-values" style="display: none;"></span>
                      <span class="e-searcher">
                          <input class="e-dropdownbase" spellcheck="false" type="text" autocomplete="off" tabindex="0"
                              role="combobox" aria-labelledby="chip_default_0" placeholder="Select a game" size="13"
                              aria-disabled="false">
                          <input type="text" id="customers" class="e-control e-multiselect e-lib"
                              style="display: none;">
                      </span>
                      <span class="e-chips-close e-close-hooker" style="display:none;"></span>
                      <select aria-hidden="true" class="e-multi-hidden" tabindex="-1" multiple=""
                          name="customers"></select>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

[Video illustration] https://github.com/FreedomScientific/standards-support/assets/98140917/abc6c545-0772-4d48-96e4-bf4109913d6e

edcourtney74 commented 7 months ago

@stevefaulkner @JAWS-test Have you been able to look at the example posted by @UdhayaKumarDuraisamy

stevefaulkner commented 7 months ago

@edcourtney74 I have tested the original test case provided by @UdhayaKumarDuraisamy using JAWS 2024.2310.70 and Chrome 119, Windows 11. I cannot reproduce the issue

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

I experience:

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

The questions asked in the comment are beyond the scope of this bug tracker.

Could you please analyze and provide suggestions on what accessibility is missing, specifically related to the JAWS Screen reader?

Please review the resources @JAWS-test provided:

Correct drop-down lists are implemented with the HTML elements select and option. Multiple selection works best with a checkbox group. For an ARIA implementation see: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

And the dialog should be implemented as follows: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

UdhayaKumarDuraisamy commented 2 months ago

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:

Run the sample.
Open the dialog by clicking on the "Open Dialog" button.
Use the "Down" key to open the MultiSelect popup.
Select a value from the popup by pressing the "Enter" key, and the dialog header will be repeated.
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/

FreedomScientific / standards-support