Increase accessibility of Invite Members modal
What does this MR do and why?
- Include a high-level form error that gets focused on submit when member invites are empty.
- The next focusable element is the invalid input.
- The invalid input is marked as such and has the error styles. (current behavior)
- The help text on the invalid input should be replaced with text to remedy.
- Invite modal inputs given accessible names with labels.
Screenshots or screen recordings
GlAlert
on empty invite submit
UI
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
- Visit group or project member pages e.g.
- Press "Invite members" button
- Submit form without inviting members
- Should display move focus to alert
- Next focusable element is the search field with error state and message
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Closes to #371262 (closed)
Edited by Scott de Jonge