@particle-academy/fancy-code 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -14,6 +14,44 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.17.0] - 2026-11-13
+
+### Changed
+
+- **Releases need a lab-run certificate.** `publish.yml` gains a read-only
+  `lab-certificate` job that every publishing job needs: a tag is published only
+  when the fancy-labs lab has certified that exact version and commit. Consumers
+  do nothing; this changes how releases are cut, not what the package does.
+
+### Fixed
+
+- **The editing textarea of `CodeEditor`, `FileViewer` and `MarkdownEditor`
+  shows a focus ring.** It was `outline-none` with nothing in its place, so a
+  keyboard user could not see where focus was. It now carries the kit ring
+  (`focus-visible:ring-2 ring-inset`, `--fancy-focus` / `--fancy-focus-dark`) on
+  the textarea itself. Consumers do nothing.
+- **`FileViewer` (and any `readOnly` editor) no longer traps keyboard focus.**
+  Its key handler called `preventDefault` on every key except copy and
+  select-all, Tab included, so focus could never leave and the caret could not
+  move. Read-only now intercepts nothing; the textarea's `readOnly` attribute
+  already refuses edits.
+- **Editable `CodeEditor` and `MarkdownEditor` no longer trap keyboard focus
+  (WCAG 2.1.2).** Tab always inserted indentation, so tabbing in meant never
+  tabbing out. Tab / Shift+Tab now indent and dedent only once you have edited
+  in the current focus session (typed, pasted, pressed Enter); until then Tab
+  moves focus on. Escape disarms, so the next Tab leaves; blur disarms too.
+  **Behaviour change:** a Tab pressed straight after focusing the editor, with
+  no edit yet, now moves focus instead of indenting. Nothing to do unless you
+  relied on that; type first, and Tab indents as before.
+- **`CodeEditor`, `FileViewer` and `MarkdownEditor` can be named, and are named
+  by default** (axe `label`, critical, lab run 601, K28). The `<textarea>` a
+  person types into had no accessible name and none of the three accepted one.
+  Each now takes `aria-label`, `aria-labelledby` and `aria-describedby`, and
+  puts them on that textarea, not on a wrapper. Defaults: "Code editor",
+  the `filename` (else "File contents") for `FileViewer`, and "Markdown
+  editor". A `aria-labelledby` wins and suppresses the default label. Nothing
+  to do on upgrade; pass a name that says what the field is for, where you can.
+
 ## [0.16.0] - 2026-11-02
 
 ### Added
@@ -197,7 +235,6 @@ renders exactly as before.
 
 These are the kit 0.5 platform floors, applied across every package at once so a consumer never has to resolve a mix. **No API changed, nothing was removed, nothing was renamed** — only what the package requires.
 
-
 ## [0.9.1] — 2026-07-28
 
 ### Fixed

package/dist/index.cjs

@@ -42,7 +42,8 @@ function CodeEditorPanel({ className }) {
     _diffAnnotations: diffAnnotations,
     _maxHeight,
     _minHeight,
-    _highlightLines: highlightLines
+    _highlightLines: highlightLines,
+    _aria: aria
   } = useCodeEditor();
   const lineNumberElements = react.useMemo(() => {
     if (!engine || !lineNumbers) return null;
@@ -132,6 +133,7 @@ function CodeEditorPanel({ className }) {
     themeColors,
     handleKeyDown,
     handleInput,
+    handleBlur,
     handleScroll,
     handleSelect,
     scrollTop,
@@ -204,8 +206,12 @@ function CodeEditorPanel({ className }) {
             "textarea",
             {
               ref: textareaRef,
+              "aria-label": aria?.["aria-label"],
+              "aria-labelledby": aria?.["aria-labelledby"],
+              "aria-describedby": aria?.["aria-describedby"],
               className: reactFancy.cn(
-                "relative m-0 block resize-none border-none bg-transparent p-2.5 text-[13px] leading-[1.5] text-transparent outline-none",
+                "relative m-0 block resize-none border-none bg-transparent p-2.5 text-[13px] leading-[1.5] text-transparent",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))] dark:focus-visible:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]",
                 wordWrap ? "w-full" : "min-w-full"
               ),
               style: {
@@ -222,6 +228,7 @@ function CodeEditorPanel({ className }) {
               readOnly,
               onKeyDown: handleKeyDown,
               onInput: handleInput,
+              onBlur: handleBlur,
               onScroll: handleScroll,
               onSelect: handleSelect,
               onClick: handleSelect
@@ -483,6 +490,7 @@ function useEditorEngine({
   const [scrollTop, setScrollTop] = react.useState(0);
   const [scrollLeft, setScrollLeft] = react.useState(0);
   const [activeLine, setActiveLine] = react.useState(1);
+  const tabArmedRef = react.useRef(false);
   const themeColors = react.useMemo(() => {
     const def = getTheme(theme);
     return def?.colors ?? DEFAULT_COLORS;
@@ -543,6 +551,7 @@ function useEditorEngine({
   const handleInput = react.useCallback(() => {
     const ta = textareaRef.current;
     if (!ta) return;
+    tabArmedRef.current = true;
     onChangeRef.current?.(ta.value);
     autoResize();
     updateCursorInfo();
@@ -578,14 +587,19 @@ function useEditorEngine({
     },
     [updateCursorInfo]
   );
+  const handleBlur = react.useCallback(() => {
+    tabArmedRef.current = false;
+  }, []);
   const handleKeyDown = react.useCallback(
     (e) => {
       if (readOnly) {
-        if (e.key === "c" && (e.metaKey || e.ctrlKey)) return;
-        if (e.key === "a" && (e.metaKey || e.ctrlKey)) return;
-        e.preventDefault();
         return;
       }
+      if (e.key === "Escape") {
+        tabArmedRef.current = false;
+        return;
+      }
+      if (e.key === "Tab" && !tabArmedRef.current) return;
       if (e.key === "Tab") {
         e.preventDefault();
         const ta = e.currentTarget;
@@ -634,6 +648,7 @@ function useEditorEngine({
       }
       if (e.key === "Enter") {
         e.preventDefault();
+        tabArmedRef.current = true;
         const ta = e.currentTarget;
         const start = ta.selectionStart;
         const end = ta.selectionEnd;
@@ -662,6 +677,7 @@ function useEditorEngine({
     themeColors,
     handleKeyDown,
     handleInput,
+    handleBlur,
     handleScroll,
     handleSelect,
     revealLine,
@@ -702,8 +718,19 @@ function CodeEditorRoot({
   cursorLine,
   cursorColumn,
   diffBase,
-  highlightLines
+  highlightLines,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
 }) {
+  const aria = react.useMemo(
+    () => ({
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? "Code editor",
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
+    }),
+    [ariaLabel, ariaLabelledBy, ariaDescribedBy]
+  );
   const [currentValue, setCurrentValue] = reactFancy.useControllableState(valueProp, defaultValue, onChange);
   const diffAnnotations = react.useMemo(
     () => diffBase == null ? null : fancyFileCommons.annotateLines(diffBase, currentValue),
@@ -796,9 +823,10 @@ function CodeEditorRoot({
       _engineReturn: engineReturn,
       _minHeight: minHeight,
       _maxHeight: maxHeight,
-      _highlightLines: highlightLines
+      _highlightLines: highlightLines,
+      _aria: aria
     }),
-    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, diffAnnotations, minHeight, maxHeight, highlightLines]
+    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, diffAnnotations, minHeight, maxHeight, highlightLines, aria]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -834,7 +862,10 @@ function MarkdownEditor({
   minHeight,
   maxHeight,
   className,
-  renderPreview
+  renderPreview,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
 }) {
   const [content, setContent] = reactFancy.useControllableState(value, defaultValue, onValueChange);
   const showEditor = mode !== "preview";
@@ -859,6 +890,9 @@ function MarkdownEditor({
             placeholder,
             minHeight,
             maxHeight,
+            "aria-label": ariaLabel ?? "Markdown editor",
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
             children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor.Panel, {})
           }
         ) }),
@@ -960,7 +994,10 @@ function FileViewer({
   frameProps,
   document,
   className,
-  style
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
 }) {
   const resolved = fileKind ?? resolveFileKind({ filename, mime });
   if (resolved.kind === "document" && view === "rendered" && readOnly && line == null) {
@@ -1054,6 +1091,9 @@ function FileViewer({
           cursorLine: line,
           cursorColumn: column,
           highlightLines: highlightLines ?? (line != null ? [line] : void 0),
+          "aria-label": ariaLabel ?? filename ?? "File contents",
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
           children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor.Panel, {})
         }
       )