From 9a7c524add9edf8e860d4ee22768f05ea3b2cc05 Mon Sep 17 00:00:00 2001
From: Adjoa <adjoa.darien@gmail.com>
Date: Wed, 30 Oct 2024 23:40:19 -0400
Subject: [PATCH] Add ARIA labels to settings page - Vue (#397)

* associate profile image label with input

* aria-label <main> with settings region-id

* apply aria to label profile setting form

* label empty button

---------

Co-authored-by: Rizel Scarlett <rizel@tbd.email>
---
 javascript/dwa-starter-vue/src/App.vue          |  2 +-
 .../dwa-starter-vue/src/views/SettingsView.vue  | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/javascript/dwa-starter-vue/src/App.vue b/javascript/dwa-starter-vue/src/App.vue
index daa36d4f..725b783b 100644
--- a/javascript/dwa-starter-vue/src/App.vue
+++ b/javascript/dwa-starter-vue/src/App.vue
@@ -9,7 +9,7 @@ import Sidebar from '@/components/Sidebar.vue'
       <Sidebar />
     </header>
 
-    <main class="p-4 lg:h-screen overflow-y-auto flex flex-col w-full">
+    <main class="p-4 lg:h-screen overflow-y-auto flex flex-col w-full" aria-labelledby="region-id">
       <RouterView />
     </main>
   </div>
diff --git a/javascript/dwa-starter-vue/src/views/SettingsView.vue b/javascript/dwa-starter-vue/src/views/SettingsView.vue
index 0f195b84..a4c2cc0c 100644
--- a/javascript/dwa-starter-vue/src/views/SettingsView.vue
+++ b/javascript/dwa-starter-vue/src/views/SettingsView.vue
@@ -89,10 +89,10 @@ const onSubmit = handleSubmit(async (values) => {
 
 <template>
   <div class="flex flex-col gap-4">
-    <h1>Settings</h1>
+    <h1 id="region-id">Settings</h1>
 
-    <h2>Profile Settings</h2>
-    <form class="lg:w-1/3 w-full space-y-6" @submit.prevent="onSubmit">
+    <h2 id="profile-form-id">Profile Settings</h2>
+    <form class="lg:w-1/3 w-full space-y-6" aria-labelledby="profile-form-id" @submit.prevent="onSubmit">
       <img
         v-if="profileImageSrc"
         :src="profileImageSrc"
@@ -104,8 +104,8 @@ const onSubmit = handleSubmit(async (values) => {
       <FormField name="profileImage" class="w-full">
         <FormItem>
           <FormLabel>Profile Image</FormLabel>
-          <FormControl>
-            <div class="flex items-center gap-2">
+          <div class="flex items-center gap-2">
+            <FormControl>
               <Input
                 type="file"
                 accept="image/*"
@@ -114,8 +114,8 @@ const onSubmit = handleSubmit(async (values) => {
                 :key="fileInputKey"
               />
               <Button type="button" @click="clearImage" v-if="profileImageSrc">Clear Image</Button>
-            </div>
-          </FormControl>
+            </FormControl>
+          </div>
           <FormDescription>Upload your profile image.</FormDescription>
           <FormMessage />
         </FormItem>
@@ -133,7 +133,8 @@ const onSubmit = handleSubmit(async (values) => {
       </FormField>
 
       <Button type="submit" :disabled="isSubmitting">
-        <ReloadIcon v-if="isSubmitting" class="w-4 h-4 mr-2 animate-spin" />
+        <ReloadIcon v-if="isSubmitting" class="w-4 h-4 mr-2 animate-spin"  />
+        <span v-if="isSubmitting" class="sr-only">Submitting your changes</span>
         <span v-else>Save</span>
       </Button>
     </form>