Improve required field indicators for screen reader users on "Add an Event" form

[carrythebanner]

On the "Add an Event" form, a required field is rendered like this: <li class="string input required autofocus stringish" id="event_title_input"> <label for="event_title" class="label">Event Name<abbr title="required">*</abbr></label> <input maxlength="255" id="event_title" autofocus="autofocus" type="text" name="event[title]"> </li>

This mostly works well, but screen reader users will hear something like "Event Name star" as the name of the field ("star" being the asterisk, as VoiceOver on macOS announces it). Additionally, the field isn't indicated as required to a screen reader.

These can be fixed by:

• Marking the abbr element with aria-hidden="true" so that screen readers skip over this visual-only indicator.
• Adding a required attribute to the input element.

With both of the above, screen reader users will hear something like "Event Name, required, edit text" when the input is focused.

[evolve2k]

Seems to have been fixed and even merged. Recommend Close.

[carrythebanner]

Aye, fixed with https://github.com/calagator/calagator/pull/598, closing this issue.