fetta 1.0.2 → 1.1.0

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-7L4UQPGS.js}

@@ -64,6 +64,30 @@ 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:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}`;
+  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;
@@ -631,7 +655,6 @@ function splitText(element, {
   let currentChars = [];
   let currentWords = [];
   let currentLines = [];
-  element.setAttribute("aria-label", text);
   if (splitChars) {
     element.style.fontVariantLigatures = "none";
   }
@@ -655,6 +678,19 @@ function splitText(element, {
   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 +706,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";
     }
@@ -718,6 +756,16 @@ function splitText(element, {
           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-7L4UQPGS.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-7L4UQPGS.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.0",
   "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"