UKHO / admiralty-design-system

MIT License
4 stars 0 forks source link

[BUG] Site Improve Tool issue - Form field missing a label #218

Open Satyam15302 opened 1 month ago

Satyam15302 commented 1 month ago

Describe the Bug

A form element, specifically a checkbox, is missing a descriptive text label. Each form element, including checkboxes, should have an associated text label that describes its purpose. This label should be explicitly connected to the form field to provide clear information about its function to all users.

To Reproduce

Steps to reproduce the behavior:

  1. Open the web application.

  2. Navigate to the "Confirm exchange set content" page.

  3. Use a web accessibility testing tool (site improve) to identify the error.

  4. Inspect the checkbox elements and verify that they do not have associated text labels.

Expected Behavior

Each form field, including checkboxes, should have an associated text label that is correctly linked to the form element. This can typically be achieved using the <label> element with a for attribute matching the id of the form field, or by nesting the form field within the <label> tag.

Screenshots

Form field missing a label

Additional Context

In the application, there are instances where checkboxes are missing associated text labels. This prevents users from understanding the purpose of these checkboxes, thereby hindering form completion and accessibility.