Improve accessibility of volunteer availability input fields and simplify data handling

[taesungh]

Following from #435/#474: currently, the input for the volunteer availability is built purely out of <div> elements that react to JavaScript rather than native form elements. This poses an accessibility problem because the time slots are not focusable, so somebody with only a keyboard would not be able to fill out their availability. Depending on a mouse event listener also means a user with JavaScript disabled in their browser (rare but plausible) would not be able to fill out their availability.

A more appropriate solution is modeling the input like a multi-select field with checkboxes. This would also greatly simplify the data processing on the API because we can specify a list of values to receive all under the same name (just like the "experienced technologies" question for mentors). Subsequently, we wouldn't need to rely on custom validation and parsing a JSON value.

We can still apply some fancy CSS to achieve the same visual effect of the table-like selector. Maybe we should also combine the three days into a single table with three columns so it's simpler for the users? An actual HTML table with cells would also make it relatively easy to have a checkbox label take up the entire cell.

[taesungh]

Will start with simplifying data handling since that will also remove the need for the extra functions in the application flow in user.py