fetta 1.4.0 → 1.4.2

package/dist/{chunk-NTRJ6XDH.js → chunk-24TCJGUM.js}

@@ -19,6 +19,33 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/core/splitText.ts
+var ARIA_LABEL_ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "a",
+  "button",
+  "img",
+  "input",
+  "select",
+  "textarea",
+  "table",
+  "figure",
+  "form",
+  "fieldset",
+  "dialog",
+  "details",
+  "section",
+  "article",
+  "nav",
+  "aside",
+  "header",
+  "footer",
+  "main"
+]);
 var BREAK_CHARS = /* @__PURE__ */ new Set([
   "\u2014",
   // em-dash
@@ -171,7 +198,7 @@ function measureKerningCanvas(styleSource, chars, styles) {
     const char2 = chars[i + 1];
     const pairWidth = ctx.measureText(char1 + char2).width;
     const kerning = pairWidth - charWidths.get(char1) - charWidths.get(char2);
-    if (Math.abs(kerning) > 0.01) {
+    if (Math.abs(kerning) > 1e-3) {
       kerningMap.set(i + 1, kerning);
     }
   }
@@ -208,7 +235,7 @@ function measureKerningDOM(container, styleSource, chars, styles) {
     measurer.textContent = char1 + char2;
     const pairWidth = measurer.getBoundingClientRect().width;
     const kerning = pairWidth - charWidths.get(char1) - charWidths.get(char2);
-    if (Math.abs(kerning) > 0.01) {
+    if (Math.abs(kerning) > 1e-3) {
       kerningMap.set(i + 1, kerning);
     }
   }
@@ -669,7 +696,7 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         let totalKerning = 0;
         if (kerningMap.has(1)) totalKerning += kerningMap.get(1);
         if (kerningMap.has(2)) totalKerning += kerningMap.get(2);
-        if (Math.abs(totalKerning) > 0.01 && Math.abs(totalKerning) < 20) {
+        if (Math.abs(totalKerning) > 1e-3 && Math.abs(totalKerning) < 20) {
           const targetElement = (options == null ? void 0 : options.mask) === "chars" && firstCharSpan.parentElement ? firstCharSpan.parentElement : firstCharSpan;
           targetElement.style.marginLeft = `${totalKerning}px`;
         }
@@ -690,7 +717,7 @@ function performSplit(element, measuredWords, charClass, wordClass, lineClass, s
         let totalKerning = 0;
         if (kerningMap.has(1)) totalKerning += kerningMap.get(1);
         if (kerningMap.has(2)) totalKerning += kerningMap.get(2);
-        if (Math.abs(totalKerning) > 0.01 && Math.abs(totalKerning) < 20) {
+        if (Math.abs(totalKerning) > 1e-3 && Math.abs(totalKerning) < 20) {
           const targetElement = (options == null ? void 0 : options.mask) === "words" && currWord.parentElement ? currWord.parentElement : currWord;
           targetElement.style.marginLeft = `${totalKerning}px`;
         }
@@ -908,11 +935,13 @@ function splitText(element, {
   let currentChars = [];
   let currentWords = [];
   let currentLines = [];
+  let originalAriaLabel = null;
   if (splitChars) {
     element.style.fontVariantLigatures = "none";
   }
   const trackAncestors = hasInlineDescendants(element);
   const measuredWords = collectTextStructure(element, trackAncestors);
+  const useAriaLabel = !trackAncestors && ARIA_LABEL_ALLOWED_TAGS.has(element.tagName.toLowerCase());
   const { chars, words, lines } = performSplit(
     element,
     measuredWords,
@@ -922,7 +951,7 @@ function splitText(element, {
     splitChars,
     splitWords,
     splitLines,
-    { propIndex, mask, ariaHidden: !trackAncestors, disableKerning, initialStyles, initialClasses }
+    { propIndex, mask, ariaHidden: useAriaLabel, disableKerning, initialStyles, initialClasses }
   );
   currentChars = chars;
   currentWords = words;
@@ -937,8 +966,21 @@ function splitText(element, {
     }
     element.appendChild(visualWrapper);
     element.appendChild(createScreenReaderCopy(originalHTML));
+  } else if (useAriaLabel) {
+    originalAriaLabel = element.getAttribute("aria-label");
+    if (originalAriaLabel === null) {
+      element.setAttribute("aria-label", text);
+    }
   } else {
-    element.setAttribute("aria-label", text);
+    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));
   }
   const dispose = () => {
     if (!isActive) return;
@@ -955,8 +997,12 @@ function splitText(element, {
   const revert = () => {
     if (!isActive) return;
     element.innerHTML = originalHTML;
-    if (!trackAncestors) {
-      element.removeAttribute("aria-label");
+    if (useAriaLabel) {
+      if (originalAriaLabel !== null) {
+        element.setAttribute("aria-label", originalAriaLabel);
+      } else {
+        element.removeAttribute("aria-label");
+      }
     }
     if (splitChars) {
       element.style.fontVariantLigatures = "none";
@@ -997,12 +1043,12 @@ function splitText(element, {
             splitChars,
             splitWords,
             splitLines,
-            { propIndex, mask, ariaHidden: !trackAncestors, disableKerning, initialStyles, initialClasses }
+            { propIndex, mask, ariaHidden: useAriaLabel, disableKerning, initialStyles, initialClasses }
           );
           currentChars = result.chars;
           currentWords = result.words;
           currentLines = result.lines;
-          if (trackAncestors) {
+          if (trackAncestors || !useAriaLabel) {
             const visualWrapper = document.createElement("span");
             visualWrapper.setAttribute("aria-hidden", "true");
             visualWrapper.dataset.fettaVisual = "true";

package/dist/index.js

@@ -1 +1 @@
-export { splitText } from './chunk-NTRJ6XDH.js';
+export { splitText } from './chunk-24TCJGUM.js';

package/dist/react.js

@@ -1,4 +1,4 @@
-import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-NTRJ6XDH.js';
+import { splitText, __spreadProps, __spreadValues, normalizeToPromise } from './chunk-24TCJGUM.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.4.0",
+  "version": "1.4.2",
   "description": "Text splitting library with kerning compensation for animations",
   "type": "module",
   "sideEffects": false,