Skip to content

Increase accessibility of Invite Members modal

What does this MR do and why?

  1. Include a high-level form error that gets focused on submit when member invites are empty.
  2. The next focusable element is the invalid input.
  3. The invalid input is marked as such and has the error styles. (current behavior)
  4. The help text on the invalid input should be replaced with text to remedy.
  5. Invite modal inputs given accessible names with labels.

Screenshots or screen recordings

GlAlert on empty invite submit

127.0.0.1_3000_groups_flightjs_-group_members__1

UI

Before After
before after

Windows / Chrome / JAWS

Before After
jaws-invite-members-modal-before jaws-invite-members-modal-after

Windows / Firefox / NVDA

Before After
ndva-invite-members-modal-before ndva-invite-members-modal-after

MacOS / Safari / VoiceOver

Before After
invite-members-modal-before invite-members-modal-after

How to set up and validate locally

  1. Visit group or project member pages e.g.
  2. Press "Invite members" button
  3. Submit form without inviting members
  4. Should display move focus to alert
  5. Next focusable element is the search field with error state and message
  6. Inputs have accessible names via labels (labels can be clicked to trigger input focus)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes to #371262 (closed)

Edited by Scott de Jonge

Merge request reports