@@ -32,7 +32,7 @@
{{ formatKey(key) }}
@@ -100,21 +100,3 @@ const formatKey = (key: string): string => {
return keyMap[key] || key
}
-
-
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 9e73edfab..bec0ac7fb 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -10,8 +10,7 @@ import { cn } from '@/utils/tailwindUtil'
const iconGroupClasses = cn(
'flex justify-center items-center shrink-0',
'outline-hidden border-none p-0 rounded-lg',
- 'bg-white dark-theme:bg-zinc-700',
- 'text-neutral-950 dark-theme:text-white',
+ 'bg-secondary-background shadow-sm',
'transition-all duration-200',
'cursor-pointer'
)
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 2cdf394fe..ea0f98708 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -7,13 +7,24 @@
@@ -26,7 +37,7 @@
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 7b0822aec..8b8f81944 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -47,8 +47,8 @@ const containerClasses = computed(() => {
// Variant styles
const variantClasses = {
default: cn(
- hasBackground && 'bg-white dark-theme:bg-zinc-800',
- hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
+ hasBackground && 'bg-modal-card-background',
+ hasBorder && 'border border-border-default',
hasShadow && 'shadow-sm',
hasCursor && 'cursor-pointer'
),
@@ -57,9 +57,9 @@ const containerClasses = computed(() => {
'p-2 transition-colors duration-200'
),
outline: cn(
- hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
+ hasBorder && 'border-2 border-border-subtle',
hasCursor && 'cursor-pointer',
- 'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
+ 'hover:border-border-subtle/50 transition-colors'
)
}
diff --git a/src/components/card/CardDescription.vue b/src/components/card/CardDescription.vue
index 0b5e2de5c..e871594b5 100644
--- a/src/components/card/CardDescription.vue
+++ b/src/components/card/CardDescription.vue
@@ -1,7 +1,5 @@
-
+
![]()
-
-
+ ) => ({
- 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) => ({
- 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'
- }
-}))
diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index 5dd8f6249..082c34653 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -18,10 +18,10 @@
t('maskEditor.brushShape')
}}
{{
$t('templateWorkflows.resultsCount', {
count: filteredCount,
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index ea0dbc942..0274191af 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -24,16 +24,14 @@
:key="version"
class="ml-4"
>
-
-
-
-
-
diff --git a/src/components/graph/widgets/chatHistory/CopyButton.vue b/src/components/graph/widgets/chatHistory/CopyButton.vue
deleted file mode 100644
index 4a44d05ce..000000000
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
diff --git a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue b/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
deleted file mode 100644
index e2326c431..000000000
--- a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
- {
- // 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 = {
- 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
-
-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([])
- 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: `
- ([])
- const selectedSizes = ref([])
-
- 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: `
- ([])
- const focusTestOptions = [
- { name: 'Option A', value: 'a' },
- { name: 'Option B', value: 'b' },
- { name: 'Option C', value: 'c' }
- ]
-
- return {
- selectedItems,
- focusTestOptions,
- args
- }
- },
- template: `
-
-
+
diff --git a/src/components/graph/selectionToolbox/VerticalDivider.vue b/src/components/graph/selectionToolbox/VerticalDivider.vue
index ac6768a2c..ac9cce428 100644
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,5 +1,3 @@
-
+
diff --git a/src/components/graph/widgets/ChatHistoryWidget.test.ts b/src/components/graph/widgets/ChatHistoryWidget.test.ts
deleted file mode 100644
index e90e0c853..000000000
--- a/src/components/graph/widgets/ChatHistoryWidget.test.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-
-const i18n = createI18n({
- legacy: false,
- locale: 'en',
- messages: {
- en: {
- g: { edit: 'Edit' },
- chatHistory: {
- cancelEdit: 'Cancel edit',
- cancelEditTooltip: 'Cancel edit'
- }
- }
- }
-})
-
-vi.mock('@/components/graph/widgets/chatHistory/CopyButton.vue', () => ({
- default: {
- name: 'CopyButton',
- template: '',
- props: ['text']
- }
-}))
-
-vi.mock('@/components/graph/widgets/chatHistory/ResponseBlurb.vue', () => ({
- default: {
- name: 'ResponseBlurb',
- template: '
{{
$t('loadWorkflowWarning.coreNodesFromVersion', {
version: version || 'unknown'
})
}}
-
+
diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts
index 1f8a5d34f..9fdcd971f 100644
--- a/src/components/graph/selectionToolbox/BypassButton.test.ts
+++ b/src/components/graph/selectionToolbox/BypassButton.test.ts
@@ -84,18 +84,6 @@ describe('BypassButton', () => {
)
})
- it('should show normal styling when node is not bypassed', () => {
- const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
- canvasStore.selectedItems = [normalNode] as any
-
- const wrapper = mountComponent()
- const button = wrapper.find('button')
-
- expect(button.classes()).not.toContain(
- 'dark-theme:[&:not(:active)]:!bg-charcoal-600'
- )
- })
-
it('should show bypassed styling when node is bypassed', async () => {
const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
canvasStore.selectedItems = [bypassedNode] as any
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 8e5666b34..f54a3e84f 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -4,13 +4,13 @@
value: t('selectionToolbox.executeButton.tooltip'),
showDelay: 1000
}"
- class="size-8 bg-azure-400 !p-0 dark-theme:bg-azure-600"
+ class="size-8 bg-primary-background text-white p-0"
text
@mouseenter="() => handleMouseEnter()"
@mouseleave="() => handleMouseLeave()"
@click="handleClick"
>
-
+
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index fb1f8c01a..ead8fb183 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,8 +1,5 @@
-
+
{{ getUniqueNodeNames(nodes).join(', ') }}
-
-
-
-
-
-
-
-
-
-
- {{ item.prompt }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/input/MultiSelect.accessibility.stories.ts b/src/components/input/MultiSelect.accessibility.stories.ts
deleted file mode 100644
index 3decd2a21..000000000
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ /dev/null
@@ -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
-
- `
- }),
- args: {
- label: 'Choose Frameworks',
- showSearchBox: true,
- showSelectedCount: true,
- showClearButton: true
- }
-}
-
-export const ScreenReaderFriendly: Story = {
- render: (args) => ({
- components: { MultiSelect },
- setup() {
- const selectedColors = ref
-
-
- 🎯 Keyboard Navigation Test
-- Use your keyboard to navigate this MultiSelect: -
--
-
- Tab to focus the dropdown -
- Enter/Space to open dropdown -
- Arrow Up/Down to navigate options -
- Enter/Space to select options -
- Escape to close dropdown -
-
-
- - Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }} -
-
-
- `
- })
-}
-
-export const FocusManagement: Story = {
- render: (args) => ({
- components: { MultiSelect },
- setup() {
- const selectedItems = ref
-
-
- ♿ Screen Reader Test
-- These dropdowns have proper ARIA attributes and labels for screen readers: -
--
-
role="combobox"identifies as dropdown
- aria-haspopup="listbox"indicates popup type
- aria-expandedshows open/closed state
- aria-labelprovides accessible name
- - Selection count announced to assistive technology -
-
-
-
-
-
- - {{ selectedColors.length }} color(s) selected -
-
-
-
- - {{ selectedSizes.length }} size(s) selected -
-
-
- `
- })
-}
-
-export const AccessibilityChecklist: Story = {
- render: () => ({
- template: `
-
-
-
- 🎯 Focus Management Test
-- Test focus behavior with multiple form elements: -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Test: Tab through all elements and verify focus rings are visible and logical.
-
-
-
- `
- })
-}
diff --git a/src/components/input/MultiSelect.stories.ts b/src/components/input/MultiSelect.stories.ts
index e6b5d9144..d66a70653 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -102,7 +102,7 @@ export const Default: Story = {
:showClearButton="args.showClearButton"
:searchPlaceholder="args.searchPlaceholder"
/>
-
-
- ♿ MultiSelect Accessibility Checklist
- -
-
-
-
-
-
- ✅ Implemented Features
--
-
- - ✓ - Keyboard Navigation: Tab, Enter, Space, Arrow keys, Escape - -
- - ✓ - ARIA Attributes: role, aria-haspopup, aria-expanded, aria-label - -
- - ✓ - Focus Management: Visible focus rings and logical tab order - -
- - ✓ - Internationalization: Translatable aria-label fallbacks - -
- - ✓ - Screen Reader Support: Proper announcements and state - -
- - ✓ - Color Contrast: Meets WCAG AA requirements - -
-
- 📋 Testing Guidelines
--
-
- Keyboard Only: Navigate using only keyboard -
- Screen Reader: Test with NVDA, JAWS, or VoiceOver -
- Focus Visible: Ensure focus rings are always visible -
- Tab Order: Verify logical progression -
- Announcements: Check state changes are announced -
- Escape Behavior: Escape always closes dropdown -
-
- 🎯 Quick Test
-- 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! -
-
+
@@ -135,7 +135,7 @@ export const WithPreselectedValues: Story = {
:showClearButton="args.showClearButton"
:searchPlaceholder="args.searchPlaceholder"
/>
- Selected: {{ selected.length > 0 ? selected.map(s => s.name).join(', ') : 'None' }}
+
@@ -229,7 +229,7 @@ export const MultipleSelectors: Story = {
/>
Selected: {{ selected.map(s => s.name).join(', ') }}
+
-
+
-
+
{{ label }}
{{ selectedCount }}
@@ -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'
"
>
{
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' }
- }
-}))
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
index 8cc5e5f36..dab0a5e0e 100644
--- a/src/components/input/SearchBox.vue
+++ b/src/components/input/SearchBox.vue
@@ -1,6 +1,6 @@
= {
- 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
-
-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(null)
- const selectedPriority = ref('medium')
-
- return {
- args,
- selectedSort,
- selectedPriority,
- sortOptions,
- priorityOptions
- }
- },
- template: `
- ('en')
- const selectedTheme = ref(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: `
-
) => ({
+ 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) => ({
+ 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 @@
@@ -48,10 +110,7 @@
:style="optionStyle"
>
{{ option.name }}
-
+
@@ -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 }: SelectPassThroughMethodOptionsCurrent Selection:
Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue index 851439a3a..74a7035b1 100644 --- a/src/components/input/MultiSelect.vue +++ b/src/components/input/MultiSelect.vue @@ -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" > {{ 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 = []" />
-
+
@@ -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)
})
diff --git a/src/components/input/SingleSelect.accessibility.stories.ts b/src/components/input/SingleSelect.accessibility.stories.ts
deleted file mode 100644
index b671ae59c..000000000
--- a/src/components/input/SingleSelect.accessibility.stories.ts
+++ /dev/null
@@ -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
-
- `
- })
-}
-
-export const ScreenReaderFriendly: Story = {
- render: (args) => ({
- components: { SingleSelect },
- setup() {
- const selectedLanguage = ref
-
-
- 🎯 Keyboard Navigation Test
-- Use your keyboard to navigate these SingleSelect dropdowns: -
--
-
- Tab to focus the dropdown -
- Enter/Space to open dropdown -
- Arrow Up/Down to navigate options -
- Enter/Space to select option -
- Escape to close dropdown -
-
-
-
-
-
- - Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }} -
-
-
-
-
-
-
-
-
- - Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }} -
-
-
- `
- })
-}
-
-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: `
-
-
-
- ♿ Screen Reader Test
-- These dropdowns have proper ARIA attributes and labels for screen readers: -
--
-
role="combobox"identifies as dropdown
- aria-haspopup="listbox"indicates popup type
- aria-expandedshows open/closed state
- aria-labelprovides accessible name
- - Selected option value announced to assistive technology -
-
-
-
-
-
-
- - Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }} -
-
-
-
- - Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }} -
-
-
- 🎧 Screen Reader Testing Tips
--
-
- • Listen for role announcements when focusing -
- • Verify dropdown state changes are announced -
- • Check that selected values are spoken clearly -
- • Ensure option navigation is announced -
-
- `
- })
-}
-
-export const AccessibilityChecklist: Story = {
- render: () => ({
- template: `
-
-
-
-
-
- 📝 Form Integration Test
-- Test keyboard navigation through a complete form with SingleSelect components. - Tab order should be logical and all elements should be accessible. -
-
-
- Current Form Data:
-{{ JSON.stringify(formData, null, 2) }}
-
-
- `
- })
-}
diff --git a/src/components/input/SingleSelect.stories.ts b/src/components/input/SingleSelect.stories.ts
index b130780e2..7466804eb 100644
--- a/src/components/input/SingleSelect.stories.ts
+++ b/src/components/input/SingleSelect.stories.ts
@@ -58,7 +58,7 @@ export const Default: Story = {
template: `
-
- ♿ SingleSelect Accessibility Checklist
- -
-
-
-
-
-
- ✅ Implemented Features
--
-
- - ✓ - Keyboard Navigation: Tab, Enter, Space, Arrow keys, Escape - -
- - ✓ - ARIA Attributes: role, aria-haspopup, aria-expanded, aria-label - -
- - ✓ - Focus Management: Visible focus rings and logical tab order - -
- - ✓ - Internationalization: Translatable aria-label fallbacks - -
- - ✓ - Screen Reader Support: Proper announcements and state - -
- - ✓ - Form Integration: Works properly in forms with other elements - -
-
- 📋 Testing Guidelines
--
-
- Keyboard Only: Navigate using only keyboard -
- Screen Reader: Test with NVDA, JAWS, or VoiceOver -
- Focus Visible: Ensure focus rings are always visible -
- Tab Order: Verify logical progression in forms -
- Announcements: Check state changes are announced -
- Selection: Verify selected value is announced -
-
-
- 🎯 Quick Test
-- 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! -
-
-
- ⚡ Performance Note
-- 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. -
-
+
@@ -81,7 +81,7 @@ export const WithIcon: Story = {
- Selected: {{ selected ?? 'None' }}
+
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 21814b520..ee683d717 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -13,7 +13,69 @@
option-label="name"
option-value="value"
unstyled
- :pt="pt"
+ :pt="{
+ root: ({ props }: SelectPassThroughMethodOptionsSelected: {{ selected }}