Skip to content

Orphaned labels on single select dropdown #2198

@sgober

Description

@sgober

Describe the bug

When testing for 508 compliance, I noticed that the single select dropdown renderers have orphaned labels. The htmlFor on the label is for example "#/properties/92-input" but the id on the input is "#/properties/92", thus the label is orphaned and it shows up that the input has no label.

Expected behavior

Label should be correctly associated with the single select dropdown.

Steps to reproduce the issue

I use the wave chrome extension to see what 508 compliance errors there are, so all you need to do is have a single select in your schema and you can see that the label and input are not associated

Screenshots

Wave output example (red is missing input label error and orange is orphaned label warning):
Screenshot 2023-10-25 at 10 45 49 AM

Output example where for and id don't match:
Screenshot 2023-10-25 at 10 45 24 AM

In which browser are you experiencing the issue?

Google Chrome 118.0.5993.117

Which Version of JSON Forms are you using?

v3.0.0

Framework

React

RendererSet

Material

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions