diff --git a/src/uix/morfo/components/tag-group.ts b/src/uix/morfo/components/tag-group.ts index 22f84324a..3703eb6f7 100644 --- a/src/uix/morfo/components/tag-group.ts +++ b/src/uix/morfo/components/tag-group.ts @@ -19,20 +19,24 @@ export const tagGroupMorfo = { role: 'grid', optional: false, data: [ - { attr: 'data-disabled', severity: 'optional' }, - { attr: 'data-empty', severity: 'optional' }, - { attr: 'data-selection-mode', values: ['none', 'single', 'multiple'] } + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }, + { attr: 'data-empty', value: v.propRef('empty'), severity: 'optional' }, + { + attr: 'data-selection-mode', + values: ['none', 'single', 'multiple'], + value: v.propRef('selectionMode') + } ], aria: [ { attr: 'aria-label', - value: v.translationRef('#?components.tag-group.label|Tags'), + value: v.propRef('ariaLabel'), severity: 'recommended' }, { attr: 'aria-labelledby', - value: v.partRef('label'), - condition: { when: 'part-present', part: 'label' }, + value: v.propRef('ariaLabelledby'), + condition: { when: 'prop-truthy', prop: 'ariaLabelledby' }, severity: 'optional' }, { diff --git a/src/uix/soma/components/tag-group/tag-group-provider.svelte.ts b/src/uix/soma/components/tag-group/tag-group-provider.svelte.ts index 9f029dab2..2ff1c73f9 100644 --- a/src/uix/soma/components/tag-group/tag-group-provider.svelte.ts +++ b/src/uix/soma/components/tag-group/tag-group-provider.svelte.ts @@ -58,12 +58,22 @@ export class TagGroupProvider { private constructor(opts: TagGroupOpts) { this.opts = opts; this.soma = Soma.require(); - this.runtime = this.soma.runtime(tagGroupMorfo, {}); + this.runtime = this.soma.runtime(tagGroupMorfo, { + props: { + ariaLabel: () => this.resolvedAriaLabel.current, + ariaLabelledby: () => this.resolvedAriaLabelledby, + multiple: () => this.opts.selectionMode.current === 'multiple', + disabled: () => this.opts.disabled.current, + empty: () => this.isEmpty, + selectionMode: () => this.opts.selectionMode.current + } + }); this.runtimePart = this.runtime.part('provider', { id: opts.id, ref: opts.ref, owner: this, - context: TagGroupProvider.ctx + context: TagGroupProvider.ctx, + syncAttrs: true }); } @@ -221,15 +231,7 @@ export class TagGroupProvider { readonly props = $derived.by(() => this.runtimePart.assert({ - ...this.runtimePart.props, - role: 'grid' as const, - 'aria-label': this.resolvedAriaLabel.current, - 'aria-labelledby': this.resolvedAriaLabelledby, - 'aria-multiselectable': this.opts.selectionMode.current === 'multiple' ? true : undefined, - 'aria-disabled': this.opts.disabled.current ? true : undefined, - 'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current), - 'data-empty': boolToEmptyStrOrUndef(this.isEmpty), - 'data-selection-mode': this.opts.selectionMode.current + ...this.runtimePart.props } as const) ); }