mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-08 06:30:04 +00:00
Style: Design System use across more components (#6705)
## Summary Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to be working on to consolidate our different buttons soon. ## Changes - **What**: Replace light/dark colors with theme aware design system tokens. ## Review Focus Double check the chosen colors for the components ## Screenshots | Before | After | | ------ | ----- | | <img width="607" height="432" alt="image" src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104" /> | <img width="646" height="488" alt="image" src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63" /> | ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
@@ -1,380 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import type { MultiSelectProps } from 'primevue/multiselect'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import MultiSelect from './MultiSelect.vue'
|
||||
import type { SelectOption } from './types'
|
||||
|
||||
// Combine our component props with PrimeVue MultiSelect props
|
||||
interface ExtendedProps extends Partial<MultiSelectProps> {
|
||||
// Our custom props
|
||||
label?: string
|
||||
showSearchBox?: boolean
|
||||
showSelectedCount?: boolean
|
||||
showClearButton?: boolean
|
||||
searchPlaceholder?: string
|
||||
listMaxHeight?: string
|
||||
popoverMinWidth?: string
|
||||
popoverMaxWidth?: string
|
||||
// Override modelValue type to match our Option type
|
||||
modelValue?: SelectOption[]
|
||||
}
|
||||
|
||||
const meta: Meta<ExtendedProps> = {
|
||||
title: 'Components/Input/MultiSelect/Accessibility',
|
||||
component: MultiSelect,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
# MultiSelect Accessibility Guide
|
||||
|
||||
This MultiSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
- **Tab** - Focus the trigger button
|
||||
- **Enter/Space** - Open/close dropdown when focused
|
||||
- **Arrow Up/Down** - Navigate through options when dropdown is open
|
||||
- **Enter/Space** - Select/deselect options when navigating
|
||||
- **Escape** - Close dropdown
|
||||
|
||||
## Screen Reader Support
|
||||
|
||||
- Uses \`role="combobox"\` to identify as dropdown
|
||||
- \`aria-haspopup="listbox"\` indicates popup contains list
|
||||
- \`aria-expanded\` shows dropdown state
|
||||
- \`aria-label\` provides accessible name with i18n fallback
|
||||
- Selected count announced to screen readers
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
1. **Tab Navigation**: Use Tab key to focus the component
|
||||
2. **Keyboard Opening**: Press Enter or Space to open dropdown
|
||||
3. **Option Navigation**: Use Arrow keys to navigate options
|
||||
4. **Selection**: Press Enter/Space to select options
|
||||
5. **Closing**: Press Escape to close dropdown
|
||||
6. **Screen Reader**: Test with screen reader software
|
||||
|
||||
Try these stories with keyboard-only navigation!
|
||||
`
|
||||
}
|
||||
}
|
||||
},
|
||||
argTypes: {
|
||||
label: {
|
||||
control: 'text',
|
||||
description: 'Label for the trigger button'
|
||||
},
|
||||
showSearchBox: {
|
||||
control: 'boolean',
|
||||
description: 'Show search box in dropdown header'
|
||||
},
|
||||
showSelectedCount: {
|
||||
control: 'boolean',
|
||||
description: 'Show selected count in dropdown header'
|
||||
},
|
||||
showClearButton: {
|
||||
control: 'boolean',
|
||||
description: 'Show clear all button in dropdown header'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const frameworkOptions = [
|
||||
{ name: 'React', value: 'react' },
|
||||
{ name: 'Vue', value: 'vue' },
|
||||
{ name: 'Angular', value: 'angular' },
|
||||
{ name: 'Svelte', value: 'svelte' },
|
||||
{ name: 'TypeScript', value: 'typescript' },
|
||||
{ name: 'JavaScript', value: 'javascript' }
|
||||
]
|
||||
|
||||
export const KeyboardNavigationDemo: Story = {
|
||||
render: (args) => ({
|
||||
components: { MultiSelect },
|
||||
setup() {
|
||||
const selectedFrameworks = ref<SelectOption[]>([])
|
||||
const searchQuery = ref('')
|
||||
|
||||
return {
|
||||
args: {
|
||||
...args,
|
||||
options: frameworkOptions,
|
||||
modelValue: selectedFrameworks,
|
||||
'onUpdate:modelValue': (value: SelectOption[]) => {
|
||||
selectedFrameworks.value = value
|
||||
},
|
||||
'onUpdate:searchQuery': (value: string) => {
|
||||
searchQuery.value = value
|
||||
}
|
||||
},
|
||||
selectedFrameworks,
|
||||
searchQuery
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="space-y-4 p-4">
|
||||
<div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
|
||||
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
|
||||
Use your keyboard to navigate this MultiSelect:
|
||||
</p>
|
||||
<ol class="text-sm text-smoke-600 list-decimal list-inside space-y-1">
|
||||
<li><strong>Tab</strong> to focus the dropdown</li>
|
||||
<li><strong>Enter/Space</strong> to open dropdown</li>
|
||||
<li><strong>Arrow Up/Down</strong> to navigate options</li>
|
||||
<li><strong>Enter/Space</strong> to select options</li>
|
||||
<li><strong>Escape</strong> to close dropdown</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700">
|
||||
Select Frameworks (Keyboard Navigation Test)
|
||||
</label>
|
||||
<MultiSelect v-bind="args" class="w-80" />
|
||||
<p class="text-xs text-smoke-500">
|
||||
Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}),
|
||||
args: {
|
||||
label: 'Choose Frameworks',
|
||||
showSearchBox: true,
|
||||
showSelectedCount: true,
|
||||
showClearButton: true
|
||||
}
|
||||
}
|
||||
|
||||
export const ScreenReaderFriendly: Story = {
|
||||
render: (args) => ({
|
||||
components: { MultiSelect },
|
||||
setup() {
|
||||
const selectedColors = ref<SelectOption[]>([])
|
||||
const selectedSizes = ref<SelectOption[]>([])
|
||||
|
||||
const colorOptions = [
|
||||
{ name: 'Red', value: 'red' },
|
||||
{ name: 'Blue', value: 'blue' },
|
||||
{ name: 'Green', value: 'green' },
|
||||
{ name: 'Yellow', value: 'yellow' }
|
||||
]
|
||||
|
||||
const sizeOptions = [
|
||||
{ name: 'Small', value: 'sm' },
|
||||
{ name: 'Medium', value: 'md' },
|
||||
{ name: 'Large', value: 'lg' },
|
||||
{ name: 'Extra Large', value: 'xl' }
|
||||
]
|
||||
|
||||
return {
|
||||
selectedColors,
|
||||
selectedSizes,
|
||||
colorOptions,
|
||||
sizeOptions,
|
||||
args
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="space-y-6 p-4">
|
||||
<div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
|
||||
<p class="text-sm text-smoke-600 mb-2">
|
||||
These dropdowns have proper ARIA attributes and labels for screen readers:
|
||||
</p>
|
||||
<ul class="text-sm text-smoke-600 list-disc list-inside space-y-1">
|
||||
<li><code>role="combobox"</code> identifies as dropdown</li>
|
||||
<li><code>aria-haspopup="listbox"</code> indicates popup type</li>
|
||||
<li><code>aria-expanded</code> shows open/closed state</li>
|
||||
<li><code>aria-label</code> provides accessible name</li>
|
||||
<li>Selection count announced to assistive technology</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700">
|
||||
Color Preferences
|
||||
</label>
|
||||
<MultiSelect
|
||||
v-model="selectedColors"
|
||||
:options="colorOptions"
|
||||
label="Select colors"
|
||||
:show-selected-count="true"
|
||||
:show-clear-button="true"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-smoke-500" aria-live="polite">
|
||||
{{ selectedColors.length }} color(s) selected
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700">
|
||||
Size Preferences
|
||||
</label>
|
||||
<MultiSelect
|
||||
v-model="selectedSizes"
|
||||
:options="sizeOptions"
|
||||
label="Select sizes"
|
||||
:show-selected-count="true"
|
||||
:show-search-box="true"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-smoke-500" aria-live="polite">
|
||||
{{ selectedSizes.length }} size(s) selected
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
export const FocusManagement: Story = {
|
||||
render: (args) => ({
|
||||
components: { MultiSelect },
|
||||
setup() {
|
||||
const selectedItems = ref<SelectOption[]>([])
|
||||
const focusTestOptions = [
|
||||
{ name: 'Option A', value: 'a' },
|
||||
{ name: 'Option B', value: 'b' },
|
||||
{ name: 'Option C', value: 'c' }
|
||||
]
|
||||
|
||||
return {
|
||||
selectedItems,
|
||||
focusTestOptions,
|
||||
args
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="space-y-4 p-4">
|
||||
<div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
|
||||
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
|
||||
Test focus behavior with multiple form elements:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 mb-1">
|
||||
Before MultiSelect
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Previous field"
|
||||
class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 mb-1">
|
||||
MultiSelect (Test Focus Ring)
|
||||
</label>
|
||||
<MultiSelect
|
||||
v-model="selectedItems"
|
||||
:options="focusTestOptions"
|
||||
label="Focus test dropdown"
|
||||
:show-selected-count="true"
|
||||
class="w-64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 mb-1">
|
||||
After MultiSelect
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Next field"
|
||||
class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
Submit Button
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-smoke-600 mt-4">
|
||||
<strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
export const AccessibilityChecklist: Story = {
|
||||
render: () => ({
|
||||
template: `
|
||||
<div class="max-w-4xl mx-auto p-6 space-y-6">
|
||||
<div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Color Contrast:</strong> Meets WCAG AA requirements</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
|
||||
<ol class="space-y-2 text-sm list-decimal list-inside">
|
||||
<li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
|
||||
<li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
|
||||
<li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
|
||||
<li><strong>Tab Order:</strong> Verify logical progression</li>
|
||||
<li><strong>Announcements:</strong> Check state changes are announced</li>
|
||||
<li><strong>Escape Behavior:</strong> Escape always closes dropdown</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
|
||||
<h4 class="font-semibold mb-2">🎯 Quick Test</h4>
|
||||
<p class="text-sm text-smoke-700 dark-theme:text-smoke-300">
|
||||
Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
|
||||
If you can successfully navigate and make selections, the accessibility implementation is working!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
@@ -102,7 +102,7 @@ export const Default: Story = {
|
||||
:showClearButton="args.showClearButton"
|
||||
:searchPlaceholder="args.searchPlaceholder"
|
||||
/>
|
||||
<div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
|
||||
<div class="mt-4 p-3 bg-base-background rounded">
|
||||
<p class="text-sm">Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,7 +135,7 @@ export const WithPreselectedValues: Story = {
|
||||
:showClearButton="args.showClearButton"
|
||||
:searchPlaceholder="args.searchPlaceholder"
|
||||
/>
|
||||
<div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
|
||||
<div class="mt-4 p-3 bg-base-background rounded">
|
||||
<p class="text-sm">Selected: {{ selected.map(s => s.name).join(', ') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -229,7 +229,7 @@ export const MultipleSelectors: Story = {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-gray-50 dark-theme:bg-zinc-800 rounded">
|
||||
<div class="p-4 bg-base-background rounded">
|
||||
<h4 class="font-medium mt-0">Current Selection:</h4>
|
||||
<div class="flex flex-col text-sm">
|
||||
<p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
|
||||
|
||||
@@ -13,12 +13,77 @@
|
||||
option-label="name"
|
||||
unstyled
|
||||
:max-selected-labels="0"
|
||||
:pt="pt"
|
||||
:pt="{
|
||||
root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
|
||||
class: cn(
|
||||
'h-10 relative inline-flex cursor-pointer select-none',
|
||||
'rounded-lg bg-base-background text-base-foreground',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'border-[2.5px] border-solid',
|
||||
selectedCount > 0
|
||||
? 'border-node-component-border'
|
||||
: 'border-transparent',
|
||||
'focus-within:border-node-component-border',
|
||||
{ 'opacity-60 cursor-default': props.disabled }
|
||||
)
|
||||
}),
|
||||
labelContainer: {
|
||||
class:
|
||||
'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
|
||||
},
|
||||
label: {
|
||||
class: 'p-0'
|
||||
},
|
||||
dropdown: {
|
||||
class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
|
||||
},
|
||||
header: () => ({
|
||||
class:
|
||||
showSearchBox || showSelectedCount || showClearButton
|
||||
? 'block'
|
||||
: 'hidden'
|
||||
}),
|
||||
// Overlay & list visuals unchanged
|
||||
overlay: {
|
||||
class: cn(
|
||||
'mt-2 rounded-lg py-2 px-2',
|
||||
'bg-base-background',
|
||||
'text-base-foreground',
|
||||
'border border-solid border-border-default'
|
||||
)
|
||||
},
|
||||
listContainer: () => ({
|
||||
style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
|
||||
class: 'scrollbar-custom'
|
||||
}),
|
||||
list: {
|
||||
class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
|
||||
},
|
||||
// Option row hover and focus tone
|
||||
option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
|
||||
class: cn(
|
||||
'flex gap-2 items-center h-10 px-2 rounded-lg',
|
||||
'hover:bg-secondary-background-hover',
|
||||
// Add focus/highlight state for keyboard navigation
|
||||
context?.focused &&
|
||||
'bg-secondary-background-selected hover:bg-secondary-background-selected'
|
||||
)
|
||||
}),
|
||||
// Hide built-in checkboxes entirely via PT (no :deep)
|
||||
pcHeaderCheckbox: {
|
||||
root: { class: 'hidden' },
|
||||
style: { display: 'none' }
|
||||
},
|
||||
pcOptionCheckbox: {
|
||||
root: { class: 'hidden' },
|
||||
style: { display: 'none' }
|
||||
}
|
||||
}"
|
||||
:aria-label="label || t('g.multiSelectDropdown')"
|
||||
role="combobox"
|
||||
:aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
:tabindex="0"
|
||||
tabindex="0"
|
||||
>
|
||||
<template
|
||||
v-if="showSearchBox || showSelectedCount || showClearButton"
|
||||
@@ -39,7 +104,7 @@
|
||||
>
|
||||
<span
|
||||
v-if="showSelectedCount"
|
||||
class="px-1 text-sm text-neutral-400 dark-theme:text-zinc-500"
|
||||
class="px-1 text-sm text-base-foreground"
|
||||
>
|
||||
{{
|
||||
selectedCount > 0
|
||||
@@ -52,22 +117,22 @@
|
||||
:label="$t('g.clearAll')"
|
||||
type="transparent"
|
||||
size="fit-content"
|
||||
class="text-sm text-blue-500 dark-theme:text-blue-600"
|
||||
class="text-sm text-text-primary"
|
||||
@click.stop="selectedItems = []"
|
||||
/>
|
||||
</div>
|
||||
<div class="my-4 h-px bg-zinc-200 dark-theme:bg-zinc-700"></div>
|
||||
<div class="my-4 h-px bg-border-default"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Trigger value (keep text scale identical) -->
|
||||
<template #value>
|
||||
<span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{{ label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="selectedCount > 0"
|
||||
class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white dark-theme:bg-blue-500"
|
||||
class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
|
||||
>
|
||||
{{ selectedCount }}
|
||||
</span>
|
||||
@@ -85,8 +150,8 @@
|
||||
class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
|
||||
:class="
|
||||
slotProps.selected
|
||||
? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
|
||||
: 'bg-neutral-100 dark-theme:bg-zinc-700'
|
||||
? 'bg-primary-background'
|
||||
: 'bg-secondary-background'
|
||||
"
|
||||
>
|
||||
<i
|
||||
@@ -203,70 +268,4 @@ const filteredOptions = computed(() => {
|
||||
|
||||
return [...selectedButNotInResults, ...searchResults]
|
||||
})
|
||||
|
||||
const pt = computed(() => ({
|
||||
root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
|
||||
class: cn(
|
||||
'h-10 relative inline-flex cursor-pointer select-none',
|
||||
'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'border-[2.5px] border-solid',
|
||||
selectedCount.value > 0
|
||||
? 'border-blue-400 dark-theme:border-blue-500'
|
||||
: 'border-transparent',
|
||||
'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
|
||||
{ 'opacity-60 cursor-default': props.disabled }
|
||||
)
|
||||
}),
|
||||
labelContainer: {
|
||||
class:
|
||||
'flex-1 flex items-center overflow-hidden whitespace-nowrap pl-4 py-2 '
|
||||
},
|
||||
label: {
|
||||
class: 'p-0'
|
||||
},
|
||||
dropdown: {
|
||||
class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
|
||||
},
|
||||
header: () => ({
|
||||
class:
|
||||
showSearchBox || showSelectedCount || showClearButton ? 'block' : 'hidden'
|
||||
}),
|
||||
// Overlay & list visuals unchanged
|
||||
overlay: {
|
||||
class: cn(
|
||||
'mt-2 rounded-lg py-2 px-2',
|
||||
'bg-white dark-theme:bg-zinc-800',
|
||||
'text-neutral dark-theme:text-white',
|
||||
'border border-solid border-neutral-200 dark-theme:border-zinc-700'
|
||||
)
|
||||
},
|
||||
listContainer: () => ({
|
||||
style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
|
||||
class: 'scrollbar-custom'
|
||||
}),
|
||||
list: {
|
||||
class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
|
||||
},
|
||||
// Option row hover and focus tone
|
||||
option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
|
||||
class: [
|
||||
'flex gap-2 items-center h-10 px-2 rounded-lg',
|
||||
'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
|
||||
// Add focus/highlight state for keyboard navigation
|
||||
{
|
||||
'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context?.focused
|
||||
}
|
||||
]
|
||||
}),
|
||||
// Hide built-in checkboxes entirely via PT (no :deep)
|
||||
pcHeaderCheckbox: {
|
||||
root: { class: 'hidden' },
|
||||
style: { display: 'none' }
|
||||
},
|
||||
pcOptionCheckbox: {
|
||||
root: { class: 'hidden' },
|
||||
style: { display: 'none' }
|
||||
}
|
||||
}))
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="wrapperStyle" @click="focusInput">
|
||||
<i class="icon-[lucide--search]" :class="iconColorStyle" />
|
||||
<i class="icon-[lucide--search] text-muted" />
|
||||
<InputText
|
||||
ref="input"
|
||||
v-model="internalSearchQuery"
|
||||
@@ -12,7 +12,7 @@
|
||||
"
|
||||
type="text"
|
||||
unstyled
|
||||
:class="inputStyle"
|
||||
class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm text-base-foreground"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -72,18 +72,13 @@ const focusInput = () => {
|
||||
onMounted(() => autofocus && focusInput())
|
||||
|
||||
const wrapperStyle = computed(() => {
|
||||
const baseClasses = [
|
||||
'relative flex w-full items-center gap-2',
|
||||
'bg-white dark-theme:bg-zinc-800',
|
||||
'cursor-text'
|
||||
]
|
||||
const baseClasses =
|
||||
'relative flex w-full items-center gap-2 bg-base-background cursor-text'
|
||||
|
||||
if (showBorder) {
|
||||
return cn(
|
||||
...baseClasses,
|
||||
'rounded p-2',
|
||||
'border border-solid',
|
||||
'border-zinc-200 dark-theme:border-zinc-700'
|
||||
baseClasses,
|
||||
'rounded p-2 border border-solid border-border-default'
|
||||
)
|
||||
}
|
||||
|
||||
@@ -93,20 +88,6 @@ const wrapperStyle = computed(() => {
|
||||
lg: 'h-10 px-4 py-2' // Matches button md size
|
||||
}[size]
|
||||
|
||||
return cn(...baseClasses, 'rounded-lg', sizeClasses)
|
||||
})
|
||||
|
||||
const inputStyle = computed(() => {
|
||||
return cn(
|
||||
'absolute inset-0 w-full h-full pl-11',
|
||||
'border-none outline-none bg-transparent',
|
||||
'text-sm text-neutral dark-theme:text-white'
|
||||
)
|
||||
})
|
||||
|
||||
const iconColorStyle = computed(() => {
|
||||
return cn(
|
||||
!showBorder ? 'text-neutral' : ['text-zinc-300', 'dark-theme:text-zinc-700']
|
||||
)
|
||||
return cn(baseClasses, 'rounded-lg', sizeClasses)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,464 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import SingleSelect from './SingleSelect.vue'
|
||||
|
||||
interface SingleSelectProps {
|
||||
label?: string
|
||||
options?: Array<{ name: string; value: string }>
|
||||
listMaxHeight?: string
|
||||
popoverMinWidth?: string
|
||||
popoverMaxWidth?: string
|
||||
modelValue?: string | null
|
||||
}
|
||||
|
||||
const meta: Meta<SingleSelectProps> = {
|
||||
title: 'Components/Input/SingleSelect/Accessibility',
|
||||
component: SingleSelect,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
# SingleSelect Accessibility Guide
|
||||
|
||||
This SingleSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
- **Tab** - Focus the trigger button
|
||||
- **Enter/Space** - Open/close dropdown when focused
|
||||
- **Arrow Up/Down** - Navigate through options when dropdown is open
|
||||
- **Enter/Space** - Select option when navigating
|
||||
- **Escape** - Close dropdown
|
||||
|
||||
## Screen Reader Support
|
||||
|
||||
- Uses \`role="combobox"\` to identify as dropdown
|
||||
- \`aria-haspopup="listbox"\` indicates popup contains list
|
||||
- \`aria-expanded\` shows dropdown state
|
||||
- \`aria-label\` provides accessible name with i18n fallback
|
||||
- Selected option announced to screen readers
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
1. **Tab Navigation**: Use Tab key to focus the component
|
||||
2. **Keyboard Opening**: Press Enter or Space to open dropdown
|
||||
3. **Option Navigation**: Use Arrow keys to navigate options
|
||||
4. **Selection**: Press Enter/Space to select an option
|
||||
5. **Closing**: Press Escape to close dropdown
|
||||
6. **Screen Reader**: Test with screen reader software
|
||||
|
||||
Try these stories with keyboard-only navigation!
|
||||
`
|
||||
}
|
||||
}
|
||||
},
|
||||
argTypes: {
|
||||
label: {
|
||||
control: 'text',
|
||||
description: 'Label for the trigger button'
|
||||
},
|
||||
listMaxHeight: {
|
||||
control: 'text',
|
||||
description: 'Maximum height of dropdown list'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const sortOptions = [
|
||||
{ name: 'Name A → Z', value: 'name-asc' },
|
||||
{ name: 'Name Z → A', value: 'name-desc' },
|
||||
{ name: 'Most Popular', value: 'popular' },
|
||||
{ name: 'Most Recent', value: 'recent' },
|
||||
{ name: 'File Size', value: 'size' }
|
||||
]
|
||||
|
||||
const priorityOptions = [
|
||||
{ name: 'High Priority', value: 'high' },
|
||||
{ name: 'Medium Priority', value: 'medium' },
|
||||
{ name: 'Low Priority', value: 'low' },
|
||||
{ name: 'No Priority', value: 'none' }
|
||||
]
|
||||
|
||||
export const KeyboardNavigationDemo: Story = {
|
||||
render: (args) => ({
|
||||
components: { SingleSelect },
|
||||
setup() {
|
||||
const selectedSort = ref<string | null>(null)
|
||||
const selectedPriority = ref<string | null>('medium')
|
||||
|
||||
return {
|
||||
args,
|
||||
selectedSort,
|
||||
selectedPriority,
|
||||
sortOptions,
|
||||
priorityOptions
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="space-y-6 p-4">
|
||||
<div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
|
||||
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
|
||||
Use your keyboard to navigate these SingleSelect dropdowns:
|
||||
</p>
|
||||
<ol class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-decimal list-inside space-y-1">
|
||||
<li><strong>Tab</strong> to focus the dropdown</li>
|
||||
<li><strong>Enter/Space</strong> to open dropdown</li>
|
||||
<li><strong>Arrow Up/Down</strong> to navigate options</li>
|
||||
<li><strong>Enter/Space</strong> to select option</li>
|
||||
<li><strong>Escape</strong> to close dropdown</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
|
||||
Sort Order
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="selectedSort"
|
||||
:options="sortOptions"
|
||||
label="Choose sort order"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="text-xs text-smoke-500">
|
||||
Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
|
||||
Task Priority (With Icon)
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="selectedPriority"
|
||||
:options="priorityOptions"
|
||||
label="Set priority level"
|
||||
class="w-full"
|
||||
>
|
||||
<template #icon>
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</template>
|
||||
</SingleSelect>
|
||||
<p class="text-xs text-smoke-500">
|
||||
Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
export const ScreenReaderFriendly: Story = {
|
||||
render: (args) => ({
|
||||
components: { SingleSelect },
|
||||
setup() {
|
||||
const selectedLanguage = ref<string | null>('en')
|
||||
const selectedTheme = ref<string | null>(null)
|
||||
|
||||
const languageOptions = [
|
||||
{ name: 'English', value: 'en' },
|
||||
{ name: 'Spanish', value: 'es' },
|
||||
{ name: 'French', value: 'fr' },
|
||||
{ name: 'German', value: 'de' },
|
||||
{ name: 'Japanese', value: 'ja' }
|
||||
]
|
||||
|
||||
const themeOptions = [
|
||||
{ name: 'Light Theme', value: 'light' },
|
||||
{ name: 'Dark Theme', value: 'dark' },
|
||||
{ name: 'Auto (System)', value: 'auto' },
|
||||
{ name: 'High Contrast', value: 'contrast' }
|
||||
]
|
||||
|
||||
return {
|
||||
selectedLanguage,
|
||||
selectedTheme,
|
||||
languageOptions,
|
||||
themeOptions,
|
||||
args
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="space-y-6 p-4">
|
||||
<div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
|
||||
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-2">
|
||||
These dropdowns have proper ARIA attributes and labels for screen readers:
|
||||
</p>
|
||||
<ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-disc list-inside space-y-1">
|
||||
<li><code>role="combobox"</code> identifies as dropdown</li>
|
||||
<li><code>aria-haspopup="listbox"</code> indicates popup type</li>
|
||||
<li><code>aria-expanded</code> shows open/closed state</li>
|
||||
<li><code>aria-label</code> provides accessible name</li>
|
||||
<li>Selected option value announced to assistive technology</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="language-label">
|
||||
Preferred Language
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="selectedLanguage"
|
||||
:options="languageOptions"
|
||||
label="Select language"
|
||||
class="w-full"
|
||||
aria-labelledby="language-label"
|
||||
/>
|
||||
<p class="text-xs text-smoke-500" aria-live="polite">
|
||||
Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="theme-label">
|
||||
Interface Theme
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="selectedTheme"
|
||||
:options="themeOptions"
|
||||
label="Select theme"
|
||||
class="w-full"
|
||||
aria-labelledby="theme-label"
|
||||
/>
|
||||
<p class="text-xs text-smoke-500" aria-live="polite">
|
||||
Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
|
||||
<ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 space-y-1">
|
||||
<li>• Listen for role announcements when focusing</li>
|
||||
<li>• Verify dropdown state changes are announced</li>
|
||||
<li>• Check that selected values are spoken clearly</li>
|
||||
<li>• Ensure option navigation is announced</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
export const FormIntegration: Story = {
|
||||
render: (args) => ({
|
||||
components: { SingleSelect },
|
||||
setup() {
|
||||
const formData = ref({
|
||||
category: null as string | null,
|
||||
status: 'draft' as string | null,
|
||||
assignee: null as string | null
|
||||
})
|
||||
|
||||
const categoryOptions = [
|
||||
{ name: 'Bug Report', value: 'bug' },
|
||||
{ name: 'Feature Request', value: 'feature' },
|
||||
{ name: 'Documentation', value: 'docs' },
|
||||
{ name: 'Question', value: 'question' }
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ name: 'Draft', value: 'draft' },
|
||||
{ name: 'Review', value: 'review' },
|
||||
{ name: 'Approved', value: 'approved' },
|
||||
{ name: 'Published', value: 'published' }
|
||||
]
|
||||
|
||||
const assigneeOptions = [
|
||||
{ name: 'Alice Johnson', value: 'alice' },
|
||||
{ name: 'Bob Smith', value: 'bob' },
|
||||
{ name: 'Carol Davis', value: 'carol' },
|
||||
{ name: 'David Wilson', value: 'david' }
|
||||
]
|
||||
|
||||
const handleSubmit = () => {
|
||||
alert('Form submitted with: ' + JSON.stringify(formData.value, null, 2))
|
||||
}
|
||||
|
||||
return {
|
||||
formData,
|
||||
categoryOptions,
|
||||
statusOptions,
|
||||
assigneeOptions,
|
||||
handleSubmit,
|
||||
args
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="max-w-2xl mx-auto p-6">
|
||||
<div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
|
||||
<h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
|
||||
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300">
|
||||
Test keyboard navigation through a complete form with SingleSelect components.
|
||||
Tab order should be logical and all elements should be accessible.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
|
||||
Title *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Enter a title"
|
||||
class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
|
||||
Category *
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="formData.category"
|
||||
:options="categoryOptions"
|
||||
label="Select category"
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
|
||||
Status
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="formData.status"
|
||||
:options="statusOptions"
|
||||
label="Select status"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
|
||||
Assignee
|
||||
</label>
|
||||
<SingleSelect
|
||||
v-model="formData.assignee"
|
||||
:options="assigneeOptions"
|
||||
label="Select assignee"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
rows="4"
|
||||
placeholder="Enter description"
|
||||
class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 bg-smoke-300 dark-theme:bg-smoke-600 text-smoke-700 dark-theme:text-smoke-200 rounded-md hover:bg-smoke-400 dark-theme:hover:bg-smoke-500 focus:ring-2 focus:ring-smoke-500 focus:ring-offset-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg">
|
||||
<h4 class="font-semibold mb-2">Current Form Data:</h4>
|
||||
<pre class="text-xs text-smoke-600 dark-theme:text-smoke-300">{{ JSON.stringify(formData, null, 2) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
export const AccessibilityChecklist: Story = {
|
||||
render: () => ({
|
||||
template: `
|
||||
<div class="max-w-4xl mx-auto p-6 space-y-6">
|
||||
<div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
|
||||
<h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-green-500 mr-2">✓</span>
|
||||
<span><strong>Form Integration:</strong> Works properly in forms with other elements</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
|
||||
<ol class="space-y-2 text-sm list-decimal list-inside">
|
||||
<li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
|
||||
<li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
|
||||
<li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
|
||||
<li><strong>Tab Order:</strong> Verify logical progression in forms</li>
|
||||
<li><strong>Announcements:</strong> Check state changes are announced</li>
|
||||
<li><strong>Selection:</strong> Verify selected value is announced</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
|
||||
<h4 class="font-semibold mb-2">🎯 Quick Test</h4>
|
||||
<p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
|
||||
Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
|
||||
If you can successfully navigate and make selections, the accessibility implementation is working!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
|
||||
<h4 class="font-semibold mb-2">⚡ Performance Note</h4>
|
||||
<p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
|
||||
These accessibility features are built into the component with minimal performance impact.
|
||||
The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
@@ -58,7 +58,7 @@ export const Default: Story = {
|
||||
template: `
|
||||
<div>
|
||||
<SingleSelect v-model="selected" :options="options" :label="args.label" />
|
||||
<div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
|
||||
<div class="mt-4 p-3 bg-base-background rounded">
|
||||
<p class="text-sm">Selected: {{ selected ?? 'None' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,7 +81,7 @@ export const WithIcon: Story = {
|
||||
<i class="icon-[lucide--arrow-up-down] w-3.5 h-3.5" />
|
||||
</template>
|
||||
</SingleSelect>
|
||||
<div class="mt-4 p-3 bg-gray-50 dark-theme:bg-zinc-800 rounded">
|
||||
<div class="mt-4 p-3 bg-base-background rounded">
|
||||
<p class="text-sm">Selected: {{ selected }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,69 @@
|
||||
option-label="name"
|
||||
option-value="value"
|
||||
unstyled
|
||||
:pt="pt"
|
||||
:pt="{
|
||||
root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
|
||||
class: [
|
||||
// container
|
||||
'h-10 relative inline-flex cursor-pointer select-none items-center',
|
||||
// trigger surface
|
||||
'rounded-lg',
|
||||
'bg-base-background text-base-foreground',
|
||||
'border-[2.5px] border-solid border-transparent',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'focus-within:border-node-component-border',
|
||||
// disabled
|
||||
{ 'opacity-60 cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class:
|
||||
// Align with MultiSelect labelContainer spacing
|
||||
'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
|
||||
},
|
||||
dropdown: {
|
||||
class:
|
||||
// Right chevron touch area
|
||||
'flex shrink-0 items-center justify-center px-3 py-2'
|
||||
},
|
||||
overlay: {
|
||||
class: cn(
|
||||
'mt-2 p-2 rounded-lg',
|
||||
'bg-base-background text-base-foreground',
|
||||
'border border-solid border-border-default'
|
||||
)
|
||||
},
|
||||
listContainer: () => ({
|
||||
style: `max-height: min(${listMaxHeight}, 50vh)`,
|
||||
class: 'scrollbar-custom'
|
||||
}),
|
||||
list: {
|
||||
class:
|
||||
// Same list tone/size as MultiSelect
|
||||
'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
|
||||
},
|
||||
option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
|
||||
class: cn(
|
||||
// Row layout
|
||||
'flex items-center justify-between gap-3 px-2 py-3 rounded',
|
||||
'hover:bg-secondary-background-hover',
|
||||
// Add focus state for keyboard navigation
|
||||
context.focused && 'bg-secondary-background-hover',
|
||||
// Selected state + check icon
|
||||
context.selected &&
|
||||
'bg-secondary-background-selected hover:bg-secondary-background-selected'
|
||||
)
|
||||
}),
|
||||
optionLabel: {
|
||||
class: 'truncate'
|
||||
},
|
||||
optionGroupLabel: {
|
||||
class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
|
||||
},
|
||||
emptyMessage: {
|
||||
class: 'px-3 py-2 text-sm text-muted-foreground'
|
||||
}
|
||||
}"
|
||||
:aria-label="label || t('g.singleSelectDropdown')"
|
||||
role="combobox"
|
||||
:aria-expanded="false"
|
||||
@@ -26,11 +88,11 @@
|
||||
<slot name="icon" />
|
||||
<span
|
||||
v-if="slotProps.value !== null && slotProps.value !== undefined"
|
||||
class="text-zinc-700 dark-theme:text-smoke-200"
|
||||
class="text-base-foreground"
|
||||
>
|
||||
{{ getLabel(slotProps.value) }}
|
||||
</span>
|
||||
<span v-else class="text-zinc-700 dark-theme:text-smoke-200">
|
||||
<span v-else class="text-base-foreground">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -48,10 +110,7 @@
|
||||
:style="optionStyle"
|
||||
>
|
||||
<span class="truncate">{{ option.name }}</span>
|
||||
<i
|
||||
v-if="selected"
|
||||
class="icon-[lucide--check] text-neutral-600 dark-theme:text-white"
|
||||
/>
|
||||
<i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
|
||||
</div>
|
||||
</template>
|
||||
</Select>
|
||||
@@ -119,73 +178,4 @@ const optionStyle = computed(() => {
|
||||
|
||||
return styles.join('; ')
|
||||
})
|
||||
|
||||
/**
|
||||
* Unstyled + PT API only
|
||||
* - No background/border (same as page background)
|
||||
* - Text/icon scale: compact size matching MultiSelect
|
||||
*/
|
||||
const pt = computed(() => ({
|
||||
root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
|
||||
class: [
|
||||
// container
|
||||
'h-10 relative inline-flex cursor-pointer select-none items-center',
|
||||
// trigger surface
|
||||
'rounded-lg',
|
||||
'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
|
||||
'border-[2.5px] border-solid border-transparent',
|
||||
'transition-all duration-200 ease-in-out',
|
||||
'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
|
||||
// disabled
|
||||
{ 'opacity-60 cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class:
|
||||
// Align with MultiSelect labelContainer spacing
|
||||
'flex-1 flex items-center whitespace-nowrap pl-4 py-2 outline-hidden'
|
||||
},
|
||||
dropdown: {
|
||||
class:
|
||||
// Right chevron touch area
|
||||
'flex shrink-0 items-center justify-center px-3 py-2'
|
||||
},
|
||||
overlay: {
|
||||
class: cn(
|
||||
'mt-2 p-2 rounded-lg',
|
||||
'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
|
||||
'border border-solid border-neutral-200 dark-theme:border-zinc-700'
|
||||
)
|
||||
},
|
||||
listContainer: () => ({
|
||||
style: `max-height: min(${listMaxHeight}, 50vh)`,
|
||||
class: 'scrollbar-custom'
|
||||
}),
|
||||
list: {
|
||||
class:
|
||||
// Same list tone/size as MultiSelect
|
||||
'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
|
||||
},
|
||||
option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
|
||||
class: [
|
||||
// Row layout
|
||||
'flex items-center justify-between gap-3 px-2 py-3 rounded',
|
||||
'hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50',
|
||||
// Selected state + check icon
|
||||
{ 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.selected },
|
||||
// Add focus state for keyboard navigation
|
||||
{ 'bg-neutral-100/50 dark-theme:bg-zinc-700/50': context.focused }
|
||||
]
|
||||
}),
|
||||
optionLabel: {
|
||||
class: 'truncate'
|
||||
},
|
||||
optionGroupLabel: {
|
||||
class:
|
||||
'px-3 py-2 text-xs uppercase tracking-wide text-zinc-500 dark-theme:text-zinc-400'
|
||||
},
|
||||
emptyMessage: {
|
||||
class: 'px-3 py-2 text-sm text-zinc-500 dark-theme:text-zinc-400'
|
||||
}
|
||||
}))
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user