Accessibility Issue in Nested Forms: Duplicate id Attributes Causing Validation Errors

[sabato-galasso]

Describe the bug
When using a nested form in Formio.js, two div elements with the same id are generated. This causes accessibility verification issues, as duplicate id values do not comply with WCAG standards and can interfere with screen readers and validation tools.

Version/Branch
Formio.js version:
"@formio/js": "^5.0.1"

To Reproduce

1. Create a form containing a nested form.
2. Add components inside the nested form.
3. Inspect the generated HTML code.
4. Notice that two div elements have the same id.

Expected behavior
The form should generate a single container with a unique id, avoiding duplication to ensure accessibility compliance.

Screenshots

Additional context
This issue can cause errors in automated accessibility tests and impact the usability of the form for assistive technology users. A possible solution is to remove the duplicate id or ensure unique identifiers for each div.

[olgabann]

@sabato-galasso Thank you for reporting this issue. I can reproduce it and have logged a ticket for the backlog. We are always willing to review any contributions from the open-source community to resolve this issue.

For internal reference: FIO-9785