change label to p to prevent label click-through onto input

[135ze]

Notion Ticket

Clicking the box should open dropdowns/activate the inputs, clicking the text above the dropdowns/input should not

Summary & Review Focus

The "click fowarding" bug occurs because it is built-in to HTML labels, probably for accessibility: https://stackoverflow.com/a/49615087

I am able to change this behaviour by switching the label to be interpreted as="p". To keep accessibility, I added aria-labelledby, which allows screen readers to still pick up on the purpose of the input without the unwanted behaviour.

To verify, run locally and try to click the labels and validate that the dropdowns do not get activated.

Inputs still work because the fields are still populated correctly:

Checklist

• PR title is descriptive and in imperative tense
• Commit messages are descriptive, atomic, and follow best practices
• Linter(s) have been run
• Requested reviews from the PL and relevant team members

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
sistema	Ready	Preview, Comment	Jan 29, 2026 5:54am

[ChinemeremChigbo]

This line and (and also lines 363 and 389) still renders for Room Number, Reason of Absence, and Notes, so clicking those headings continues to focus/activate the fields in the edit modal.

[135ze]

Right, updated to match declare form

[ChinemeremChigbo]

This hardcodes the id to dateOfAbsenceLabel; when both declare and edit modals mount together this produces duplicate IDs, so the aria-labelledby on the second date field points to the first label and breaks its own accessible name. Consider using React's useId() inside DateOfAbsence or passing an id down via props.

[135ze]

Updated to add useId in this and the other forms too