[Accessibility] Checkboxes: Provided roles are invalid

[ParthaA11y]

Original Issue: Accessibility issue - SurveyJS Player.

Title: When Aria attributes are not used correctly assistive technology may not correctly function as expected.

URL: https://surveyjs.io/form-library/examples/nps-question/reactjs

Issue:

Role=listbox is used in the

and role=option is used for the input field with type=checkbox. As a result Assistive technology such as screen reader does not recognize the correct role and the state of the checkbox and does not read them as checkbox. Also, JAWS is providing instruction to use arrow key to navigate but using arrow key is not working in this case.
A listbox and option are used in the dropdown or combo boxes.
Listbox example

Expectation: On focus screen reader should read the accessible name, valid role and current state of the element. For the checkbox screen reader should read the role as checkbox and current state as checked or not checked, so that a user can understand the functionality and keyboard interaction of the checkbox.

Code snippet:

How to fix: Please remove the role=listbox from the fieldset and role=option from the inputs.

Tools used: Screen reader JAWS, NVDA.
Success criteria: WCAG 4.1.2: Name role and value
https://www.w3.org/WAI/WCAG21/Techniques/general/G108
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4

Screenshot:

Screen recordings:

1. JAWS without role=listbox and option: https://www.loom.com/share/9d1fa1574de044e19d26cc31cfd2e275?sid=e1f70162-5fdf-410d-b772-0b9dd7050cb3

2. NVDA Without role=listbox and option: https://www.loom.com/share/f1548edd0574487eb712574e91fb6f86?sid=c8354f10-9227-4713-b1a5-6e9ae6258362

3. NVDA with listbox and option: https://www.loom.com/share/bc99a8e085bf4a10ab7949b693bd6455?sid=af1910f8-203b-4ffc-b1f9-51acf82df6c5

4. JAWS with listbox and option: https://www.loom.com/share/43fff5b629134010a45a21189c58e8c8?sid=8c555f4e-53bc-4f48-92b9-c639519517f5

[dmitry-kurmanov]

related to https://github.com/surveyjs/survey-library/pull/5269/files
checkbox group example https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/
checkbox group with isRequired https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html