feat: 為列表元件添加角色屬性以改善可訪問性

This commit is contained in:
skytek_xinliang
2026-03-31 15:03:22 +08:00
parent 8dbae6c614
commit da96d64f75
5 changed files with 144 additions and 136 deletions
@@ -136,7 +136,7 @@
</template> </template>
</v-tooltip> </v-tooltip>
</template> </template>
<v-list density="compact" width="180"> <v-list role="none" density="compact" width="180">
<v-list-subheader class="text-subtitle-1 py-2">顯示設定</v-list-subheader> <v-list-subheader class="text-subtitle-1 py-2">顯示設定</v-list-subheader>
<v-list-item> <v-list-item>
<v-switch <v-switch
@@ -1,5 +1,12 @@
<template> <template>
<v-list v-model:opened="openedModel" color="primary" density="compact" prepend-gap="8"> <nav aria-label="sidebar navigation">
<v-list
role="none"
v-model:opened="openedModel"
color="primary"
density="compact"
prepend-gap="8"
>
<template v-for="item in menuItems" :key="item.path ?? item.title"> <template v-for="item in menuItems" :key="item.path ?? item.title">
<v-list-group <v-list-group
v-if="item.subItems?.length" v-if="item.subItems?.length"
@@ -9,7 +16,7 @@
<template #activator="{ props: activatorProps }"> <template #activator="{ props: activatorProps }">
<v-list-item <v-list-item
v-bind="isShrink ? undefined : activatorProps" v-bind="isShrink ? undefined : activatorProps"
role="listitem" role="button"
:aria-selected="undefined" :aria-selected="undefined"
:class="{ 'px-0': isShrink }" :class="{ 'px-0': isShrink }"
:link="isNavigable(item) && !!item.path" :link="isNavigable(item) && !!item.path"
@@ -54,7 +61,7 @@
<template #activator="{ props: subProps }"> <template #activator="{ props: subProps }">
<v-list-item <v-list-item
v-bind="subProps" v-bind="subProps"
role="listitem" role="button"
:aria-selected="undefined" :aria-selected="undefined"
:link="isNavigable(subItem)" :link="isNavigable(subItem)"
:prepend-icon="subItem.icon || mdiMenuRight" :prepend-icon="subItem.icon || mdiMenuRight"
@@ -149,6 +156,7 @@
</v-list-item> </v-list-item>
</template> </template>
</v-list> </v-list>
</nav>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -1,6 +1,6 @@
<template> <template>
<v-sheet class="mobile-favorites-panel d-flex flex-column" color="surface"> <v-sheet class="mobile-favorites-panel d-flex flex-column" color="surface">
<v-list class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable"> <v-list role="none" class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable">
<v-list-item <v-list-item
v-for="item in favoriteItems" v-for="item in favoriteItems"
:key="item.path ?? item.title" :key="item.path ?? item.title"
@@ -1,6 +1,6 @@
<template> <template>
<v-sheet class="mobile-menu-panel d-flex flex-column" color="surface"> <v-sheet class="mobile-menu-panel d-flex flex-column" color="surface">
<v-list class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable"> <v-list role="none" class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable">
<v-list-item <v-list-item
v-for="item in mobileCurrentItems" v-for="item in mobileCurrentItems"
:key="item.path ?? item.title" :key="item.path ?? item.title"
+1 -1
View File
@@ -20,7 +20,7 @@
variant="text" variant="text"
></v-btn> ></v-btn>
</template> </template>
<v-list density="compact"> <v-list role="none" density="compact">
<v-list-item <v-list-item
v-for="localeOption in localeOptions" v-for="localeOption in localeOptions"
:key="localeOption" :key="localeOption"