@zeyos/zx 4.4.0 → 5.2.0

package/src/components/multi-value-editor/multi-value-editor.css

@@ -97,7 +97,7 @@
 }
 
 .zx-multi-value-editor__handle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/navigation-bar/navigation-bar.css

@@ -29,7 +29,8 @@
   padding-inline: var(--zx-space-2);
   color: var(--zx-color-accent);
   font-size: var(--zx-text-xl);
-  font-weight: 750;
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
 }
 
 .zx-navigation-bar__navigation {
@@ -51,10 +52,11 @@
   gap: var(--zx-space-2);
   border: 0;
   border-radius: var(--zx-control-radius);
-  background: var(--zx-color-bg-raised);
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   color: var(--zx-color-text-muted);
   font: inherit;
+  font-weight: var(--zx-weight-medium);
   text-decoration: none;
   cursor: pointer;
 }
@@ -64,11 +66,12 @@
   color: var(--zx-color-text);
 }
 
+/* Where you are, not a pick: the neutral current fill, the full text colour, a heavier label. */
 .zx-navigation-bar__item[aria-current="page"],
 .zx-navigation-bar__item[aria-selected="true"] {
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 650;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-navigation-bar__item[aria-disabled="true"] {
@@ -81,18 +84,24 @@
   box-shadow: var(--zx-focus-ring);
 }
 
+/* A count beside a label, not a call to action: neutral, like the Tabbox count. */
 .zx-navigation-bar__badge {
   min-inline-size: var(--zx-space-4);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
   padding-inline: var(--zx-space-1);
-  color: var(--zx-color-on-accent);
-  font-size: var(--zx-text-sm);
-  font-weight: 700;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   line-height: var(--zx-space-4);
   text-align: center;
 }
 
+.zx-navigation-bar__item:is([aria-current="page"], [aria-selected="true"]) .zx-navigation-bar__badge {
+  color: var(--zx-color-text);
+}
+
 .zx-navigation-bar__more {
   display: none;
 }

package/src/components/number-field/field-adapter.js

@@ -11,6 +11,7 @@ export function registerNumberFieldAdapter() {
       label: options.label ? String(options.label) : undefined,
       placeholder: options.placeholder,
       required: options.required,
+      name: field.name || null,
       ...(options.props ?? {})
     }));
     let setting = false;
@@ -34,7 +35,8 @@ export function registerNumberFieldAdapter() {
         }
       },
       focus: () => numberField.focus(),
-      setDisabled: (value) => (value ? numberField.disable() : numberField.enable())
+      setDisabled: (value) => (value ? numberField.disable() : numberField.enable()),
+      setReadonly: (value) => { numberField.setReadonly(value); }
     };
   });
 }

package/src/components/number-field/number-field.css

@@ -75,3 +75,73 @@
   border-end-end-radius: var(--zx-control-radius);
   border-inline-start: 1px solid var(--zx-color-border-control);
 }
+
+/* In a Field the control fills its column, as a text input does, and gives way in a narrow one. */
+.zx-field__control > .zx-number-field {
+  display: flex;
+  inline-size: 100%;
+}
+
+.zx-field__control > .zx-number-field .zx-number-field__input {
+  min-inline-size: 0;
+}
+
+/*
+ * Quiet fields. Inside `[data-zx-fields="quiet"]` the number reads as text: no border, no fill,
+ * and the value at the start, where the text of the quiet fields around it starts. The steppers
+ * move after it, both at the trailing end, and stay hidden until hover or focus — kept in the
+ * layout, so nothing moves when they return. Focus brings back the border, the control fill and
+ * the focus ring. Disabled and read-only fields never light up.
+ */
+[data-zx-fields="quiet"] .zx-number-field {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__input {
+  padding-inline-start: var(--zx-control-pad-x);
+  text-align: start;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__step {
+  border-color: transparent;
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__step[data-step="down"] {
+  order: 1;
+  border-inline-end: 0;
+  border-inline-start: 1px solid transparent;
+  border-radius: 0;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__step[data-step="up"] {
+  order: 2;
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):hover {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):is(:hover, :focus-within) .zx-number-field__step {
+  opacity: 1;
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):focus-within {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):focus-within .zx-number-field__step {
+  border-color: var(--zx-color-border-control);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields="quiet"] .zx-number-field {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+
+  [data-zx-fields="quiet"] .zx-number-field__step {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}

package/src/components/number-field/number-field.js

@@ -336,6 +336,8 @@ export class NumberField extends Component {
   /** @param {KeyboardEvent} event @returns {void} */
   _onKeydown(event) {
     if (this._disabled || this._readonly) return;
+    // Chords belong to the page — Mod+Enter submits the form or dialog the field is in.
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
     const large = Math.max(1, Math.trunc(Number(this.options.largeStep) || 1));
     const actions = {
       ArrowUp: () => this._stepBy(1),

package/src/components/pagination/pagination.css

@@ -1,9 +1,10 @@
 /*
  * Pagination — the footer bar of a server-backed list.
  *
- * One row that wraps: the summary is pushed to the start, the page-size select and the pager sit
- * at the end. Page buttons are ordinary `.zx-btn` controls so they inherit the library's control
- * height, radius, and focus ring; only the current page repaints in the accent colour.
+ * One row that wraps: the summary and the page-size select describe the slice and sit at the
+ * start, the pager sits alone at the end. Page buttons are ordinary `.zx-btn` controls so they inherit the library's control
+ * height, radius, and focus ring; the current page takes the neutral current fill — it is where
+ * you are, not a call to action.
  */
 
 .zx-pagination {
@@ -21,8 +22,8 @@
   white-space: nowrap;
 }
 
-/* Absorbs the slack, so summary and controls end up at opposite ends of a wide bar and simply
-   stack when there is no room. */
+/* Absorbs the slack, so the summary and page size end up at the start and the pager at the end of
+   a wide bar, and they simply stack when there is no room. */
 .zx-pagination__spacer {
   flex: 1 1 var(--zx-space-4);
 }
@@ -42,7 +43,7 @@
 }
 
 .zx-pagination__select:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -70,15 +71,16 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* The page you are on: the neutral current fill and a heavier figure, not a solid accent. */
 .zx-pagination__page[aria-current="page"] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  border-color: transparent;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-pagination__page[aria-current="page"]:hover:not(:disabled) {
-  border-color: var(--zx-color-accent-hover);
-  background: var(--zx-color-accent-hover);
+  background: var(--zx-color-bg-current);
 }
 
 /* Decorative gap marker: never focusable, never announced. */

package/src/components/pagination/pagination.js

@@ -95,9 +95,23 @@ export function paginationRange({ page = 1, pages = 1, siblings = 1, boundaries
 
 /**
  * The pager for a server-backed list. It owns no data: it reports which slice the user asked for
- * and lets the application fetch it, which is exactly the shape `zeyosTable()` expects —
- * `offset`/`pageSize` for `load()` in `pages` mode, or one `change` per `loadMore()` in
- * `loadmore` mode.
+ * — `page`, `pageSize`, and the zero-based row `offset = (page - 1) * pageSize` — and lets the
+ * application fetch it.
+ *
+ * The pager is one-based and defaults to 25 rows per page. The ZeyOS bindings are zero-based,
+ * default to 50 rows, and append pages above zero unless told to replace, so connecting the two
+ * takes a small mapping rather than a direct hand-off:
+ *
+ * ```js
+ * const binding = zeyosTable(client, 'contacts', { pageSize: 25 });
+ * const pager = new Pagination(host, { pageSize: binding.pageSize });
+ * pager.on('change', async ({ detail }) => {
+ *   const result = await binding.load({ page: detail.page - 1, pageSize: detail.pageSize, replace: true });
+ *   pager.setTotal(result.count ?? 0);
+ * });
+ * ```
+ *
+ * In `loadmore` mode each `change` stands for one `binding.loadMore()`, which appends.
  *
  * `page` is clamped into `[1, pages]` after every state change, so shrinking `total` under the
  * user's feet can never leave the pager pointing past the end of the data.
@@ -163,8 +177,10 @@ export class Pagination extends Component {
     if (this.options.showSummary) {
       children.push(h('span', { class: 'zx-pagination__summary', ref: 'summary', ariaLive: 'polite' }));
     }
-    children.push(h('span', { class: 'zx-pagination__spacer' }));
+    // The summary and the page size describe the slice and sit together at the start; the pager
+    // walks the slice and sits alone at the end, where the next-page action is reached last.
     if (this.options.showPageSize) children.push(this._renderPageSize());
+    children.push(h('span', { class: 'zx-pagination__spacer' }));
     children.push(this.options.mode === 'pages' ? this._renderPages() : this._renderLoadMore());
     root.replaceChildren(...children);
 

package/src/components/panel/panel.css

@@ -3,7 +3,7 @@
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 
 /* The header is a row, not one big button: the collapse control takes the title area and the
@@ -35,7 +35,7 @@
   padding: var(--zx-space-3) var(--zx-space-4);
   color: var(--zx-color-text);
   font: inherit;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-align: start;
 }
 
@@ -49,7 +49,8 @@ button.zx-panel__toggle:hover {
 
 /* Inset, because the panel clips its own overflow and would cut an outside ring. */
 button.zx-panel__toggle:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 

package/src/components/questionnaire/questionnaire.css

@@ -51,11 +51,11 @@
 }
 
 .zx-questionnaire__item:focus {
-  outline: none;
+  outline-color: transparent;
 }
 
 .zx-questionnaire__item:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
   border-radius: var(--zx-questionnaire-radius);
 }
@@ -275,7 +275,7 @@
 }
 
 .zx-questionnaire__freeform-input:focus-visible {
-  outline: none;
+  outline-color: transparent;
   border-color: var(--zx-color-accent);
   box-shadow: var(--zx-focus-ring);
 }
@@ -301,7 +301,7 @@
 }
 
 .zx-questionnaire__review:focus {
-  outline: none;
+  outline-color: transparent;
 }
 
 

package/src/components/rating/field-adapter.js

@@ -28,7 +28,8 @@ export function registerRatingFieldAdapter() {
         }
       },
       focus: () => rating.focus(),
-      setDisabled: (value) => (value ? rating.disable() : rating.enable())
+      setDisabled: (value) => (value ? rating.disable() : rating.enable()),
+      setReadonly: (value) => { rating.setReadonly(value); }
     };
   });
 }

package/src/components/rating/rating.css

@@ -30,6 +30,13 @@
   clip-path: inset(0 calc(100% - var(--zx-rating-fill)) 0 0);
 }
 
+/* The icons are outlines; a chosen star is a solid one, so the two states differ in shape as well
+   as in colour. */
+.zx-rating__glyph[data-part="on"],
+.zx-rating__glyph[data-part="on"] .zx-icon {
+  fill: currentColor;
+}
+
 .zx-rating__symbol[data-preview] .zx-rating__glyph[data-part="on"] {
   color: var(--zx-color-warning);
   opacity: 0.75;
@@ -69,7 +76,7 @@
 }
 
 .zx-rating__radio:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/search/search.css

@@ -13,8 +13,11 @@
 }
 
 /* The input reserves room for the clear button, which floats over its trailing edge, so showing
-   or hiding the button never changes the control's total width. */
+   or hiding the button never changes the control's total width. It takes every bit of width the
+   field is given — a toolbar stretches the field, and the submit glyph must stay on its trailing
+   edge rather than stopping where the input's own width ran out. */
 .zx-search__input {
+  flex: 1 1 auto;
   min-inline-size: 12rem;
   min-block-size: 0;
   border: 0;

package/src/components/select/color.js

@@ -0,0 +1,22 @@
+import { isCssColor } from '../../core/util.js';
+
+/** A reference to one custom property, such as `var(--zx-color-tone-blue-fg)`. */
+const TOKEN_REFERENCE = /^var\(\s*--[\w-]+\s*\)$/;
+
+/**
+ * Accepts an item colour for an inline custom property: a CSS colour literal (`#0b7285`, `rgb(…)`,
+ * `oklch(…)`, a named colour) or a reference to a design token (`var(--zx-color-tone-blue-fg)`),
+ * so an item can follow the theme rather than fix one colour for light and dark alike. Anything
+ * else — other functions, declarations, a `var()` with a fallback — is refused.
+ *
+ * Shared by `Select.entity()` and `TagPicker`, the two components that take a colour per item.
+ *
+ * @param {unknown} value Candidate colour.
+ * @returns {string|null} The trimmed colour, or null when the value is not one.
+ */
+export function itemColor(value) {
+  if (typeof value !== 'string') return null;
+  const text = value.trim();
+  if (TOKEN_REFERENCE.test(text)) return text;
+  return isCssColor(text) ? text : null;
+}

package/src/components/select/field-adapter.js

@@ -14,6 +14,8 @@ export function registerSelectFieldAdapter() {
       if (event.target.closest?.('.zx-field__label')) field.adapter.focus();
     });
     delete selectOptions.preset;
+    // The priority preset offers "No priority" (null) by default; a required field cannot hold it.
+    if (preset === 'priority' && props.clearable === undefined) selectOptions.clearable = !options.required;
     const select = field.own(preset === 'priority'
       ? Select.priority(null, selectOptions)
       : preset === 'status'

package/src/components/select/glyphs.js

@@ -0,0 +1,165 @@
+import { h } from '../../core/dom.js';
+import { icon } from '../../core/icons.js';
+
+/**
+ * The shapes a workflow-status glyph can take. Each status reads by shape first and colour
+ * second, so the set stays legible to readers who do not see the colour.
+ * @typedef {'dotted'|'ring'|'progress'|'review'|'ready'|'waiting'|'done'|'canceled'|'duplicate'} StatusIndicator
+ */
+/** @typedef {'muted'|'neutral'|'warning'|'info'|'accent'|'success'|'danger'} StatusTone */
+/**
+ * The built-in workflow statuses. `review` and `cancelled` are accepted as spellings of
+ * `in-review` and `canceled`.
+ * @typedef {'backlog'|'todo'|'in-progress'|'in-review'|'review'|'ready'|'waiting'|'done'|'canceled'|'cancelled'|'duplicate'} StatusId
+ */
+/**
+ * @typedef {Object} StatusIconOptions
+ * @property {StatusIndicator} [indicator] Shape, overriding the status's own.
+ * @property {StatusTone} [tone] Colour, overriding the status's own.
+ * @property {string|null} [label=null] Accessible name. Without one the glyph is decorative
+ *   (`aria-hidden`) and must sit beside text, or inside a control with a tooltip, that says the
+ *   status.
+ */
+/**
+ * @typedef {Object} PriorityIconOptions
+ * @property {string|null} [label=null] Accessible name. Without one the glyph is decorative
+ *   (`aria-hidden`) and must sit beside text, or inside a control with a tooltip, that says the
+ *   priority.
+ */
+
+/** Every shape `statusIcon()` draws. */
+export const STATUS_INDICATORS = Object.freeze([
+  'dotted', 'ring', 'progress', 'review', 'ready', 'waiting', 'done', 'canceled', 'duplicate'
+]);
+
+/** Every colour a status glyph takes, from the semantic set. */
+export const STATUS_TONES = Object.freeze([
+  'muted', 'neutral', 'warning', 'info', 'accent', 'success', 'danger'
+]);
+
+/**
+ * The built-in statuses in workflow order, as `[id, message key, English name, indicator, tone]`.
+ * `Select.status()` lists them; `statusIcon()` draws them.
+ */
+export const DEFAULT_STATUSES = Object.freeze([
+  ['backlog', 'status.backlog', 'Backlog', 'dotted', 'muted'],
+  ['todo', 'status.todo', 'Todo', 'ring', 'neutral'],
+  ['in-progress', 'status.inProgress', 'In Progress', 'progress', 'warning'],
+  ['in-review', 'status.inReview', 'In Review', 'review', 'info'],
+  ['ready', 'status.ready', 'Ready to Merge', 'ready', 'accent'],
+  ['waiting', 'status.waiting', 'Waiting for feedback', 'waiting', 'warning'],
+  ['done', 'status.done', 'Done', 'done', 'info'],
+  ['canceled', 'status.canceled', 'Canceled', 'canceled', 'muted'],
+  ['duplicate', 'status.duplicate', 'Duplicate', 'duplicate', 'muted']
+]);
+
+/** Other spellings of the built-in status ids. */
+const STATUS_ALIASES = Object.freeze({ review: 'in-review', cancelled: 'canceled' });
+
+/** The top priority level, the one coloured level: a danger square with an exclamation mark. */
+export const PRIORITY_URGENT = 4;
+
+/**
+ * Resolves the shape and colour of a status glyph.
+ *
+ * A status is a built-in id (or one of its other spellings), or a status item of the kind
+ * `Select.status({items})` takes, whose own `indicator` and `tone` win over the built-in status
+ * its `ID` names. Options win over both. An unknown shape falls back to the empty ring and an
+ * unknown colour to muted, as `Select.status()` does with a custom item.
+ * @param {StatusId|string|{ID?: unknown, id?: unknown, indicator?: unknown, tone?: unknown}|null|undefined} status
+ * @param {StatusIconOptions} [options={}] Overrides.
+ * @returns {{indicator: StatusIndicator, tone: StatusTone}}
+ */
+export function resolveStatusGlyph(status, options = {}) {
+  const item = status && typeof status === 'object' ? status : null;
+  const id = normalizeStatusId(item ? (item.ID ?? item.id) : status);
+  const preset = DEFAULT_STATUSES.find(([key]) => key === id);
+  const indicator = String(options.indicator ?? item?.indicator ?? preset?.[3] ?? 'ring');
+  const tone = String(options.tone ?? item?.tone ?? preset?.[4] ?? 'muted');
+  return {
+    indicator: /** @type {StatusIndicator} */ (STATUS_INDICATORS.includes(indicator) ? indicator : 'ring'),
+    tone: /** @type {StatusTone} */ (STATUS_TONES.includes(tone) ? tone : 'muted')
+  };
+}
+
+/**
+ * Maps a status id to its built-in spelling: trimmed, lower-cased, and `review` / `cancelled`
+ * read as `in-review` / `canceled`.
+ * @param {unknown} id Status id.
+ * @returns {string}
+ */
+export function normalizeStatusId(id) {
+  const key = String(id ?? '').trim().toLowerCase();
+  return STATUS_ALIASES[key] ?? key;
+}
+
+/**
+ * Settles a priority level: an integer from 0 (lowest) to 4 (highest), or `null` for no priority.
+ * Out-of-range numbers clamp; anything that is not a number reads as 0.
+ * @param {unknown} level Priority level.
+ * @returns {number|null}
+ */
+export function normalizePriorityLevel(level) {
+  if (level === null || level === undefined || level === '') return null;
+  return Math.max(0, Math.min(PRIORITY_URGENT, Math.trunc(Number(level) || 0)));
+}
+
+/**
+ * Draws the workflow-status glyph `Select.status()` shows, for a list row, a board column, a
+ * filter chip, or a heading — so every place a status appears reads as the picker that changes it.
+ *
+ * Built-in statuses: `backlog` (dotted ring), `todo` (empty ring), `in-progress` (ring with a
+ * centre dot), `in-review` (half filled; also `review`), `ready` (a third filled), `waiting` (two
+ * thirds filled), `done` (filled, with a check), `canceled` (filled, with a cross; also
+ * `cancelled`), and `duplicate` (ring with a slash). Colour only repeats what the shape says.
+ * @param {StatusId|string|{ID?: unknown, indicator?: unknown, tone?: unknown}} status Built-in id,
+ *   or a status item with its own `indicator` and `tone`.
+ * @param {StatusIconOptions} [options={}] Shape, colour, and accessible-name overrides.
+ * @returns {HTMLSpanElement} A `.zx-status-icon` element, decorative unless `label` is given.
+ */
+export function statusIcon(status, options = {}) {
+  const { indicator, tone } = resolveStatusGlyph(status, options ?? {});
+  const marker = /** @type {HTMLSpanElement} */ (h('span', {
+    class: 'zx-status-icon',
+    dataset: { indicator, tone }
+  }));
+  if (indicator === 'done') marker.append(icon('check', { size: 8 }));
+  if (indicator === 'canceled') marker.append(icon('x', { size: 7 }));
+  return name(marker, options?.label);
+}
+
+/**
+ * Draws the priority glyph `Select.priority()` shows. Levels 0–3 are four signal bars in muted
+ * ink, filled up to the level; level 4, the highest, is a filled danger square whose "!" the
+ * stylesheet draws, so it never joins the text beside it; no priority (`null`) is a row of dashes.
+ * @param {number|null} level Priority level, 0 (lowest) to 4 (highest), or `null` for none.
+ * @param {PriorityIconOptions} [options={}] Accessible-name option.
+ * @returns {HTMLSpanElement} A `.zx-priority-icon` element, decorative unless `label` is given.
+ */
+export function priorityIcon(level, options = {}) {
+  const normalized = normalizePriorityLevel(level);
+  const glyph = /** @type {HTMLSpanElement} */ (h('span', {
+    class: 'zx-priority-icon',
+    dataset: { level: normalized === null ? 'none' : normalized }
+  }, normalized === PRIORITY_URGENT ? null : Array.from({ length: PRIORITY_URGENT }, (_, index) => h('span', {
+    dataset: { filled: String(normalized !== null && index <= normalized) }
+  }))));
+  return name(glyph, options?.label);
+}
+
+/**
+ * Makes a glyph an image with an accessible name, or hides it from assistive technology.
+ * @param {HTMLSpanElement} glyph Glyph element.
+ * @param {unknown} label Accessible name, if any.
+ * @returns {HTMLSpanElement}
+ */
+function name(glyph, label) {
+  const text = label == null ? '' : String(label).trim();
+  if (text) {
+    glyph.setAttribute('role', 'img');
+    glyph.setAttribute('aria-label', text);
+  } else {
+    glyph.setAttribute('aria-hidden', 'true');
+  }
+  return glyph;
+}