Increase accessibility of Invite Members modal

Problem

During a review of !95527 (merged) a few items were proposed that were out of the scope of that MR:

  • The input itself isn't marked as aria-invalid="true" so when focusing on it again there's no indication that it's the offending field and a user would have to go from memory since activating the "Invite" button again doesn't trigger the error to repeat.
  • The help text isn't announced when the input is focused when the input is valid or invalid. I think aria-describedby referring to the help text ID would be ideal.
  • Focus remains on the "Invite" button instead of moving to the invalid field meaning that a keyboard user has to tab forward/backward to try and locate the invalid field, which isn't currently marked as invalid. Focus placement is discussed in the threads.

Solution

  • Mark the input with aria-invalid="true" when left empty or containing non-matching content (More about aria-invalid).
  • Use aria-describedby to reference the ID of the help text and additionally the validation text when in error state. In this way, the validation and help text will be announced when focus is placed back on the input.
  • Placing focus on the invalid input would help a user to quickly remedy the error. As a consideration from the MR, "The problem with doing that is that a focus event will trigger a search and I don't think that is what we want." So the focus method would have to be updated to not trigger search. Alternate suggestions for placing focus are discussed below.
Edited by Jeremy Elder