Issue Summary

In the Create event modal for the calendar, the form labels are not associated with each other explicitly.

Tested URL

https://instenv-19177-d2sp.instenv.internal.atlassian.com/display/TEST/calendar/ea467a88-11b8-4c6d-93d9-24c8444ea87a?calendarName=test%20cnd 

Screenshot

Steps to Reproduce

1. Launch the URL
2. Navigate to the main content area where the calendar for the space is present.
3. Navigate into the calendar section and activate on any date to open the Create event modal.
4. Keeping the screen reader on, navigate into the form input fields.

Actual Results

In the Create event modal, the input field such as "What", "Where", "Who", etc. does not have label explicitly associated with it. The 'for' and 'id' association is missing between the label and the form control.

Labels are specified for form controls to help users understand what information needs to be inputted. However, labels need to be explicitly associated with their respective form controls for assistive technologies to identify the label accurately and convey the information to the users.

Expected Results

Use the “for” attribute of the label element and the “id” attribute of the form control to explicitly associate labels with their respective form controls. 

This makes the clicking area wider for users without affecting the presentation of the page. This association needs to be done programmatically through the code to ensure that assistive technologies can identify the association.   

Workaround

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