fetta 1.0.2 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-# fetta
+# Fetta
 
 A text-splitting library with kerning compensation for smooth, natural text animations.
 
@@ -14,7 +14,7 @@ Split text into characters, words, and lines while preserving the original typog
 - **Auto-Revert** — Restore original HTML after animations
 - **Masking** — Wrap elements in clip containers for reveal animations
 - **Emoji Support** — Properly handles compound emojis and complex Unicode characters
-- **Accessible** — Adds `aria-label` with original text for screen readers
+- **Accessible** — Automatic screen reader support, even when splitting text with nested links or emphasis
 - **TypeScript** — Full type definitions included
 - **React Component** — Declarative wrapper for React projects
 - **Built-in InView** — Viewport detection for scroll-triggered animations in React
@@ -255,7 +255,7 @@ Each element also receives a `data-index` attribute with its position.
 
 - **Fonts must be loaded** before splitting. The React component waits for `document.fonts.ready` automatically.
 - **Ligatures are disabled** (`font-variant-ligatures: none`) because ligatures cannot span multiple elements.
-- **Accessibility**: Split elements receive an `aria-label` with the original text for screen readers.
+- **Accessibility**: Automatic screen reader support for both simple text and text with nested elements like links.
 
 ## Browser Support
 

package/dist/{chunk-G5P33GJE.js → chunk-6EZFFMJ3.js}

@@ -64,6 +64,32 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "var"
 ]);
 var isSafari = typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+var srOnlyStylesInjected = false;
+function injectSrOnlyStyles() {
+  if (srOnlyStylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.textContent = `
+.fetta-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}`;
+  document.head.appendChild(style);
+  srOnlyStylesInjected = true;
+}
+function createScreenReaderCopy(originalHTML) {
+  const srCopy = document.createElement("span");
+  srCopy.className = "fetta-sr-only";
+  srCopy.innerHTML = originalHTML;
+  srCopy.dataset.fettaSrCopy = "true";
+  return srCopy;
+}
 function hasInlineDescendants(element) {
   const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
   let node;
@@ -236,6 +262,9 @@ function createSpan(className, index, display = "inline-block", options) {
   if (options == null ? void 0 : options.willChange) {
     span.style.willChange = "transform, opacity";
   }
+  if (options == null ? void 0 : options.ariaHidden) {
+    span.setAttribute("aria-hidden", "true");
+  }
   return span;
 }
 function createMaskWrapper(display = "inline-block") {
@@ -283,7 +312,8 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
       const wordSpan = createSpan(wordClass, wordIndex, "inline-block", {
         propIndex: options == null ? void 0 : options.propIndex,
         willChange: options == null ? void 0 : options.willChange,
-        propName: "word"
+        propName: "word",
+        ariaHidden: options == null ? void 0 : options.ariaHidden
       });
       if (measuredWord.noSpaceBefore) {
         noSpaceBeforeSet.add(wordSpan);
@@ -295,7 +325,8 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
             const charSpan = createSpan(charClass, globalCharIndex, "inline-block", {
               propIndex: options == null ? void 0 : options.propIndex,
               willChange: options == null ? void 0 : options.willChange,
-              propName: "char"
+              propName: "char",
+              ariaHidden: options == null ? void 0 : options.ariaHidden
             });
             charSpan.textContent = measuredChar.char;
             globalCharIndex++;
@@ -456,7 +487,8 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         const lineSpan = createSpan(lineClass, lineIndex, "block", {
           propIndex: options == null ? void 0 : options.propIndex,
           willChange: options == null ? void 0 : options.willChange,
-          propName: "line"
+          propName: "line",
+          ariaHidden: options == null ? void 0 : options.ariaHidden
         });
         allLines.push(lineSpan);
         let wi = 0;
@@ -631,7 +663,6 @@ function splitText(element, {
   let currentChars = [];
   let currentWords = [];
   let currentLines = [];
-  element.setAttribute("aria-label", text);
   if (splitChars) {
     element.style.fontVariantLigatures = "none";
   }
@@ -650,11 +681,24 @@ function splitText(element, {
     splitChars,
     splitWords,
     splitLines,
-    { propIndex, willChange, mask }
+    { propIndex, willChange, mask, ariaHidden: !trackAncestors }
   );
   currentChars = chars;
   currentWords = words;
   currentLines = lines;
+  if (trackAncestors) {
+    injectSrOnlyStyles();
+    const visualWrapper = document.createElement("span");
+    visualWrapper.setAttribute("aria-hidden", "true");
+    visualWrapper.dataset.fettaVisual = "true";
+    while (element.firstChild) {
+      visualWrapper.appendChild(element.firstChild);
+    }
+    element.appendChild(visualWrapper);
+    element.appendChild(createScreenReaderCopy(originalHTML));
+  } else {
+    element.setAttribute("aria-label", text);
+  }
   const dispose = () => {
     if (!isActive) return;
     if (resizeObserver) {
@@ -670,7 +714,9 @@ function splitText(element, {
   const revert = () => {
     if (!isActive) return;
     element.innerHTML = originalHTML;
-    element.removeAttribute("aria-label");
+    if (!trackAncestors) {
+      element.removeAttribute("aria-label");
+    }
     if (splitChars) {
       element.style.fontVariantLigatures = "none";
     }
@@ -713,11 +759,21 @@ function splitText(element, {
             splitChars,
             splitWords,
             splitLines,
-            { propIndex, willChange, mask }
+            { propIndex, willChange, mask, ariaHidden: !trackAncestors }
           );
           currentChars = result.chars;
           currentWords = result.words;
           currentLines = result.lines;
+          if (trackAncestors) {
+            const visualWrapper = document.createElement("span");
+            visualWrapper.setAttribute("aria-hidden", "true");
+            visualWrapper.dataset.fettaVisual = "true";
+            while (element.firstChild) {
+              visualWrapper.appendChild(element.firstChild);
+            }
+            element.appendChild(visualWrapper);
+            element.appendChild(createScreenReaderCopy(originalHTML));
+          }
           const newFingerprint = getLineFingerprint(result.lines);
           if (onResize && newFingerprint !== previousFingerprint) {
             onResize({

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-G5P33GJE.js';
+export { splitText } from './chunk-6EZFFMJ3.js';

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-G5P33GJE.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-6EZFFMJ3.js';
 import { forwardRef, useRef, useCallback, useState, useLayoutEffect, useEffect, isValidElement, cloneElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fetta",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,
@@ -34,8 +34,23 @@
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
-    "test:all": "vitest run --coverage && playwright test"
+    "test:all": "vitest run --coverage && playwright test",
+    "size": "size-limit",
+    "size:why": "size-limit --why"
   },
+  "size-limit": [
+    {
+      "name": "Core",
+      "path": "dist/index.js",
+      "import": "*"
+    },
+    {
+      "name": "React",
+      "path": "dist/react.js",
+      "import": "*",
+      "ignore": ["react"]
+    }
+  ],
   "peerDependencies": {
     "react": ">=18.0.0"
   },
@@ -46,6 +61,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.49.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -56,6 +72,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.0.0",
     "serve": "^14.2.4",
+    "size-limit": "^12.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5",
     "vitest": "^2.1.8"