Composite question elements are unreachable via VoiceOver cursor

[davidevans-wk]

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug

What is the current behavior?

Unless I am misunderstanding expected VoiceOver usage (entirely possible), composite questions appear to be inaccessible to VoiceOver users via VoiceOver cursor.

• Initial focus is on the overall container for the question, but it reads as "you are currently on a text field" and instructs the user "to edit text in this field, type"
  • If the previously focused field was an actual text field, typing will instead add text to that previous input
• Users are unable to then access any of the fields within the composite question, it skips to the complete button

What is the expected behavior?

• Composite question title gets read as a heading instead of a textfield with that name
• The textfields within the composite question are able to be accessed and interacted with

How would you reproduce the current behavior (if this is a bug)?

• On the Preview tab for a survey containing a regular text field and a composite question as elements
• Navigate through the form via VoiceOver
• Interact with the first field, entering text when prompted
• Navigate to the composite question and note how the screen reader reads it aloud, then attempt to interact with it as a screen reader user would (my understanding is they expect to do so via the VoiceOver modifier + arrow keys, not the Tab key)

Provide the test code and the tested page URL (if applicable)

Tested page URL:

• The deployed preview: https://2yp43w.csb.app/

Test code

• The codesandbox, forked from the full name template example and with an additional input added to the config: https://codesandbox.io/p/sandbox/loving-taussig-2yp43w?workspaceId=f6f4967d-f17c-4453-9d5c-a9e4b058c316

Specify your

• browser: Chrome
• browser version: Version 127.0.6533.120 (Official Build) (arm64)
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: latest

[davidevans-wk]

We are able to temporarily work around it with this—inspired by this comment—but figured this is something you would want to be fixed at the library level, or to at least provide a way for consumers to opt out of this markup.

survey.onAfterRenderQuestion.add((_model, { htmlElement }) => {
  if (htmlElement.getAttribute('role') === 'textbox') {
    htmlElement.removeAttribute('role');
  }
});

[JaneSjs]

Hello @davidevans-wk, Thank you for the update. To help us move forward and research the issue, would you please update access permissions for your code sandbox and make it public?

Thank you

[davidevans-wk]

Sorry about that! I didn't realize it was private. It should be public now.