anentrypoint-design 0.0.157 → 0.0.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.157",
+  "version": "0.0.158",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/content.js

@@ -278,7 +278,7 @@ export function TextField({ label, value = '', type = 'text', placeholder = '',
     );
 }
 
-export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint }) {
+export function Select({ label, value = '', options = [], onChange, name, key, placeholder, hint, title, 'aria-label': ariaLabel }) {
     const opts = [];
     if (placeholder != null) opts.push(h('option', { key: '_ph', value: '', disabled: true, selected: value === '' || value == null }, placeholder));
     for (const o of options) {
@@ -288,6 +288,9 @@ export function Select({ label, value = '', options = [], onChange, name, key, p
     }
     const select = h('select', {
         key: 'i', name, class: 'ds-select',
+        // Guarantee an accessible name even when rendered without a visible label.
+        'aria-label': ariaLabel || (label == null ? (title || placeholder || name) : null),
+        title,
         onchange: onChange ? (e) => onChange(e.target.value, e) : null
     }, ...opts);
     if (label == null && hint == null) return select;

package/src/components/shell.js

@@ -141,25 +141,30 @@ export function Crumb({ trail = [], leaf = '', right } = {}) {
 }
 
 export function Side({ sections = [] } = {}) {
-    return h('aside', { class: 'app-side', role: 'navigation', 'aria-label': 'sidebar navigation' }, ...sections.flatMap(sec => [
-        h('div', { class: 'group', key: sec.group, role: 'heading', 'aria-level': '2' }, sec.group),
-        ...sec.items.map((item, i) => {
-            const { glyph, label, href = '#', active, count, color, onClick } = item;
-            const countLabel = (count != null && count !== 0 && count !== '0') ? ` (${count})` : '';
-            return h('a', {
-                key: sec.group + i,
-                href,
-                class: active ? 'active' : '',
-                'aria-current': active ? 'page' : null,
-                'aria-label': label + countLabel,
-                onclick: onClick
-            },
-                glyph != null ? Glyph({ children: glyph, color }) : h('span', { class: 'glyph', 'aria-hidden': 'true' }),
-                h('span', {}, label),
-                (count != null && count !== 0 && count !== '0') ? h('span', { class: 'count', 'aria-hidden': 'true' }, String(count)) : null
-            );
-        })
-    ]));
+    return h('aside', { class: 'app-side', role: 'navigation', 'aria-label': 'sidebar navigation' }, ...sections.map(sec => {
+        const groupId = 'side-group-' + String(sec.group).replace(/\W+/g, '-').toLowerCase();
+        // Each section is a group labelled by its heading, so AT users hear the
+        // heading as the group name instead of an orphan heading.
+        return h('div', { class: 'app-side-group', key: sec.group, role: 'group', 'aria-labelledby': groupId },
+            h('div', { class: 'group', id: groupId, role: 'heading', 'aria-level': '2' }, sec.group),
+            ...sec.items.map((item, i) => {
+                const { glyph, label, href = '#', active, count, color, onClick } = item;
+                const countLabel = (count != null && count !== 0 && count !== '0') ? ` (${count})` : '';
+                return h('a', {
+                    key: sec.group + i,
+                    href,
+                    class: active ? 'active' : '',
+                    'aria-current': active ? 'page' : null,
+                    'aria-label': label + countLabel,
+                    onclick: onClick
+                },
+                    glyph != null ? Glyph({ children: glyph, color }) : h('span', { class: 'glyph', 'aria-hidden': 'true' }),
+                    h('span', {}, label),
+                    (count != null && count !== 0 && count !== '0') ? h('span', { class: 'count', 'aria-hidden': 'true' }, String(count)) : null
+                );
+            })
+        );
+    }));
 }
 
 export function Status({ left = [], right = [] } = {}) {