1 files changed, 11 insertions, 6 deletions
diff --git a/public/bluebey-studio/src/ui.js b/public/bluebey-studio/src/ui.js
index 71f79b4..e184f5e 100644
--- a/public/bluebey-studio/src/ui.js
+++ b/public/bluebey-studio/src/ui.js
@@ -84,8 +84,9 @@ function tabIcon(d) {
 }
 
 /**
- * Tabbed container: returns the per-tab panels to fill in. Each definition may
- * carry an `icon` (an SVG path `d`); the label stays visible next to it.
+ * Tabbed container: returns the per-tab panels to fill in. When a definition
+ * carries an `icon` (an SVG path `d`) the tab shows only that icon, and the
+ * label becomes its tooltip and accessible name; without one the label shows.
  */
 export function tabs(parent, definitions) {
   const bar = h('div', { class: 'tabs' });
@@ -101,10 +102,14 @@ export function tabs(parent, definitions) {
   };
 
   for (const definition of definitions) {
-    const button = h('button', { type: 'button', class: 'tab' },
-      definition.icon ? tabIcon(definition.icon) : null,
-      definition.icon ? ' ' : null,
-      h('span', { class: 'tab-label', text: definition.label }));
+    const button = h('button', { type: 'button', class: 'tab' });
+    if (definition.icon) {
+      button.append(tabIcon(definition.icon));
+      button.title = definition.label;
+      button.setAttribute('aria-label', definition.label);
+    } else {
+      button.append(h('span', { class: 'tab-label', text: definition.label }));
+    }
     button.addEventListener('click', () => select(definition.id));
     buttons.set(definition.id, button);
     bar.append(button);