👨‍💼 We need to update the accessibility of our note edit form. The current implementation is not accessible because the <label> and the <input /> are not associated with each other. So it should be something like this:

<div>
	<label htmlFor="color">Favorite Color</label>
	<input id="color" type="text" />
</div>

You can test out whether your changes fixed the problem by clicking on the label text above the input. If the input is focused, then you've done it! If not, then there's still more work to do.

Another issue we've got is the "Reset" button doesn't work. This is because, due to styling requirements, our Reset button is outside of the <form> element. So we need to communicate to the browser that the Reset button is associated with the form. Similar to how you associate labels and inputs, we use IDs. We can do this by adding a form attribute to the button:

<button form="form-id" type="reset">
	Reset
</button>

We already do this with our submit button (otherwise it wouldn't work), so you can use that as a reference.

Please find Kody in and make sure the label and input have an association via the id and htmlFor props and the reset and submit buttons are properly associated to the form via the id and form props.