native-document 1.0.168 → 1.0.172

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/index.js

@@ -43,5 +43,10 @@ export { default as ListDividerRender } from './components/list/divider/ListDivi
 
 export { default as CardRender } from './components/card/CardRender';
 
+
+export { default as TablerIconRender } from './components/icon/tabler/TablerIconRender';
+export { default as MaterialIconRender } from './components/icon/material/MaterialIconRender';
+export { default as PhosphorIconRender } from './components/icon/phosphor/PhosphorIconRender';
+
 export * from './components/stacks';
 export * from './components/form';

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');
+        });
+    });
+
+});

package/tests/integration/ui/for-each-array.test.js

@@ -0,0 +1,167 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Observable } from '../../../src/core/data/Observable';
+import ObservableArray from '../../../src/core/data/ObservableArray';
+
+vi.mock('../../../src/core/utils/debug-manager', () => ({
+    default: { log: vi.fn(), warn: vi.fn(), error: vi.fn(), disable: vi.fn() },
+}));
+
+import { Div, Span, ForEachArray } from '../../../elements';
+
+const mount = (anchor) => {
+    document.body.innerHTML = '';
+    document.body.appendChild(anchor);
+    return document.body;
+};
+
+const items = (arr = []) => new ObservableArray(arr);
+
+describe('ForEachArray', () => {
+
+    // -- static array ---------------------------------------------------------
+
+    describe('static array', () => {
+        it('renders one element per item', () => {
+            const anchor = ForEachArray(['a', 'b', 'c'], (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(3);
+        });
+
+        it('renders items in order', () => {
+            const anchor = ForEachArray(['x', 'y', 'z'], (item) => Div({}, item));
+            const body   = mount(anchor);
+            const divs   = body.querySelectorAll('div');
+            expect(divs[0].textContent).toBe('x');
+            expect(divs[1].textContent).toBe('y');
+            expect(divs[2].textContent).toBe('z');
+        });
+
+        it('renders empty array without error', () => {
+            const anchor = ForEachArray([], (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(0);
+        });
+    });
+
+    // -- ObservableArray initial render ---------------------------------------
+
+    describe('ObservableArray initial render', () => {
+        it('renders items from initial ObservableArray', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(3);
+        });
+
+        it('renders empty ObservableArray without error', () => {
+            const obs    = items([]);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(0);
+        });
+    });
+
+    // -- push() ---------------------------------------------------------------
+
+    describe('push()', () => {
+        it('adds a rendered element to the DOM', () => {
+            const obs    = items(['a', 'b']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.push('c');
+            expect(body.querySelectorAll('div').length).toBe(3);
+        });
+
+        it('appended item appears last', () => {
+            const obs    = items(['a', 'b']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.push('c');
+            const divs = body.querySelectorAll('div');
+            expect(divs[divs.length - 1].textContent).toBe('c');
+        });
+    });
+
+    // -- removeItem() ---------------------------------------------------------
+
+    describe('removeItem()', () => {
+        it('removes the corresponding element', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.removeItem('b');
+            expect(body.querySelectorAll('div').length).toBe(2);
+            expect(body.textContent).not.toContain('b');
+        });
+    });
+
+    // -- clear() --------------------------------------------------------------
+
+    describe('clear()', () => {
+        it('removes all elements', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.clear();
+            expect(body.querySelectorAll('div').length).toBe(0);
+        });
+    });
+
+    // -- set() ----------------------------------------------------------------
+
+    describe('set()', () => {
+        it('replaces all elements', () => {
+            const obs    = items(['a', 'b']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.set(['x', 'y', 'z']);
+            const divs = body.querySelectorAll('div');
+            expect(divs.length).toBe(3);
+            expect(divs[0].textContent).toBe('x');
+        });
+    });
+
+    // -- swap() ---------------------------------------------------------------
+
+    describe('swap()', () => {
+        it('swaps two items in the DOM', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.swap(0, 2);
+            const divs = body.querySelectorAll('div');
+            expect(divs[0].textContent).toBe('c');
+            expect(divs[2].textContent).toBe('a');
+        });
+    });
+
+    // -- index observable -----------------------------------------------------
+
+    describe('index observable', () => {
+        it('passes index observable when callback has 2 params', () => {
+            const obs      = items(['a', 'b', 'c']);
+            const indices  = [];
+            const anchor   = ForEachArray(obs, (item, index) => {
+                indices.push(index);
+                return Div({}, item);
+            });
+            mount(anchor);
+            expect(indices.length).toBe(3);
+        });
+    });
+
+    // -- order preservation ---------------------------------------------------
+
+    describe('order preservation', () => {
+        it('preserves order after multiple mutations', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.push('d');
+            obs.removeItem('b');
+            const divs = body.querySelectorAll('div');
+            expect([...divs].map((d) => d.textContent)).toEqual(['a', 'c', 'd']);
+        });
+    });
+
+});