Skip to content
This repository has been archived by the owner on Dec 12, 2024. It is now read-only.

Add ARIA labels to settings page - Vue #397

Merged
merged 6 commits into from
Oct 31, 2024
Merged

Add ARIA labels to settings page - Vue #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
abd9ec2
associate profile image label with input
Adjoa Oct 30, 2024
4a3a463
Merge branch 'main' into vue-settings-page-aria
Adjoa Oct 30, 2024
aae687d
aria-label <main> with settings region-id
Adjoa Oct 30, 2024
5db8edd
apply aria to label profile setting form
Adjoa Oct 30, 2024
2b42da0
label empty button
Adjoa Oct 30, 2024
c2b84f1
Merge branch 'main' into vue-settings-page-aria
blackgirlbytes Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion javascript/dwa-starter-vue/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 9 additions & 8 deletions javascript/dwa-starter-vue/src/views/SettingsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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/*"
Expand All @@ -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>
Expand All @@ -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>
Expand Down