Issue Summary

The label is missing for the "Checkboxes" present in the first column of the data table.

Steps to Reproduce

1. Navigate to the "Plans" in header section and activate any plan.
2. Observe the "Plan" page appears.
3. Navigate to the "Review Changes" button and activate it.
4. Observe the "Review Changes" modal appears.
5. Using screen reader navigate to the checkboxes.
6. Observe that, label is missing for the mentioned checkboxes.

Screenshot

Actual Results

When user navigates to the mentioned checkboxes using screen reader, it is announced as "Ticked/Unticked tickbox" for all checkboxes. Additionally, they do not have the label associated with them and aria-label attribute is not included in their source code either. As a result, screen reader users will not understand the purpose of the form fields.

Expected Results

The screen reader should announce the label for the mentioned "Checkboxes" correctly. Every interactive element should have descriptive and logical accessible name which will help them to know the purpose of element and to interact with it effectively.

Apply the Following Changes:

1. Provide an ID to the visual label present in the second column of data table(i.e. <div>).
2. Provide an "Aria-labelledby" to the checkboxes and Include the same ID in aria-labelledby.

code snippet

<input type="checkbox" value="" checked="" aria-labelledby="A1"> 
<div class="_2Tyba" id="A1">sam (Sample Core)</div>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment 

MacBook Pro (16-inch, 2021)
macOs Ventura 14.3
Chrome -Version 120.0.6099.71 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.1 (19616.2.9.11.7)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest