flet-box 1.1.0 → 1.1.2

package/src/widgets/BottomSheet.js

@@ -10,6 +10,8 @@ import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { Container } from "./Container.js";
 import { toREM } from "../utils/units.js";
+import { PILL } from "../tools/index.js";
+import { trapFocus } from "../utils/focusScope.js";
 
 export const BottomSheet = (props) => {
   const {
@@ -55,8 +57,6 @@ export const BottomSheet = (props) => {
     // Callbacks
     onOpen,
     onClose,
-
-    ...rest
   } = props;
 
   let isOpen = false;
@@ -64,6 +64,11 @@ export const BottomSheet = (props) => {
   // Pending "hide after the close animation" timer, so it can be cancelled.
   let closeTimer = null;
   let sheetContainer = null;
+  // What `trapFocus` hands back while the sheet is open (see Modal.js for the
+  // whole argument): Tab stays inside the panel and focus goes home on close.
+  // The release is idempotent, so close and unmount can both call it.
+  let releaseFocusScope = () => {};
+
   let startY = 0;
   let currentY = 0;
 
@@ -76,6 +81,15 @@ export const BottomSheet = (props) => {
     height: "100%",
     backgroundColor: overlayColor,
     zIndex: overlayZIndex,
+    // The scrim closes the sheet for a pointer and is nothing for a keyboard —
+    // left to the engine, its `click` would become a full-viewport tab stop.
+    role: "presentation",
+    tabIndex: -1,
+    // ...but it is also the panel's parent, and the engine's press feedback writes
+    // `scale: 0.98` on whatever carries the handler: pressing the backdrop shrank the
+    // whole layer, so the sheet dipped and grew a shadow-less frame for the length of
+    // the press. A scrim is not a control — it presses nothing, it only dismisses.
+    disableTransform: true,
     opacity: 0,
     visibility: "hidden",
     transition: `opacity ${animationDuration}ms ease, visibility ${animationDuration}ms ease`,
@@ -97,7 +111,7 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
           width: dragHandleWidth,
           height: dragHandleHeight,
           backgroundColor: dragHandleColor,
-          borderRadius: dragHandleHeight / 2,
+          borderRadius: PILL,
         }),
       })
     : null;
@@ -116,13 +130,23 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     );
   }
   if (showCloseButton) {
+    // Both the name and the handler are props, not post-hoc assignments: `Icon`
+    // decides whether it is decoration from the props it is handed, and the engine
+    // only makes a control keyboard-operable when it can see the press while the
+    // widget is built. Set after the fact, this close button was a mouse-only "×"
+    // that a reader could not even find.
     const closeBtn = Icon({
       name: "close",
-      size: 22,
+      size: 24,
+      // 24 + 2 x 8 = 40 framework units: the same target floor every other
+      // pressable control answers to, and it scales with the reader's font.
+      paddingVertical: 8,
+      paddingHorizontal: 8,
       color: colors.textSecondary,
       cursor: "pointer",
+      onclick: () => close(),
+      "aria-label": "Close sheet",
     });
-    closeBtn.onclick = () => close();
     headerChildren.push(closeBtn);
   }
 
@@ -189,6 +213,12 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     ),
   });
 
+  sheetContainer.setAttribute("role", "dialog");
+  sheetContainer.setAttribute("aria-modal", "true");
+  if (typeof title === "string" && title) {
+    sheetContainer.setAttribute("aria-label", title);
+  }
+
   sheetContainer.appendChild(sheetBody);
   overlay.appendChild(sheetContainer);
   document.body.appendChild(overlay);
@@ -203,6 +233,7 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
       closeTimer = null;
     }
     document.removeEventListener("keydown", handleKeyDown);
+    releaseFocusScope();
   });
 
   // Drag handlers
@@ -254,6 +285,7 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     sheetContainer.style.transform = "translateY(0)";
     if (onOpen) onOpen();
     document.addEventListener("keydown", handleKeyDown);
+    releaseFocusScope = trapFocus(sheetContainer);
 
     if (closeOnDragDown && dragHandle) {
       dragHandle.addEventListener("mousedown", onTouchStart);
@@ -277,6 +309,7 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
       closeTimer = null;
       overlay.style.visibility = "hidden";
     }, animationDuration);
+    releaseFocusScope();
     if (onClose) onClose();
     document.removeEventListener("keydown", handleKeyDown);
 
@@ -297,6 +330,7 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
 
   const destroy = () => {
     if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+    releaseFocusScope();
     document.removeEventListener("keydown", handleKeyDown);
   };
 

package/src/widgets/Chart.js

@@ -10,6 +10,36 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+/**
+ * The step a Y axis labels in: a round number whose mantissa is 1, 2 or 5.
+ *
+ * Reading the axis off the padded range divided into five — what this did before —
+ * puts the labels wherever the data happens to end: a `[6, 21]` series wrote
+ * `0, 4, 8, 13, 17, 21`, whose steps are 4, 4, 5, 4, 4. Equal gridline spacing with
+ * unequal labelled steps reads as a rounding bug even when nothing is rounding, and
+ * it makes the top label disagree with the line it sits on.
+ *
+ * @param {number} rough - The step the desired number of lines implies.
+ * @returns {number} The nearest round step at or above it.
+ */
+const niceStep = (rough) => {
+  if (!(rough > 0)) return 1;
+  const exponent = Math.pow(10, Math.floor(Math.log10(rough)));
+  const mantissa = rough / exponent;
+  const nice = mantissa <= 1 ? 1 : mantissa <= 2 ? 2 : mantissa <= 5 ? 5 : 10;
+  return nice * exponent;
+};
+
+/**
+ * How many decimals a step needs to be written honestly: a 0.5 step labelled as
+ * `0` and `1` describes neither of its lines.
+ *
+ * @param {number} step
+ * @returns {number}
+ */
+const stepDecimals = (step) =>
+  Math.max(0, Math.min(6, -Math.floor(Math.log10(step))));
+
 /**
  * Creates a Chart widget rendered on an HTML5 `<canvas>` element.
  *
@@ -364,7 +394,6 @@ export const Chart = (props) => {
    * Draws a candlestick chart onto the canvas context.
    *
    * @param {CanvasRenderingContext2D} ctx
-   * @param {number} canvasWidth
    * @param {number} chartHeight
    * @param {number} maxValue
    * @param {number} minValue
@@ -373,7 +402,6 @@ export const Chart = (props) => {
    */
   const drawCandle = (
     ctx,
-    canvasWidth,
     chartHeight,
     maxValue,
     minValue,
@@ -434,23 +462,28 @@ export const Chart = (props) => {
     ctx.strokeStyle = axisColor;
     ctx.lineWidth = 0.5;
 
-    const steps = 5;
+    // Lines sit on round values inside the plotted range, not on fifths of it.
     const range = maxValue - minValue;
+    const step = niceStep(range / 5);
+    const decimals = stepDecimals(step);
+    const first = Math.ceil(minValue / step) * step;
+    const lines = range > 0 ? Math.floor((maxValue - first) / step) : 0;
 
-    for (let i = 0; i <= steps; i++) {
-      const value = minValue + (i / steps) * range;
+    for (let i = 0; i <= lines; i++) {
+      const value = first + i * step;
       const y = getYPosition(value, minValue, maxValue, chartHeight);
       ctx.beginPath();
       ctx.moveTo(pad.left, y);
       ctx.lineTo(canvasWidth - pad.right, y);
       ctx.stroke();
 
-      // Round very small floating-point values to 0 to avoid displaying "-0.00"
-      const displayValue = Math.abs(value) < 0.01 ? 0 : Math.round(value);
+      // A step of 0.5 needs one decimal; a step of 5 needs none. Writing `-0` for
+      // a value that is zero by rounding reads as a negative axis.
+      const label = Math.abs(value) < step / 100 ? 0 : value.toFixed(decimals);
       ctx.fillStyle = yAxisColor;
       ctx.font = "9px sans-serif";
       ctx.textAlign = "right";
-      ctx.fillText(displayValue, pad.left - 5, y + 3);
+      ctx.fillText(label, pad.left - 5, y + 3);
     }
   };
 
@@ -534,7 +567,6 @@ export const Chart = (props) => {
     } else if (type === "candle") {
       drawCandle(
         context,
-        canvasWidth,
         chartHeight,
         maxValue,
         minValue,

package/src/widgets/Checkbox.js

@@ -5,6 +5,7 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { Text } from "./Text.js";
 import { colors } from "../utils/themes.js";
+import { readableInk } from "../utils/readableInk.js";
 import { TAP_MINIMUM, LABEL_TEXT } from "../tools/index.js";
 
 export const Checkbox = (props) => {
@@ -16,6 +17,8 @@ export const Checkbox = (props) => {
     size = 20,
     activeColor = colors.primary,
     label = null,
+    borderRadius = null,
+    variant = "outlined",
     ...rest
   } = props;
 
@@ -33,22 +36,55 @@ export const Checkbox = (props) => {
   // clears the 3:1 non-text minimum on each surface.
   const offColor = disabled ? colors.border : colors.gray500;
 
+  // `variant: "filled"` is the same word the rest of the API already uses for a solid
+  // plate (`Button`, `Chip`, `Input`, `Dropdown`), and it changes the *checked* state
+  // only: a filled box that means "off" is a button, not a checkbox. The plate is the
+  // accent the control already carries, so one brand color per screen still holds, and
+  // the tick takes whichever of black or white reads on it — the same decision `Button`
+  // makes, and it falls back to the theme's own on-plate ink for a fill this code
+  // cannot measure (a gradient, a CSS variable).
+  const isFilled = variant === "filled";
+  const plateInk = readableInk(activeColor, colors.onPrimary);
+
+  // The corner is a decision, and this control shipped none: `borderRadius: 0` put a
+  // raw square plate inside the rounded cards, fields and buttons of the same screen,
+  // which is rule 02's "two products on one page". It is snapped to two steps of the
+  // radius scale rather than scaled continuously — a radius between the steps is the
+  // drift rule 03 calls `OFF_SCALE_RADIUS`, and two checkboxes on one form that differ
+  // by 1px of corner read as a mistake nobody can name. `4` on the default 20-unit box,
+  // `8` once the box is big enough to carry it.
+  const boxRadius = borderRadius ?? (size >= 28 ? 8 : 4);
+
+  // The three things a state decides, in one place, so the box built below and every
+  // repaint on press cannot disagree. A checked box always wears the accent: the rim
+  // used to fall to `colors.border` while disabled, which measured 1.2:1 on the dark
+  // card — a locked-on checkbox that looked unchecked.
+  const rimFor = (on) => (on ? activeColor : offColor);
+  const fillFor = (on) => (on && isFilled ? activeColor : "transparent");
+  const tickFor = (on) =>
+    on && isFilled ? plateInk : disabled ? colors.textDisabled : activeColor;
+
   const updateUI = (newChecked) => {
+    // The state an assistive technology reads is this attribute, not the tick it
+    // cannot see. `updateUI` is the one place the visual state is painted, so the
+    // attribute and the box cannot disagree.
+    if (checkbox) checkbox.setAttribute("aria-checked", String(Boolean(newChecked)));
     if (checkboxRef) {
-      checkboxRef.style.border = `2px solid ${newChecked ? activeColor : offColor}`;
+      checkboxRef.style.border = `2px solid ${rimFor(newChecked)}`;
+      checkboxRef.style.backgroundColor = fillFor(newChecked);
     }
     if (checkMarkRef) {
       checkMarkRef.style.display = newChecked ? "inline-block" : "none";
+      checkMarkRef.style.color = tickFor(newChecked);
     }
   };
 
-  // The tick is drawn inside the frame, in the active colour: a filled plate
-  // would hide the border the box is supposed to show, and the theme ink it used
-  // to carry (white in light, near-black in dark) only read on that plate.
+  // The tick lives inside the frame, in the accent — or in the plate's readable ink
+  // once `variant: "filled"` turns the box into a solid plate.
   const checkMark = WidgetFactory({
     tag: "span",
     textContent: "✓",
-    color: disabled ? colors.textDisabled : activeColor,
+    color: tickFor(internalChecked),
     fontSize: Math.max(12, Math.round(size * 0.65)),
     fontWeight: "bold",
     lineHeight: 1,
@@ -56,14 +92,14 @@ export const Checkbox = (props) => {
   });
   checkMarkRef = checkMark;
 
-  // The visual square. Everything drawn lives here, so the box below can be the
+  // The visual box. Everything drawn lives here, so the root below can be the
   // finger's target without becoming a 40-unit checkbox.
   const box = WidgetFactory({
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalChecked ? activeColor : offColor}`,
-    borderRadius: 0,
-    backgroundColor: "transparent",
+    border: `2px solid ${rimFor(internalChecked)}`,
+    borderRadius: boxRadius,
+    backgroundColor: fillFor(internalChecked),
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -89,6 +125,12 @@ export const Checkbox = (props) => {
 
   const rootProps = {
     widgetName: "Checkbox",
+    // The drawn box is a `span` and the root is a row, so nothing here is a
+    // checkbox to an assistive technology unless the widget says so. `role`
+    // reaches the factory before `applyEffects`, which is what keeps the engine
+    // from labelling the control `button`.
+    role: "checkbox",
+    "aria-checked": String(Boolean(internalChecked)),
     display: "inline-flex",
     alignItems: "center",
     justifyContent: isLabelled ? "flex-start" : "center",
@@ -116,11 +158,19 @@ export const Checkbox = (props) => {
   // default press feedback, because there the root *is* the control.
   if (isLabelled) rootProps.disableTransform = true;
 
+  // A caller's radius is the control's, so it rounds the drawn box above. It is
+  // re-applied to the root only when it was actually given: that row is where a
+  // `bgColor` lands on a labelled checkbox, and it must keep the corner such an app
+  // already saw. Left alone otherwise, because the root is invisible and its own
+  // corner is nobody's business.
+  if (borderRadius !== null) rootProps.borderRadius = borderRadius;
+
   const checkbox = WidgetFactory({ ...rootProps, ...rest });
 
   // Inline usage (a checkbox dropped mid-paragraph) would otherwise
   // baseline-align the box's bottom edge and lift the square above the text.
   checkbox.style.verticalAlign = "middle";
+  if (disabled) checkbox.setAttribute("aria-disabled", "true");
 
   // Handle click
   if (!disabled) {

package/src/widgets/Chip.js

@@ -57,7 +57,12 @@ export const Chip = (props) => {
    */
   const chipPadding =
     padding === undefined
-      ? { paddingVertical: 4, paddingHorizontal: 12 }
+      ? {
+          // The delete glyph carries the 40-unit target itself, so the row does
+          // not need a second gutter above and below it.
+          paddingVertical: onDelete ? 0 : 4,
+          paddingHorizontal: 12,
+        }
       : typeof padding === "number"
         ? { paddingVertical: padding, paddingHorizontal: padding * 2 }
         : { padding };
@@ -104,7 +109,14 @@ export const Chip = (props) => {
   if (onDelete) {
     const closeIcon = Icon({
       name: "close",
+      // The glyph is decoration and the ligature is not a name: "close" is what a
+      // reader would say, on a control whose whole job is to take this label away.
+      "aria-label": label ? `Remove ${label}` : "Remove",
       size: Math.max(12, size - 2),
+      // The glyph stays small; the box is the 40-unit target, in framework
+      // units so it grows with the reader's font like every other length.
+      width: TAP_MINIMUM,
+      height: TAP_MINIMUM,
       color: txtColor,
       cursor: "pointer",
       onclick: (e) => {

package/src/widgets/CircularBar.js

@@ -78,7 +78,6 @@ export const CircularBar = (props) => {
   let resizeObserver = null;
   let container = null;
   let currentWidth = 0;
-  let isHovering = false;
 
   const isFixedSize = size !== null && size !== undefined;
   const fixedSize = isFixedSize ? size : 200;
@@ -297,7 +296,7 @@ export const CircularBar = (props) => {
   const setupEvents = () => {
     if (!canvas) return;
     if (onClick)
-      canvas.addEventListener("click", (e) =>
+      canvas.addEventListener("click", () =>
         onClick({
           value: currentValue,
           max,
@@ -306,11 +305,9 @@ export const CircularBar = (props) => {
       );
     if (onHover) {
       canvas.addEventListener("mouseenter", () => {
-        isHovering = true;
         onHover(true, { value: currentValue, max });
       });
       canvas.addEventListener("mouseleave", () => {
-        isHovering = false;
         onHover(false);
       });
     }
@@ -321,6 +318,14 @@ export const CircularBar = (props) => {
     container = WidgetFactory({
       tag: "div",
       widgetName: "CircularBar",
+      // The arc is painted into a canvas, which is one anonymous rectangle to a
+      // reader. The role and the three numbers are the whole of what the ring
+      // means, and they are cheap to keep true.
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": String(max),
+      "aria-valuenow": String(Math.min(value, max)),
+      ...(label ? { "aria-label": label } : null),
       display: isFixedSize ? "inline-block" : "block",
       width: isFixedSize ? `${fixedSize}px` : "100%",
       height: isFixedSize ? `${fixedSize}px` : "auto",
@@ -352,8 +357,15 @@ export const CircularBar = (props) => {
   });
 
   container.updateValue = (newValue, newMax = null) => {
-    if (newMax !== null) max = newMax;
+    if (newMax !== null) {
+      max = newMax;
+      container.setAttribute("aria-valuemax", String(max));
+    }
     value = Math.min(newValue, max);
+    // The announced value is the target of the animation, not the frame it is
+    // drawing: a reader who hears the sweep would hear a different number every
+    // time they asked.
+    container.setAttribute("aria-valuenow", String(value));
     startAnimation();
   };
 

package/src/widgets/CircularChart.js

@@ -303,7 +303,11 @@ export const CircularChart = (props) => {
       const cy = getCenterY();
       ctx.beginPath();
       ctx.arc(cx, cy, r, 0, Math.PI * 2);
-      ctx.fillStyle = colors.gray200;
+      // The disc behind a donut is the hole's filler, not a shape of its own:
+      // `gray200` painted a pale plate inside the ring, so the widget read as a
+      // pie with a grey centre instead of a ring with nothing in it. The slices'
+      // separators already use `colors.card` for the same reason.
+      ctx.fillStyle = colors.card;
       ctx.fill();
     }
   };
@@ -390,7 +394,7 @@ export const CircularChart = (props) => {
     if (animationId) cancelAnimationFrame(animationId);
     if (!ctx || !canvas) return;
     if (data && data.length > 0) {
-      currentData = data.map((d) => 0);
+      currentData = data.map(() => 0);
     } else {
       currentData = [];
     }
@@ -471,6 +475,20 @@ export const CircularChart = (props) => {
     }
   };
 
+  /**
+   * The slices as a sentence. To a reader a canvas is one empty rectangle, so
+   * the numbers painted inside it have to be said beside it.
+   */
+  const chartSummary = () =>
+    data.length === 0
+      ? "Chart with no data"
+      : `Chart: ${data
+          .map(
+            (slice, i) =>
+              `${slice?.label || `Slice ${i + 1}`} ${slice?.value ?? 0}`,
+          )
+          .join(", ")}`;
+
   const initWidget = () => {
     container = WidgetFactory({
       tag: "div",
@@ -497,6 +515,8 @@ export const CircularChart = (props) => {
     canvas.style.display = "block";
     canvas.style.width = "100%";
     canvas.style.height = "100%";
+    canvas.setAttribute("role", "img");
+    canvas.setAttribute("aria-label", chartSummary());
     canvas.addEventListener("click", handleCanvasClick);
     canvas.addEventListener("mousemove", handleCanvasMousemove);
     canvas.addEventListener("mouseleave", () => {
@@ -527,6 +547,8 @@ export const CircularChart = (props) => {
   const updateData = (newData, animateUpdate = true) => {
     if (!Array.isArray(newData)) return;
     data = newData;
+    // New numbers on the drawing, and new numbers in the sentence that says them.
+    if (canvas) canvas.setAttribute("aria-label", chartSummary());
     animate = animateUpdate;
     startAnimation();
   };

package/src/widgets/CodeViewer.js

@@ -7,6 +7,7 @@ import { colors } from "../utils/themes.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
 import { generateHighlightedHtml, syntaxPaletteFor } from "../utils/syntaxHighlight.js";
 import { clipboard } from "../tools/clipboard.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 
 import { toREM } from "../utils/units.js";
 
@@ -105,10 +106,11 @@ code = "",
     backgroundColor: colors.card,
     color: colors.text,
     border: `1px solid ${colors.border}`,
-    borderRadius: 6,
-    padding: "2px 8px",
+    borderRadius: 8,
+    padding: "8px 12px",
+    minHeight: TAP_MINIMUM,
     fontFamily: "monospace",
-    fontSize: 11,
+    fontSize: 12,
     lineHeight: "1.6",
     flexShrink: 0,
     cursor: "pointer",