🎸 feat: フォームコントロールに対応するラベルを貼る

[anko9801]

PR Type

Enhancement

---

Description

• 管理ページのアクセシビリティを向上させるため、ARIA属性（role, aria-live, aria-labelledby）を追加しました。
• ラベルとフォーム要素を関連付けるために、for属性とid属性を導入しました。
• 適切なHTML構造を使用し、見出しレベルやtabindexを改善しました。
• 新規グループ作成ページのフォーム構造を整理し、アクセシビリティと可読性を向上させました。

---

Changes walkthrough 📝

Relevant files

Enhancement

AdminPage.vue Enhance accessibility for admin page components                    src/pages/AdminPage.vue Added ARIA attributes (role, aria-live, aria-labelledby) for improved accessibility. Updated labels with for attributes and associated them with input elements. Introduced id attributes to elements for better accessibility linking. Improved semantic structure by using proper heading levels and tabindex. +18/-11  NewGroupPage.vue Improve form accessibility and structure on new group page src/pages/NewGroupPage.vue Added id attributes to form elements and associated them with labels using for attributes. Improved form structure by reorganizing and aligning labels and inputs. Enhanced accessibility by ensuring proper semantic HTML and required attributes. Simplified and cleaned up the form layout for better readability and usability. +57/-59

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility Enhancement Validation Ensure that the added ARIA attributes (role, aria-live, aria-labelledby) and for/id attributes are correctly implemented and improve accessibility as intended. <div v-if="!isAdmin" class="p-2" role="alert" aria-live="assertive"> 権限がありません。 </div> <div class="flex flex-col gap-3"> <h2 id="admin-list" class="text-base font-medium" tabindex="0">管理者</h2> <ul class="flex gap-3" aria-labelledby="admin-list"> <li v-for="admin in admins" :key="admin"> <div class="border-text-primary rounded border px-2 text-center"> {{ userMap[admin] }} </div> </li> </ul> </div> <div class="flex flex-col gap-3"> <label for="add-admin" class="text-base font-medium" tabindex="0"> 管理者の操作 </label> <div class="flex flex-wrap gap-3"> <InputSelectMultiple id="add-admin" v-model="addList" aria-labelledby="manipulate-admin" class="flex-grow w-auto" :options="absentMembers" placeholder="追加する管理者を選択" /> <SimpleButton :disabled="isSending" font-size="lg" padding="sm" @click.stop="addAdmins(addList)"> 選択した管理者を追加 </SimpleButton> </div> <div class="flex flex-wrap gap-3"> <InputSelectMultiple id="delete-admin" v-model="removeList" aria-labelledby="manipulate-admin" class="flex-grow w-auto" :options="adminOptions" placeholder="削除する管理者を選択" /> <SimpleButton :disabled="isSending" font-size="lg" padding="sm" @click.stop="removeAdmins(removeList)"> 選択した管理者を削除 </SimpleButton> </div> </div> <div class="mt-6"> <label class="text-base font-medium" for="delete-tag">その他の操作</label> <div class="flex flex-wrap gap-3 mt-3"> <InputSelectMultiple id="delete-tag" v-model="deleteTagList" class="flex-grow w-auto" :options="tagIdOptions" placeholder="削除するタグを選択" /> Label and Input Association Verify that the for and id attributes for labels and inputs are correctly paired and functional, especially for accessibility improvements. <div class="mb-6"> <h1 class="text-2xl">グループの新規作成</h1> </div> <form class="flex flex-col gap-6"> <div class="flex flex-col gap-3"> <label class="font-medium" for="group-name">グループ名</label> <InputText id="group-name" v-model="group.name" auto-focus placeholder="グループ名を入力" required /> </div> <div class="flex flex-col gap-3"> <label class="font-medium" for="group-description">説明</label> <MarkdownTextarea id="group-description" v-model="group.description" placeholder="" required /> </div> <div class="flex flex-col gap-3"> <label class="font-medium" for="group-budget">予算</label> <div class="flex w-1/2"> <InputNumber id="group-budget" v-model="group.budget" class="mr-2" :min="1" required />円 </div> </div> <div class="flex flex-col gap-3"> <label class="font-medium" for="group-owner">オーナー</label> <InputSelectMultiple id="group-owner" v-model="group.owners" :options="userOptions" placeholder="オーナーを選択" /> </div> <div class="flex flex-col gap-3"> <label class="font-medium" for="group-member">メンバー</label> <InputSelectMultiple id="group-member" v-model="group.members" :options="userOptions" placeholder="メンバーを選択" /> </div> <SimpleButton class="ml-auto mt-8 block" :disabled="isSending" font-size="xl" padding="md" @click="handleCreateGroup"> グループを作成 </SimpleButton> </form>