flet-box 1.1.0 → 1.1.2

package/src/widgets/Dropdown.js

@@ -36,6 +36,11 @@ const BINDABLE_KEYS = [
   "clearable",
 ];
 
+/** The menu is mounted into a portal on `document.body`, so the combobox has to
+ *  point at it by id (`aria-controls`, then `aria-activedescendant` for the
+ *  highlighted row). Same seed pattern as `Input`. */
+let dropdownIdSeed = 0;
+
 export const Dropdown = (inputProps = {}) => {
   // The factory never receives these keys, so it can neither resolve a `useState`
   // value for them (a live reactive is a *function*, and `findSelected()` would
@@ -99,6 +104,20 @@ export const Dropdown = (inputProps = {}) => {
   let resizeListener = null;
   let scrollListener = null;
 
+  // A keyboard user never moves focus into the menu: the combobox keeps it and
+  // points at the highlighted row through `aria-activedescendant`. So the open
+  // menu needs its option nodes in build order, and one index into them.
+  let optionNodes = [];
+  let activeIndex = -1;
+
+  const baseId =
+    typeof rest.id === "string" && rest.id
+      ? rest.id
+      : `fletbox-dropdown-${++dropdownIdSeed}`;
+  const listboxId = `${baseId}-listbox`;
+  const labelId = `${baseId}-label`;
+  const optionId = (index) => `${listboxId}-option-${index}`;
+
   /** [vertical, horizontal] in framework units — see `Input`: a `"8px 14px"`
    *  string is raw CSS and stops the field growing with the reader's font. */
   const sizes = {
@@ -176,7 +195,14 @@ export const Dropdown = (inputProps = {}) => {
     const clearIcon = Icon({
       name: "close",
       size: 16,
+      // 16 of glyph plus 12 of padding on each side is the 40-unit target. The
+      // negative vertical margin keeps that box from stretching the field: the
+      // padding is paid to the thumb, not to the header.
+      paddingVertical: 12,
+      paddingHorizontal: 12,
+      marginVertical: -12,
       cursor: "pointer",
+      "aria-label": "Clear selection",
       onclick: (e) => {
         e.stopPropagation();
         if (!currentDisabled) {
@@ -197,7 +223,37 @@ export const Dropdown = (inputProps = {}) => {
   });
   rightContent.push(arrowIcon);
 
+  // The engine decides whether a control is keyboard-operable by reading
+  // `widget.onclick` while the factory runs, so the press path belongs in these
+  // props and not in an assignment made after `Row()` has returned — assigned
+  // late, the selector stayed a plain `div` no keyboard could ever reach.
+  //
+  // `disableTransform` because this row is the full width of the field: it must
+  // not shrink or lift on press, and the arrow already rotates for that.
+  const pressSelector = (event) => {
+    if (event) event.stopPropagation();
+    if (currentDisabled) return;
+    if (!isOpen) {
+      openMenu();
+      return;
+    }
+    // Open: Enter and Space take the highlighted row, the way a native select
+    // does. With nothing highlighted they only close it.
+    if (activeIndex >= 0) chooseOption(activeIndex);
+    else closeMenu();
+  };
+
   const selector = Row({
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    "aria-expanded": "false",
+    // The label is a sibling `<label>` that describes nothing of its own; naming
+    // the combobox from it is what makes the field read as "Country, collapsed"
+    // instead of an unnamed box.
+    "aria-labelledby": currentLabel ? labelId : undefined,
+    tabIndex: currentDisabled ? -1 : 0,
+    onclick: pressSelector,
+    disableTransform: true,
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%",
@@ -257,6 +313,7 @@ export const Dropdown = (inputProps = {}) => {
   if (currentLabel) {
     const labelEl = WidgetFactory({
       tag: "label",
+      id: labelId,
       textContent: currentLabel,
       fontSize: 12,
       color: currentError ? colors.danger : colors.textSecondary,
@@ -267,6 +324,19 @@ export const Dropdown = (inputProps = {}) => {
   }
   container.appendChild(selector);
 
+  // The states that follow these props are set here instead of in the props
+  // object, because `update()` patches this child directly and the factory never
+  // re-runs for it — a prop could only be read once, at build.
+  const syncControlState = () => {
+    selector.setAttribute("aria-disabled", String(Boolean(currentDisabled)));
+    selector.tabIndex = currentDisabled ? -1 : 0;
+    if (currentError) selector.setAttribute("aria-invalid", "true");
+    else selector.removeAttribute("aria-invalid");
+    if (currentLabel) selector.setAttribute("aria-labelledby", labelId);
+    else selector.removeAttribute("aria-labelledby");
+  };
+  syncControlState();
+
   // Menu functions (portal)
   const closeMenu = () => {
     if (!isOpen) return;
@@ -274,8 +344,16 @@ export const Dropdown = (inputProps = {}) => {
       menuElement.parentNode.removeChild(menuElement);
     }
     menuElement = null;
+    optionNodes = [];
+    activeIndex = -1;
     arrowIcon.style.transform = "rotate(0deg)";
     isOpen = false;
+    // The listbox is gone from the DOM: leaving `aria-controls` or
+    // `aria-activedescendant` pointing at it is a broken reference a screen
+    // reader reads as an announcement that never arrives.
+    selector.setAttribute("aria-expanded", "false");
+    selector.removeAttribute("aria-controls");
+    selector.removeAttribute("aria-activedescendant");
 
     if (outsideClickListener)
       document.removeEventListener("click", outsideClickListener);
@@ -319,12 +397,57 @@ export const Dropdown = (inputProps = {}) => {
     }
   };
 
+  /** A row's background comes from its state, not from the last pointer event:
+   *  one question — highlighted, selected, or neither — so the keyboard and the
+   *  mouse cannot paint two different answers. */
+  const optionBackground = (index) => {
+    if (index === activeIndex) return currentOptionHoverColor;
+    const opt = currentOptions[index];
+    return opt !== undefined && getValue(opt) === selectedValue
+      ? currentColor + "15"
+      : "transparent";
+  };
+
+  const paintOption = (index) => {
+    const node = optionNodes[index];
+    if (node) node.style.backgroundColor = optionBackground(index);
+  };
+
+  /** Focus never moves into the menu: the combobox keeps it and points at the
+   *  highlighted row, which is what lets a 200-item list stay one tab stop. */
+  const setActive = (next) => {
+    if (!optionNodes.length) return;
+    const clamped = Math.max(0, Math.min(next, optionNodes.length - 1));
+    if (clamped === activeIndex) return;
+    const previous = activeIndex;
+    activeIndex = clamped;
+    paintOption(previous);
+    const node = optionNodes[activeIndex];
+    paintOption(activeIndex);
+    node.scrollIntoView({ block: "nearest" });
+    selector.setAttribute("aria-activedescendant", node.id);
+  };
+
+  /** The single path that commits a value — the click on a row and Enter on the
+   *  highlighted row both come through here, so `onPress` fires exactly once. */
+  const chooseOption = (index) => {
+    const opt = currentOptions[index];
+    if (opt === undefined) return;
+    const optValue = getValue(opt);
+    selectedValue = optValue;
+    if (effectiveOnChange) effectiveOnChange(optValue);
+    updateDisplay();
+    closeMenu();
+  };
+
   const openMenu = () => {
     if (currentDisabled || isOpen) return;
     closeMenu();
     isOpen = true;
 
     menuElement = Column({
+      id: listboxId,
+      role: "listbox",
       zIndex: 10000,
       border: `1px solid ${colors.border}`,
       backgroundColor: currentBgColor,
@@ -337,7 +460,7 @@ export const Dropdown = (inputProps = {}) => {
       color: currentTextColor, // inherit textColor
     });
 
-    currentOptions.forEach((opt) => {
+    currentOptions.forEach((opt, index) => {
       const optValue = getValue(opt);
       const optLabel = getLabel(opt);
       const optIcon = getIcon(opt);
@@ -358,6 +481,15 @@ export const Dropdown = (inputProps = {}) => {
       );
 
       const optionItem = Row({
+        id: optionId(index),
+        // `option`, not `button`: a screen reader in listbox mode reads the rows
+        // as choices and stays in browse mode, so the arrow keys keep meaning
+        // "next choice" instead of "next focus stop". `tabIndex -1` for the same
+        // reason — a long list must not become a hundred tab stops; the highlight
+        // moves instead of the focus.
+        role: "option",
+        "aria-selected": String(isSelected),
+        tabIndex: -1,
         paddingVertical: 8,
         paddingHorizontal: 12,
         minHeight: TAP_MINIMUM,
@@ -379,25 +511,18 @@ export const Dropdown = (inputProps = {}) => {
         ].filter(Boolean),
       });
 
-      optionItem.onmouseenter = () => {
-        if (!isSelected)
-          optionItem.style.backgroundColor = currentOptionHoverColor;
-      };
-      optionItem.onmouseleave = () => {
-        optionItem.style.backgroundColor = isSelected
-          ? currentColor + "15"
-          : "transparent";
-      };
+      // Hover moves the highlight, so the row under the pointer is the row Enter
+      // would take. Leaving repaints from state instead of wiping to
+      // "transparent": that is what dropped the keyboard highlight as soon as the
+      // mouse crossed an option on its way past it.
+      optionItem.onmouseenter = () => setActive(index);
+      optionItem.onmouseleave = () => paintOption(index);
       optionItem.onclick = (e) => {
         e.stopPropagation();
-        if (!currentDisabled) {
-          selectedValue = optValue;
-          if (effectiveOnChange) effectiveOnChange(optValue);
-          updateDisplay();
-          closeMenu();
-        }
+        if (!currentDisabled) chooseOption(index);
       };
       menuElement.appendChild(optionItem);
+      optionNodes.push(optionItem);
     });
 
     if (portal) {
@@ -415,6 +540,15 @@ export const Dropdown = (inputProps = {}) => {
       menuElement.style.width = "100%";
     }
 
+    // Only once the listbox is in the DOM: while it is detached these are
+    // references to nothing.
+    selector.setAttribute("aria-expanded", "true");
+    selector.setAttribute("aria-controls", listboxId);
+    const selectedIndex = currentOptions.findIndex(
+      (entry) => getValue(entry) === selectedValue,
+    );
+    if (selectedIndex >= 0) setActive(selectedIndex);
+
     arrowIcon.style.transform = "rotate(180deg)";
 
     outsideClickListener = (e) => {
@@ -428,12 +562,79 @@ export const Dropdown = (inputProps = {}) => {
     document.addEventListener("click", outsideClickListener);
   };
 
-  selector.onclick = (e) => {
-    e.stopPropagation();
-    if (currentDisabled) return;
-    isOpen ? closeMenu() : openMenu();
+  // Enter and Space are deliberately absent: the engine's own key handler calls
+  // `onclick` for those, and `pressSelector` already opens while closed and takes
+  // the highlighted row while open. Handling them again here would run the press
+  // twice — open, then immediately choose.
+  //
+  // `event.target !== selector` leaves a keystroke to whatever control inside the
+  // field actually holds it.
+  const onSelectorKeyDown = (e) => {
+    if (e.target !== selector || currentDisabled) return;
+    const total = optionNodes.length;
+
+    if (!isOpen) {
+      // Opening with an arrow lands on the current value, or the first choice
+      // when nothing is selected yet — the same place a native select puts it.
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        openMenu();
+        const start = currentOptions.findIndex(
+          (entry) => getValue(entry) === selectedValue,
+        );
+        setActive(start >= 0 ? start : 0);
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActive(activeIndex + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActive(activeIndex <= 0 ? total - 1 : activeIndex - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        setActive(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setActive(total - 1);
+        break;
+      case "Escape":
+        // Discard, the way a native select does: closing on Escape must not
+        // commit the row the arrows happened to rest on.
+        e.preventDefault();
+        e.stopPropagation();
+        closeMenu();
+        break;
+      case "Tab":
+        // Leaving the control closes the menu; a detached listbox behind the tab
+        // order is a region of the page no key can reach again.
+        closeMenu();
+        break;
+      default:
+        if (e.key.length === 1) {
+          const typed = e.key.toLowerCase();
+          const found = currentOptions.findIndex((entry) =>
+            getLabel(entry).toLowerCase().startsWith(typed),
+          );
+          if (found >= 0) {
+            e.preventDefault();
+            setActive(found);
+          }
+        }
+    }
   };
 
+  selector.addEventListener("keydown", onSelectorKeyDown);
+  container.onUnmount(() =>
+    selector.removeEventListener("keydown", onSelectorKeyDown),
+  );
+
   // Public API and reactivity
   const update = (newProps) => {
     let needsDisplayUpdate = false;
@@ -470,6 +671,7 @@ export const Dropdown = (inputProps = {}) => {
       else if (currentLabel) {
         const labelEl = WidgetFactory({
           tag: "label",
+          id: labelId,
           textContent: currentLabel,
           fontSize: "12px",
           color: currentError ? colors.danger : colors.textSecondary,
@@ -507,6 +709,7 @@ export const Dropdown = (inputProps = {}) => {
       needsDisplayUpdate = true;
     }
     if (needsDisplayUpdate) {
+      syncControlState();
       updateDisplay();
       selector.style.padding = `${toREM(currentSize.padding[0])} ${toREM(currentSize.padding[1])}`;
       selector.style.minHeight = toREM(currentSize.minHeight);

package/src/widgets/GridView.js

@@ -1,11 +1,25 @@
 /**
  * @file GridView.js
  * @description Grid layout, implemented as a `ListView` with `wrapItems`.
+ *
+ * The grid takes its items either way a list can be written: as data plus a
+ * builder, or as the cells themselves. `columns` is the only decision that
+ * cannot be inferred — the number of columns is fixed, and each cell is a
+ * percentage of the container, so the grid adapts to the width it is given
+ * rather than to a breakpoint.
  */
 import { ListView } from "./ListView.js";
 
 export const GridView = (props) => {
-  const { columns = 2, itemHeight = 150, spacing = 8, ...rest } = props;
+  const { columns = 2, itemHeight = 150, spacing = 8, children, data, renderItem, ...rest } = props;
+
+  // Cells written as `children` are the same contract read the other way round:
+  // the items are already built, so the builder is the identity. Dropping them
+  // into `...rest` instead painted them as the factory's own children, which is a
+  // vertical stack — a `columns: 3` grid that showed three rows of full-width
+  // cells and never formed a column.
+  const items =
+    data ?? (children == null ? [] : Array.isArray(children) ? children : [children]);
 
   return ListView({
     widgetName: "GridView",
@@ -13,6 +27,8 @@ export const GridView = (props) => {
     crossAxisCount: columns, // ← number of columns
     itemSize: itemHeight, // ← height of each cell
     gap: spacing, // ← spacing between items
+    data: items,
+    renderItem: renderItem ?? ((cell) => cell),
     ...rest,
   });
 };

package/src/widgets/Icon.js

@@ -17,6 +17,21 @@ export const Icon = (props) => {
   } = props;
   const iconName = icon || name || "";
 
+  // The glyph is TEXT — a ligature the font draws — so a reader says the
+  // characters it finds: an accordion header reads "Payments expand_more" and a
+  // close control reads "close". An icon is therefore decoration unless the app
+  // names it with `aria-label`, and a generic `<span>` only carries a name when it
+  // has a role to put it on, which is why a named one becomes an image.
+  //
+  // A pressable icon is the exception: the engine gives it `role="button"`, and
+  // that is a better role than "image" for something you activate.
+  const label = rest["aria-label"];
+  const isNamed = typeof label === "string" && label.trim() !== "";
+  const isPressable =
+    typeof rest.onclick === "function" ||
+    typeof rest.onClick === "function" ||
+    typeof rest.onPress === "function";
+
   return WidgetFactory({
     tag: "span",
     widgetName: "Icon",
@@ -28,6 +43,12 @@ export const Icon = (props) => {
     alignItems: "center",
     justifyContent: "center",
     userSelect: "none",
+    ...(isNamed
+      ? isPressable
+        ? null
+        : { role: "img" }
+      : // An app that hid it deliberately keeps its own answer.
+        rest["aria-hidden"] === undefined ? { "aria-hidden": "true" } : null),
     ...rest,
   });
 };

package/src/widgets/Input.js

@@ -119,6 +119,12 @@ export const Input = (props) => {
       ? `${rest.id}-input`
       : `fletbox-input-${++inputIdSeed}`;
 
+  // The message under the field is what `aria-describedby` points at while the
+  // field is invalid. A described-by that names a `display: none` node is a
+  // control that claims a description it does not have, so the reference and the
+  // message appear and disappear together.
+  const errorId = `${fieldId}-error`;
+
   // DOM element references — populated during the build phase below
   let inputElement = null;
   let validationIcon = null;
@@ -127,11 +133,6 @@ export const Input = (props) => {
   let container = null;
   let clearButton = null;
 
-  // Whether the native input currently holds focus. Used to keep the focus
-  // ring (a box-shadow) in sync with validation colors without ever changing
-  // the border width — changing the width would resize the box and shift layout.
-  const isFocused = () => document.activeElement === inputElement;
-
   // ========== SIZES ==========
   /**
    * Framework units, not CSS strings: this widget builds a real `<input>` and
@@ -257,19 +258,14 @@ export const Input = (props) => {
       borderColorValue = colors.success;
     }
 
-    // The border keeps a fixed 1px width in every state; focus thickness is
-    // drawn as a 1px box-shadow ring instead. This changes the look on focus
-    // without altering the element's box size, so nothing gets pushed around.
+    // The border is the validation signal and nothing else: 1px in every state,
+    // recoloured by the verdict. Focusing the field does not touch it — the ring
+    // a focused control wears is the engine's (`src/utils/focusRing.js`), and a
+    // second hand-painted ring beside it reads as a doubled, thicker box.
     if (variant === "outlined") {
       inputWrapper.style.borderColor = borderColorValue;
-      inputWrapper.style.boxShadow = isFocused()
-        ? `0 0 0 1px ${borderColorValue}`
-        : "none";
     } else if (variant === "underlined") {
       inputWrapper.style.borderBottomColor = borderColorValue;
-      inputWrapper.style.boxShadow = isFocused()
-        ? `inset 0 -1px 0 0 ${borderColorValue}`
-        : "none";
     }
 
     if (showValidationIcon && validationIcon) {
@@ -282,20 +278,35 @@ export const Input = (props) => {
       }
     }
 
+    let messageToShow = "";
+    if (validationMessage && showValidationMessage && !isValid && !error) {
+      messageToShow = validationMessage;
+    } else if (error) {
+      messageToShow = error === true ? "Invalid value" : error;
+    }
+
     if (errorMessageElement) {
-      if (validationMessage && showValidationMessage && !isValid && !error) {
-        errorMessageElement.textContent = validationMessage;
-        errorMessageElement.style.color = colors.danger;
-        errorMessageElement.style.display = "block";
-      } else if (error) {
-        errorMessageElement.textContent =
-          error === true ? "Invalid value" : error;
+      if (messageToShow) {
+        errorMessageElement.textContent = messageToShow;
         errorMessageElement.style.color = colors.danger;
         errorMessageElement.style.display = "block";
       } else {
         errorMessageElement.style.display = "none";
       }
     }
+
+    // A red rim says "wrong" to an eye and nothing to anyone else. `aria-invalid`
+    // is the state, and the description is the reason, so they toggle together:
+    // a field that is invalid with no message attached reads as a broken control.
+    if (inputElement) {
+      if (messageToShow) {
+        inputElement.setAttribute("aria-invalid", "true");
+        inputElement.setAttribute("aria-describedby", errorId);
+      } else {
+        inputElement.removeAttribute("aria-invalid");
+        inputElement.removeAttribute("aria-describedby");
+      }
+    }
   };
 
   /**
@@ -411,11 +422,18 @@ export const Input = (props) => {
   inputWrapper = WidgetFactory({
     tag: "div",
     disableTransform: true,
+    // Tells the engine's focus rule which box is the field: the ring belongs
+    // around this element, not around the text box inside it.
+    "data-fb-field": "true",
     ...wrapperStyles,
   });
 
   // --- Optional left icon ---
   if (iconLeft) {
+    // With `onIconPress` the icon is a control, so it is built as one: the click
+    // goes in as a prop — which is what lets the engine give it a role, a Tab
+    // stop and Enter — and it takes the glyph's own name, because an icon-only
+    // control with no name reads as "button".
     const iconEl = Icon({
       name: iconLeft,
       size: iconSize || sz.iconSize,
@@ -423,8 +441,9 @@ export const Input = (props) => {
       marginLeft: 12,
       flexShrink: 0,
       pointerEvents: "auto",
+      "aria-label": onIconPress ? iconLeft : undefined,
+      onclick: onIconPress,
     });
-    if (onIconPress) iconEl.onclick = onIconPress;
     inputWrapper.appendChild(iconEl);
   }
 
@@ -443,10 +462,18 @@ export const Input = (props) => {
 
   inputElement.style.flex = "1";
   inputElement.style.padding = `${toREM(sz.padding[0])} ${toREM(sz.padding[1])}`;
+  // The length is published for the engine's iOS floor: below 16px WebKit zooms
+  // the whole page on focus, and `fieldFont.js` needs this exact rem value to
+  // raise only what is under the threshold, not every field.
+  inputElement.style.setProperty("--fb-field-font", toREM(sz.fontSize));
   inputElement.style.fontSize = toREM(sz.fontSize);
   inputElement.style.minHeight = toREM(sz.minHeight);
   inputElement.style.border = "none";
-  inputElement.style.outline = "none";
+  // Deliberately no `outline` here. An inline declaration outranks every
+  // stylesheet rule, so the `outline: none` this widget used to write is what
+  // left a focused field with no ring — and the `filled` variant, which has no
+  // border to highlight, no focus signal at all. `src/utils/focusRing.js` paints
+  // the ring around the wrapper, where the whole control is.
   inputElement.style.backgroundColor = "transparent";
   inputElement.style.fontFamily = "inherit";
   inputElement.style.width = "100%";
@@ -465,16 +492,8 @@ export const Input = (props) => {
   });
 
   inputElement.addEventListener("focus", (e) => {
-    // Highlight the border on focus to signal the active field.
-    // The border width stays at 1px; the thicker focus look comes from a
-    // 1px box-shadow ring so focusing never resizes the box or shifts layout.
-    if (variant === "outlined") {
-      inputWrapper.style.borderColor = colors.primary;
-      inputWrapper.style.boxShadow = `0 0 0 1px ${colors.primary}`;
-    } else if (variant === "underlined") {
-      inputWrapper.style.borderBottomColor = colors.primary;
-      inputWrapper.style.boxShadow = `inset 0 -1px 0 0 ${colors.primary}`;
-    }
+    // No paint here. The engine's `:focus-visible` rule draws the ring, and it
+    // reaches this field only because nothing hides it with an inline `outline`.
     if (onFocus) onFocus(e);
   });
 
@@ -482,12 +501,8 @@ export const Input = (props) => {
     // Restore normal border and run final validation when the user leaves the field
     if (variant === "outlined") {
       inputWrapper.style.borderColor = error ? colors.danger : colors.border;
-      inputWrapper.style.boxShadow = "none";
     } else if (variant === "underlined") {
-      inputWrapper.style.borderBottomColor = error
-        ? colors.danger
-        : colors.border;
-      inputWrapper.style.boxShadow = "none";
+      inputWrapper.style.borderBottomColor = error ? colors.danger : colors.border;
     }
     const result = validateValue(currentValue);
     isValid = result.valid;
@@ -507,11 +522,19 @@ export const Input = (props) => {
   // --- Trailing controls (clear / reveal) ---
   // Real `<button type="button">` elements: they are keyboard-reachable, and the
   // `type` keeps them from submitting a form the input happens to live in.
-  const makeTrailingButton = (glyph, label, onPress) => {
+  //
+  // The glyph is a Material icon name, drawn by the same `.material-icons` face
+  // every other icon in the framework uses. An emoji is not a substitute: it is a
+  // colour bitmap the field's own `color` cannot reach, it is painted by the
+  // operating system's emoji font, and it is wider than the 16px slot it is given
+  // — measured 20×17px for `👁` against 12.2px for the `✕` beside it, so one row
+  // of trailing controls carried three different optical sizes and a glyph that
+  // could not follow the theme.
+  const makeTrailingButton = (iconName, label, onPress) => {
     const btn = document.createElement("button");
     btn.type = "button";
-    btn.textContent = glyph;
     btn.setAttribute("aria-label", label);
+    btn.appendChild(Icon({ name: iconName, size: 16, color: colors.textSecondary }));
     btn.style.width = toREM(32);
     btn.style.height = toREM(32);
     btn.style.flexShrink = "0";
@@ -539,7 +562,7 @@ export const Input = (props) => {
   };
 
   if (clearable) {
-    clearButton = makeTrailingButton("✕", "Clear", () => {
+    clearButton = makeTrailingButton("close", "Clear", () => {
       handleInput("", null);
       inputElement.focus();
     });
@@ -549,10 +572,12 @@ export const Input = (props) => {
   if (passwordToggle) {
     let revealed = type !== "password";
     const paint = (btn) => {
-      btn.textContent = revealed ? "🙈" : "👁";
+      // The ligature is the text of the icon span, so changing the name is
+      // changing the picture — and the button keeps its one accessible name.
+      btn.firstElementChild.textContent = revealed ? "visibility_off" : "visibility";
       btn.setAttribute("aria-label", revealed ? "Hide value" : "Show value");
     };
-    const btn = makeTrailingButton("👁", "Show value", () => {
+    const btn = makeTrailingButton("visibility", "Show value", () => {
       revealed = !revealed;
       inputElement.type = revealed ? "text" : "password";
       paint(btn);
@@ -590,8 +615,9 @@ export const Input = (props) => {
       marginRight: 12,
       flexShrink: 0,
       pointerEvents: "auto",
+      "aria-label": onIconPress ? iconRight : undefined,
+      onclick: onIconPress,
     });
-    if (onIconPress) iconEl.onclick = onIconPress;
     inputWrapper.appendChild(iconEl);
   }
 
@@ -599,6 +625,11 @@ export const Input = (props) => {
 
   // --- Error message element rendered below the input ---
   errorMessageElement = document.createElement("span");
+  errorMessageElement.id = errorId;
+  // `polite`, not `assertive`: the message is the field's answer when the reader
+  // leaves it, not an interruption. An assertive one would talk over whatever the
+  // person was in the middle of hearing.
+  errorMessageElement.setAttribute("aria-live", "polite");
   errorMessageElement.textContent = "";
   errorMessageElement.style.fontSize = toREM(12);
   errorMessageElement.style.color = colors.danger;