🎸 feat: a11y に対応した combobox の作成

[anko9801]

PR Type

Enhancement

---

Description

• InputSelectMultiple.vueとInputSelectSingle.vueのリファクタリングを実施し、コードの可読性とメンテナンス性を向上。
• キーボード操作の処理を改善し、switch文を導入。
• 新しいnavigateList関数を追加してリストナビゲーションのロジックを分離。
• ドロップダウンの開閉処理をopenDropdown関数に統一。
• アクセシビリティ向上のため、role="button"とtabindex="0"を追加。

---

Changes walkthrough 📝

Relevant files

Enhancement

InputSelectMultiple.vue 入力選択コンポーネントのリファクタリングとキーボード操作の改善                                                    src/components/shared/InputSelectMultiple.vue リファクタリング: 関数を分割し、コードの可読性を向上。 キーボード操作の処理をswitch文に変更し、コードの簡潔性を向上。 新しいnavigateList関数を追加し、リストナビゲーションのロジックを分離。 ドロップダウンの開閉処理をopenDropdown関数に統一。 +62/-68  InputSelectSingle.vue シングル選択コンポーネントのリファクタリングとアクセシビリティ改善                                                src/components/shared/InputSelectSingle.vue リファクタリング: ドロップダウンの開閉処理をopenDropdown関数に統一。 不要なcalcWidth計算を削除。 アクセシビリティ向上のため、role="button"とtabindex="0"を追加。 +8/-10

---

💡 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: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Issue The navigateList function assumes that listItemRefs.value is not null, but there is no null check before accessing listItemRefs.value[focusingListItemIndex.value]. This could lead to runtime errors if listItemRefs.value is null. const navigateList = (direction: 'up' | 'down') => { if (listItemRefs.value === null) return const length = searchedOptions.value.length const increment = direction === 'down' ? 1 : -1 focusingListItemIndex.value = (focusingListItemIndex.value + increment + length) % length const buttonEl = listItemRefs.value[focusingListItemIndex.value] .firstChild as HTMLButtonElement buttonEl?.focus({ preventScroll: false }) Accessibility Issue The role="button" and tabindex="0" attributes are added, but there is no explicit aria-label or aria-labelledby to describe the button's purpose for screen readers. :class="`relative ${disabled && 'cursor-not-allowed'}`"> <div role="button" tabindex="0" class="flex cursor-text items-center w-full py-1 pl-1 rounded border border-surface-secondary" :class="`${disabled && 'pointer-events-none'}`" @click.prevent="openDropdown" @keydown.enter.prevent="openDropdown" @keydown.space.prevent="openDropdown">