Make save state icon accessible

[robertknight]

Extract the save status icons into a new component and make it accessible by:

• Adding a role="status" container so that changes in labels are announced
• Adding accessible labels to the saving / saved indicators

Testing:

1. Apply the diff below
2. Select a group in h and click the "Edit group" link
3. Activate screen reader
4. Click the "Save changes" button

You should hear "Saving changes..." being read out after clicking the button and then "Changes saved".

diff --git a/h/static/scripts/group-forms/utils/api.ts b/h/static/scripts/group-forms/utils/api.ts
index 273dc64ad..26ca218d5 100644
--- a/h/static/scripts/group-forms/utils/api.ts
+++ b/h/static/scripts/group-forms/utils/api.ts
@@ -109,5 +109,8 @@ export async function callAPI(
     });
   }
 
+  // TESTING
+  await new Promise(r => setTimeout(r, 2000));
+
   return responseJSON;
 }

Known issues:

I have noticed that when there is no save delay at all, Chrome does not always announce "Changes saved" if the form is edited again and re-saved after the first use of "Save changes". I'd like to investigate further, but I want to deploy this initial implementation first.

[robertknight]

Related to this, we don't currently have any mechanism preventing the user from accidentally closing the tab if they have unsaved changes. The LMS app has an implementation of this in the useWarnOnPageUnload hook.

[acelaya]

LGTM