arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 10:20:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(CommandPalette): improve accessibility (#129)

Browse Source
This commit is contained in:
Kevin Marrec
2023-02-03 16:01:43 +01:00
committed by GitHub
parent fc1b3b2f17
commit bea47b5906
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -25,12 +25,19 @@
:class="$ui.commandPalette.input.close.base" :class="$ui.commandPalette.input.close.base"
:size="$ui.commandPalette.input.close.size" :size="$ui.commandPalette.input.close.size"
:variant="$ui.commandPalette.input.close.variant" :variant="$ui.commandPalette.input.close.variant"
aria-label="close" aria-label="Close"
@click="onClear" @click="onClear"
/> />
</div> </div>
<ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"> <ComboboxOptions
v-if="groups.length"
static
hold
as="div"
aria-label="Commands"
class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"
>
<CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" :group-attribute="groupAttribute" :command-attribute="commandAttribute"> <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" :group-attribute="groupAttribute" :command-attribute="commandAttribute">
<template v-for="(_, name) in $slots" #[name]="slotData"> <template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData" /> <slot :name="name" v-bind="slotData" />

12
src/runtime/components/navigation/CommandPaletteGroup.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<li class="p-2" role="option"> <div class="p-2" role="option">
<h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900"> <h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
{{ group[groupAttribute] }} {{ group[groupAttribute] }}
</h2> </h2>
<ul class="text-sm u-text-gray-700"> <div class="text-sm u-text-gray-700" role="listbox" :aria-label="group[groupAttribute]">
<ComboboxOption <ComboboxOption
v-for="(command, index) of group.commands" v-for="(command, index) of group.commands"
:key="`${group.key}-${index}`" :key="`${group.key}-${index}`"
@@ -13,7 +13,7 @@
:disabled="command.disabled" :disabled="command.disabled"
as="template" as="template"
> >
<li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']"> <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
<div class="flex items-center gap-2 min-w-0"> <div class="flex items-center gap-2 min-w-0">
<Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" /> <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
<Avatar <Avatar
@@ -45,10 +45,10 @@
</span> </span>
<span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span> <span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>
</slot> </slot>
</li> </div>
</ComboboxOption> </ComboboxOption>
</ul> </div>
</li> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">