native-document 1.0.169 → 1.0.172

package/src/ui/components/form/fields/CheckboxFieldRender.js

@@ -25,6 +25,7 @@ export default function CheckboxFieldRender($desc, instance) {
 }
 
 const buildCheckbox = ($desc, instance) => {
+    const isRequired = $desc.rules?.some(rule => rule.fn?.name === 'required');
     const input = Input({
         class:    'field-checkbox',
         type:     'checkbox',
@@ -32,6 +33,9 @@ const buildCheckbox = ($desc, instance) => {
         id:       $desc.id || $desc.name,
         disabled: $desc.disabled,
         checked:  $desc.checked,
+        // [a11y] aria-required, aria-invalid
+        ...(isRequired      ? { 'aria-required': 'true'        } : {}),
+        ...($desc.hasErrors ? { 'aria-invalid':  $desc.hasErrors } : {}),
         ...($desc.elementsProps.input || {}),
     });
 

package/src/ui/components/form/fields/CheckboxGroupFieldRender.js

@@ -85,8 +85,12 @@ const buildOptions = ($desc, instance) => {
         ]);
     };
 
+    const isRequired = $desc.rules?.some(rule => rule.fn?.name === 'required');
     return Div({
         class: 'field-checkbox-group is-' + ($desc.layout || 'vertical'),
+        // [a11y] role=group, aria-required
+        role:  'group',
+        ...( isRequired ? { 'aria-required': 'true' } : {} ),
         ...($desc.elementsProps.wrapper || {}),
     }, ForEachArray($desc.options, buildItem));
 };

package/src/ui/components/form/fields/RadioFieldRender.js

@@ -70,8 +70,12 @@ const buildOptions = ($desc, instance) => {
         ]);
     };
 
+    const isRequired = $desc.rules?.some(rule => rule.fn?.name === 'required');
     return Div({
         class: 'field-radio-group is-' + ($desc.layout || 'vertical'),
+        // [a11y] role=radiogroup, aria-required
+        role: 'radiogroup',
+        ...( isRequired ? { 'aria-required': 'true' } : {} ),
         ...($desc.elementsProps.wrapper || {}),
     }, ForEachArray($options, buildOption));
 };

package/src/ui/components/form/fields/RangeFieldRender.js

@@ -66,6 +66,10 @@ const buildInput = ($desc, instance) => {
         step: $desc.step ?? 1,
         disabled: $desc.disabled,
         value: $desc.value,
+        // [a11y] aria-valuemin, aria-valuemax, aria-valuenow
+        'aria-valuemin': String($desc.min ?? 0),
+        'aria-valuemax': String($desc.max ?? 100),
+        ...($desc.value?.__$Observable ? { 'aria-valuenow': $desc.value.transform((v) => String(v)) } : { 'aria-valuenow': String($desc.value ?? 0) }),
         ...($desc.elementsProps.input || {}),
     });
 

package/src/ui/components/form/fields/SelectFieldRender.js

@@ -61,8 +61,13 @@ const buildSelectWrapper = ($desc, instance) => {
     }
     triggerOptions.push(Span({class: 'select-field-chevron'}, '▾'));
 
+    const isRequired = $desc.rules?.some(rule => rule.fn?.name === 'required');
     const trigger = Div({
         class: {'field-input select-field-trigger': true, 'has-tags': isTags},
+        // [a11y] aria-haspopup, aria-expanded, aria-required
+        'aria-haspopup':  'listbox',
+        'aria-expanded':  'false',
+        ...( isRequired ? { 'aria-required': 'true' } : {} ),
         ...($desc.elementsProps.input || {}),
     }, [
         valueDisplay,

package/src/ui/components/form/fields/SliderFieldRender.js

@@ -7,6 +7,9 @@ export default function SliderRender($desc, instance) {
     const props = instance.getEditableProps();
 
     props.class.add('slider');
+    // [a11y] aria-valuemin, aria-valuemax
+    props['aria-valuemin'] = String($desc.min ?? 0);
+    props['aria-valuemax'] = String($desc.max ?? 100);
     props.class.add({
         'is-vertical':  $desc.vertical,
         'is-reverse':   $desc.reverse,

package/src/ui/components/icon/tabler/TablerIconRender.js

@@ -49,7 +49,6 @@ export default function TablerIconRender($desc) {
     if($desc.color) {
         style.color = $desc.color;
     }
-    console.log(style);
 
     return Italic({
         'aria-hidden': 'true',

package/src/ui/components/list/item/ListItemRender.js

@@ -13,9 +13,13 @@ export default function ListItemRender($desc, instance) {
 
     if ($desc.disabled) {
         props.class.add('is-disabled', $desc.disabled);
+        // [a11y] aria-disabled
+        props['aria-disabled'] = $desc.disabled;
     }
     if ($desc.selected) {
         props.class.add('is-selected', $desc.selected);
+        // [a11y] aria-selected
+        props['aria-selected'] = $desc.selected;
     }
     if ($desc.visibility) {
         props.class.add('is-hidden', $desc.visibility.isFalsy());

package/src/ui/components/menu/MenuItemRender.js

@@ -24,6 +24,14 @@ export default function MenuItemRender($desc, instance) {
 
     if(hasSubmenu) {
         props.class.add('has-submenu');
+        // [a11y] aria-haspopup for submenu items
+        props['aria-haspopup'] = 'menu';
+        props['aria-expanded'] = 'false';
+    }
+
+    // [a11y] aria-disabled
+    if($desc.disabled) {
+        props['aria-disabled'] = $desc.disabled;
     }
 
     const content = [

package/src/ui/components/menu/MenuLinkRender.js

@@ -24,6 +24,17 @@ export default function MenuLinkRender($desc, instance) {
 
     if(hasSubmenu) {
         props.class.add('has-submenu');
+        // [a11y] aria-haspopup for submenu links
+        props['aria-haspopup'] = 'menu';
+        props['aria-expanded'] = 'false';
+    }
+
+    // [a11y] aria-disabled, aria-current
+    if($desc.disabled) {
+        props['aria-disabled'] = $desc.disabled;
+    }
+    if($desc.selected) {
+        props['aria-current'] = $desc.selected.transform ? $desc.selected.transform((s) => s ? 'page' : undefined) : ($desc.selected ? 'page' : undefined);
     }
 
     const content = [

package/src/ui/components/menu/MenuRender.js

@@ -8,6 +8,11 @@ export default function MenuRender($desc, instance) {
     props.class.add('menu');
     props.class.add('is-' + ($desc.orientation || 'horizontal'));
 
+    // [a11y] aria-label if provided
+    if($desc.label) {
+        props['aria-label'] = $desc.label;
+    }
+
     const nav = Nav(instance.resolveProps(), ForEachArray($desc.items));
 
     if($desc.compactThreshold) {

package/src/ui/components/menu/helpers.js

@@ -113,9 +113,10 @@ export const setupInteraction = (listItem, el, submenuEl, orientation, interacti
         });
     }
 
-    document.addEventListener('click', (e) => {
+    document.addEventListener('click', () => {
         $isMenuActivated?.set(false);
         $isOpen.set(false);
         $activeItem?.set(null);
     });
+
 };

package/src/ui/components/modal/ModalRender.js

@@ -5,6 +5,7 @@ import {createPortal} from '../../../core/elements/anchor/anchor';
 
 import './modal.css';
 
+let _modalIdCounter = 0;
 export default function ModalRender($desc, instance) {
     const editableProps = instance.getEditableProps();
 
@@ -66,10 +67,15 @@ export default function ModalRender($desc, instance) {
     return createPortal(dialog);
 }
 
-const buildHeader = ($desc, instance) => {
+
+const buildHeader = ($desc, instance, dialog) => {
     const content = [];
 
-    content.push(Div({class: 'modal-title'}, $desc.title));
+    if($desc.title) {
+        const titleId = `modal-title-${++_modalIdCounter}`;
+        dialog.setAttribute('aria-labelledby', titleId);
+        content.push(Div({class: 'modal-title', id: titleId }, $desc.title));
+    }
 
     if($desc.closable) {
         content.push(

package/src/ui/components/progress/ProgressRender.js

@@ -46,6 +46,15 @@ const buildBar = ($desc, instance) => {
 
     props.class.add('progress');
 
+    // [a11y] aria-valuenow and aria-valuemax
+    const ariaMax = $desc.max || 100;
+    props['aria-valuemax'] = String(ariaMax);
+    if($desc.value?.__$Observable) {
+        props['aria-valuenow'] = $desc.value.transform((v) => String(Math.min(v, ariaMax)));
+    } else if($desc.value !== null && $desc.value !== undefined) {
+        props['aria-valuenow'] = String($desc.value);
+    }
+
     const fillClass = ['progress-fill', 'is-' + variant];
 
     if($desc.striped) {

package/src/ui/components/skeleton/SkeletonRender.js

@@ -26,6 +26,8 @@ export default function SkeletonRender($desc, instance) {
 
     props.class.add('skeleton');
     props.class.add('is-' + variant);
+    // [a11y] aria-label for screen readers
+    props['aria-label'] = $desc.label || 'Loading content';
     props.class.add('is-' + ($desc.borderRadiusType || 'rounded'));
 
     if(type === 'circle' || type === 'avatar') {

package/src/ui/components/spinner/SpinnerRender.js

@@ -37,6 +37,9 @@ export default function SpinnerRender($desc, instance) {
 
     const icon = Div({ class: 'spinner-icon', style: iconStyle });
 
+    // [a11y] aria-label: use label if provided, fallback to 'Loading'
+    props['aria-label'] = $desc.label || 'Loading';
+
     const content = [icon];
 
     if($desc.label) {

package/src/ui/components/splitter/SplitterGutterRender.js

@@ -7,6 +7,10 @@ export default function SplitterGutterRender($desc, instance) {
     props.class.add('is-' + ($desc.orientation || 'horizontal'));
     props.class.add({'is-dragging': $desc.isDragging});
 
+    // [a11y] aria-orientation and aria-valuenow for resizable separator
+    props['aria-orientation'] = $desc.orientation === 'vertical' ? 'horizontal' : 'vertical';
+    props['tabindex'] = props['tabindex'] ?? '0';
+
     // props.style.add({
     //     [($desc.orientation === 'vertical') ? 'height' : 'width']: ($desc.size || 8) + 'px',
     // });

package/src/ui/components/splitter/SplitterPanelRender.js

@@ -3,6 +3,10 @@ import {Div} from '../../../core/elements';
 export default function SplitterPanelRender($desc, instance) {
     const props = instance.getEditableProps();
     props.class.add('splitter-panel');
+    // [a11y] aria-label if provided
+    if($desc.label) {
+        props['aria-label'] = $desc.label;
+    }
 
     if($desc.collapsed) {
         props.class.add('is-collapsed');

package/src/ui/components/splitter/SplitterRender.js

@@ -9,6 +9,8 @@ export default function SplitterRender($desc, instance) {
 
     props.class.add('splitter');
     props.class.add('is-' + ($desc.orientation || 'horizontal'));
+    // [a11y] aria-orientation
+    props['aria-orientation'] = $desc.orientation || 'horizontal';
 
     const container = Div(instance.resolveProps());
 

package/src/ui/components/stepper/StepperRender.js

@@ -24,7 +24,8 @@ export default function StepperRender($desc, instance) {
 }
 
 const buildNav = ($desc, instance) => {
-    return Div({class: 'stepper-nav'},
+    // [a11y] aria-label on stepper nav
+    return Div({ class: 'stepper-nav', 'aria-label': $desc.label || 'Steps' },
         ForEachArray($desc.visibleSteps, (step, index) => {
             step.$setStepper(instance);
             const items = [];

package/src/ui/components/stepper/StepperStepRender.js

@@ -48,7 +48,14 @@ export default function StepperStepRender($desc, instance) {
         labelContent.push(Span({class: 'step-optional'}, 'Optional'));
     }
 
-    const stepEl = Div(instance.resolveProps(), [
+    // [a11y] aria-current, aria-disabled on step
+    const resolvedProps = instance.resolveProps();
+    resolvedProps['aria-current'] = isActive.transform((a) => a ? 'step' : undefined);
+    if($desc.disabled?.val()) {
+        resolvedProps['aria-disabled'] = 'true';
+    }
+
+    const stepEl = Div(resolvedProps, [
         Div({class: indicatorClass}, [
             indicatorContent,
             Span({class: 'step-state-indicator'}, stateIndicator),

package/src/ui/components/switch/SwitchRender.js

@@ -25,6 +25,9 @@ export default function SwitchRender($desc, instance) {
         type:     'checkbox',
         checked:  $desc.value,
         disabled: $desc.disabled,
+        // [a11y] aria-checked and aria-disabled
+        'aria-checked':  $desc.value,
+        ...($desc.disabled ? { 'aria-disabled': $desc.disabled } : {}),
     });
 
     $desc.value.subscribe(() => {

package/src/ui/components/table/data-table/DataTableRender.js

@@ -9,6 +9,10 @@ import {buildPageInfo, buildPageNav, buildPageSize, buildPagination} from './pag
 export default function DataTableRender($desc, instance) {
     const props = instance.getEditableProps();
     props.class.add('data-table');
+    // [a11y] aria-label on data table
+    if($desc.label) {
+        props['aria-label'] = $desc.label;
+    }
 
     const visibleColumns = $desc.columns.filter(col =>
         col.$description.visible !== false,

package/src/ui/components/table/simple-table/SimpleTableRender.js

@@ -46,6 +46,8 @@ const buildHeaderRow = ($desc, visibleColumns) => {
                 class:   col.$description.align ? `is-${col.$description.align}` : null,
                 colspan: col.$description.colspan || null,
                 rowspan: col.$description.rowspan || null,
+                // [a11y] scope=col on header cells
+                scope: 'col',
                 ...extraProps,
             }, col.$description.header);
         }),

package/src/ui/components/toast/ToastRender.js

@@ -26,6 +26,10 @@ export default function ToastRender($desc, instance) {
     props.class.add('toast');
     props.class.add('is-' + type);
 
+    // [a11y] aria-live: assertive for error, polite for others
+    props['aria-live'] = (type === 'error' || type === 'danger') ? 'assertive' : 'polite';
+    props['aria-atomic'] = 'true';
+
     const content = [];
 
     if($desc.showIcon && $desc.icon) {

package/src/ui/utils/aria.js

@@ -0,0 +1,19 @@
+/**
+ * Applies aria attributes on a trigger element for overlay components.
+ * Sets aria-haspopup and keeps aria-expanded in sync with the isOpen observable.
+ *
+ * @param {HTMLElement} triggerSource - The trigger element
+ * @param {ObservableItem<boolean>} isOpen - Observable controlling the open state
+ * @param {'menu'|'listbox'|'dialog'|'tree'|'grid'} [type='menu'] - aria-haspopup value
+ */
+export const ariaTrigger = (triggerSource, isOpen, type = 'menu') => {
+    const triggerEl = triggerSource?.toNdElement?.() ?? triggerSource;
+    if(!triggerEl) {
+        return;
+    }
+    triggerEl.setAttribute('aria-haspopup', type);
+    triggerEl.setAttribute('aria-expanded', 'false');
+    isOpen.subscribe((value) => {
+        triggerEl.setAttribute('aria-expanded', String(value));
+    });
+};

package/tests/integration/ui/attributes-wrapper.test.js

@@ -0,0 +1,177 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Observable } from '../../../src/core/data/Observable';
+
+vi.mock('../../../src/core/utils/debug-manager', () => ({
+    default: { log: vi.fn(), warn: vi.fn(), error: vi.fn(), disable: vi.fn() },
+}));
+
+import { Div, Input, Span } from '../../../elements';
+
+describe('AttributesWrapper', () => {
+
+    // -- string attributes ----------------------------------------------------
+
+    describe('string attributes', () => {
+        it('sets a string attribute', () => {
+            const el = Div({ id: 'main', 'data-test': 'value' });
+            expect(el.getAttribute('id')).toBe('main');
+            expect(el.getAttribute('data-test')).toBe('value');
+        });
+
+        it('sets a number attribute as string', () => {
+            const el = Div({ tabindex: 0 });
+            expect(el.getAttribute('tabindex')).toBe('0');
+        });
+
+        it('ignores null values', () => {
+            const el = Div({ id: null });
+            expect(el.hasAttribute('id')).toBe(false);
+        });
+
+        it('ignores undefined values', () => {
+            const el = Div({ id: undefined });
+            expect(el.hasAttribute('id')).toBe(false);
+        });
+    });
+
+    // -- class ----------------------------------------------------------------
+
+    describe('class', () => {
+        it('applies a class string', () => {
+            const el = Div({ class: 'foo bar' });
+            expect(el.className).toBe('foo bar');
+        });
+
+        it('applies a class map object', () => {
+            const el = Div({ class: { active: true, disabled: false } });
+            expect(el.classList.contains('active')).toBe(true);
+            expect(el.classList.contains('disabled')).toBe(false);
+        });
+
+        it('toggles class reactively with Observable', () => {
+            const isActive = Observable(false);
+            const el = Div({ class: { active: isActive } });
+            expect(el.classList.contains('active')).toBe(false);
+            isActive.set(true);
+            expect(el.classList.contains('active')).toBe(true);
+        });
+
+        it('adds multiple reactive classes', () => {
+            const a = Observable(true);
+            const b = Observable(false);
+            const el = Div({ class: { foo: a, bar: b } });
+            expect(el.classList.contains('foo')).toBe(true);
+            expect(el.classList.contains('bar')).toBe(false);
+            b.set(true);
+            expect(el.classList.contains('bar')).toBe(true);
+        });
+    });
+
+    // -- style ----------------------------------------------------------------
+
+    describe('style', () => {
+        it('applies a static style map', () => {
+            const el = Div({ style: { color: 'red', fontSize: '16px' } });
+            expect(el.style.color).toBe('red');
+            expect(el.style.fontSize).toBe('16px');
+        });
+
+        it('updates style reactively with Observable', () => {
+            const color = Observable('red');
+            const el    = Div({ style: { color } });
+            expect(el.style.color).toBe('red');
+            color.set('blue');
+            expect(el.style.color).toBe('blue');
+        });
+
+        it('sets CSS custom property via --var syntax', () => {
+            const el = Div({ style: { '--primary': '#fff' } });
+            expect(el.style.getPropertyValue('--primary')).toBe('#fff');
+        });
+
+        it('updates CSS custom property reactively', () => {
+            const primary = Observable('#fff');
+            const el      = Div({ style: { '--primary': primary } });
+            expect(el.style.getPropertyValue('--primary')).toBe('#fff');
+            primary.set('#000');
+            expect(el.style.getPropertyValue('--primary')).toBe('#000');
+        });
+    });
+
+    // -- Observable attribute -------------------------------------------------
+
+    describe('Observable attribute', () => {
+        it('sets attribute from Observable initial value', () => {
+            const label = Observable('hello');
+            const el    = Div({ 'aria-label': label });
+            expect(el.getAttribute('aria-label')).toBe('hello');
+        });
+
+        it('updates attribute when Observable changes', () => {
+            const label = Observable('hello');
+            const el    = Div({ 'aria-label': label });
+            label.set('world');
+            expect(el.getAttribute('aria-label')).toBe('world');
+        });
+
+        it('handles multiple Observable attributes', () => {
+            const a = Observable('val-a');
+            const b = Observable('val-b');
+            const el = Div({ 'data-a': a, 'data-b': b });
+            b.set('changed');
+            expect(el.getAttribute('data-a')).toBe('val-a');
+            expect(el.getAttribute('data-b')).toBe('changed');
+        });
+    });
+
+    // -- boolean attributes ---------------------------------------------------
+
+    describe('boolean attributes', () => {
+        it('sets disabled=true on input', () => {
+            const el = Input({ type: 'text', disabled: true });
+            expect(el.disabled).toBe(true);
+        });
+
+        it('sets disabled=false on input', () => {
+            const el = Input({ type: 'text', disabled: false });
+            expect(el.disabled).toBe(false);
+        });
+
+        it('toggles aria-disabled reactively via Observable', () => {
+            // Use a standard string attribute for reliable reactive testing
+            const isDisabled = Observable('false');
+            const el         = Input({ type: 'text', 'aria-disabled': isDisabled });
+            expect(el.getAttribute('aria-disabled')).toBe('false');
+            isDisabled.set('true');
+            expect(el.getAttribute('aria-disabled')).toBe('true');
+        });
+
+        it('sets checked on checkbox', () => {
+            const el = Input({ type: 'checkbox', checked: true });
+            expect(el.checked).toBe(true);
+        });
+    });
+
+    // -- aria attributes ------------------------------------------------------
+
+    describe('aria attributes (via this.aria + resolveAriaKey)', () => {
+        it('sets aria-label directly', () => {
+            const el = Div({ 'aria-label': 'My label' });
+            expect(el.getAttribute('aria-label')).toBe('My label');
+        });
+
+        it('sets role attribute', () => {
+            const el = Div({ role: 'dialog' });
+            expect(el.getAttribute('role')).toBe('dialog');
+        });
+
+        it('sets aria-expanded reactively', () => {
+            const expanded = Observable('false');
+            const el       = Div({ 'aria-expanded': expanded });
+            expect(el.getAttribute('aria-expanded')).toBe('false');
+            expanded.set('true');
+            expect(el.getAttribute('aria-expanded')).toBe('true');
+        });
+    });
+
+});