From 840e4169eddd572fb7c2169867117516cc5ff33b Mon Sep 17 00:00:00 2001 From: Vordgi Date: Mon, 9 Feb 2026 09:33:53 +0000 Subject: [PATCH 01/10] feat: support -to- customization in tooltip --- app/components/Tooltip/App.vue | 3 +++ app/components/Tooltip/Base.vue | 33 ++++++++++++++++++++------------- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/app/components/Tooltip/App.vue b/app/components/Tooltip/App.vue index cf92551a5..0c926baaa 100644 --- a/app/components/Tooltip/App.vue +++ b/app/components/Tooltip/App.vue @@ -6,6 +6,8 @@ const props = defineProps<{ position?: 'top' | 'bottom' | 'left' | 'right' /** Enable interactive tooltip (pointer events + hide delay for clickable content) */ interactive?: boolean + /** Teleport target for the tooltip content (defaults to 'body') */ + to?: string | HTMLElement }>() const isVisible = shallowRef(false) @@ -48,6 +50,7 @@ const tooltipAttrs = computed(() => { :position :interactive :tooltip-attr="tooltipAttrs" + :to="props.to" @mouseenter="show" @mouseleave="hide" @focusin="show" diff --git a/app/components/Tooltip/Base.vue b/app/components/Tooltip/Base.vue index 71157f4a2..e4d8e3e31 100644 --- a/app/components/Tooltip/Base.vue +++ b/app/components/Tooltip/Base.vue @@ -3,18 +3,25 @@ import type { HTMLAttributes } from 'vue' import type { Placement } from '@floating-ui/vue' import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue' -const props = defineProps<{ - /** Tooltip text (optional when using content slot) */ - text?: string - /** Position: 'top' | 'bottom' | 'left' | 'right' */ - position?: 'top' | 'bottom' | 'left' | 'right' - /** is tooltip visible */ - isVisible: boolean - /** Allow pointer events on tooltip (for interactive content like links) */ - interactive?: boolean - /** attributes for tooltip element */ - tooltipAttr?: HTMLAttributes -}>() +const props = withDefaults( + defineProps<{ + /** Tooltip text (optional when using content slot) */ + text?: string + /** Position: 'top' | 'bottom' | 'left' | 'right' */ + position?: 'top' | 'bottom' | 'left' | 'right' + /** is tooltip visible */ + isVisible: boolean + /** Allow pointer events on tooltip (for interactive content like links) */ + interactive?: boolean + /** attributes for tooltip element */ + tooltipAttr?: HTMLAttributes + /** Teleport target for the tooltip content (defaults to 'body') */ + to?: string | HTMLElement + }>(), + { + to: 'body', + }, +) const triggerRef = useTemplateRef('triggerRef') const tooltipRef = useTemplateRef('tooltipRef') @@ -32,7 +39,7 @@ const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
- + Date: Mon, 9 Feb 2026 09:52:48 +0000 Subject: [PATCH 02/10] fix: use tooltip in important info-notes instead of title --- app/components/Package/Dependencies.vue | 8 ++++---- app/components/Package/InstallScripts.vue | 8 ++++---- app/components/Package/SkillsModal.vue | 12 ++++++++---- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue index 3d102e17f..7946ff485 100644 --- a/app/components/Package/Dependencies.vue +++ b/app/components/Package/Dependencies.vue @@ -95,15 +95,15 @@ const numberFormatter = useNumberFormatter() {{ dep }} -
- - + block + size="sm" + :items="[ + { label: $t('org.members.all_teams'), value: '' }, + ...teamNames.map(team => ({ label: team, value: team })), + ]" + />
{ - + />
From 3cba6e0bf5195393b4259eed24ec7be6555b4a85 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Mon, 9 Feb 2026 18:24:34 +0000 Subject: [PATCH 09/10] feat: add aria label to selects --- test/nuxt/a11y.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts index 725f7350a..34cd524fd 100644 --- a/test/nuxt/a11y.spec.ts +++ b/test/nuxt/a11y.spec.ts @@ -2260,6 +2260,7 @@ describe('component accessibility audits', () => { it('should have no accessibility violations with size small', async () => { const component = await mountSuspended(SelectBase, { props: { size: 'sm' }, + attrs: { 'aria-label': 'Small select' }, slots: { default: '' }, }) const results = await runAxe(component) @@ -2300,6 +2301,7 @@ describe('component accessibility audits', () => { const component = await mountSuspended(SelectField, { props: { id: 'a11y-select-3', + attrs: { 'aria-label': 'Disabled select' }, items: [{ label: 'Option 1', value: 'option1' }], disabled: true, }, @@ -2312,6 +2314,7 @@ describe('component accessibility audits', () => { const component = await mountSuspended(SelectField, { props: { id: 'a11y-select-4', + attrs: { 'aria-label': 'Small select' }, items: [{ label: 'Option 1', value: 'option1' }], size: 'sm', }, From f146b47c1b4fdcd70b9b50ffa57a9c713c88485b Mon Sep 17 00:00:00 2001 From: Vordgi Date: Mon, 9 Feb 2026 18:42:44 +0000 Subject: [PATCH 10/10] feat: add aria label to selects --- app/components/Select/Field.vue | 7 ++++--- test/nuxt/a11y.spec.ts | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/components/Select/Field.vue b/app/components/Select/Field.vue index f41f57ff6..20dc3edc9 100644 --- a/app/components/Select/Field.vue +++ b/app/components/Select/Field.vue @@ -22,9 +22,10 @@ const model = defineModel({ default: undefined }) export interface SelectFieldProps extends SelectBaseProps { items: { label: string; value: string; disabled?: boolean }[] size?: keyof typeof SELECT_FIELD_SIZES - inputAttrs?: HTMLSelectElement['attributes'] & Omit + selectAttrs?: Omit & + Record label?: string - labelAttrs?: HTMLSelectElement['attributes'] & Omit + labelAttrs?: Record /** Visually hide label */ hiddenLabel?: boolean id: string @@ -54,7 +55,7 @@ const props = withDefaults(defineProps(), { class="appearance-none group-hover/select:border-fg-muted" :class="[SELECT_FIELD_SIZES[size], block ? 'w-full' : 'w-fit']" v-model="model" - v-bind="inputAttrs" + v-bind="selectAttrs" :id="id" >