@editora/plugins 1.0.2 → 1.0.5

package/dist/a11y-checker.esm.js

@@ -0,0 +1,509 @@
+const B = /* @__PURE__ */ new Set(), v = [], f = (t) => {
+  v.push(t);
+}, x = '[data-theme="dark"], .dark, .editora-theme-dark';
+f({
+  id: "image-alt-text",
+  wcag: "1.1.1",
+  description: "Images must have alt text",
+  severity: "error",
+  selector: "img",
+  evaluate(t, n) {
+    const e = t;
+    return e.hasAttribute("role") && e.getAttribute("role") === "presentation" || e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "image-alt-text" ? null : !e.hasAttribute("alt") || e.getAttribute("alt")?.trim() === "" ? {
+      id: `img-alt-${n.cache.get("imgIdx")}`,
+      rule: "image-alt-text",
+      wcag: "1.1.1",
+      severity: "error",
+      message: "Image missing alt text",
+      nodePath: n.cache.get("imgPath"),
+      element: e,
+      suggestion: "Add descriptive alt text to all images",
+      fixable: !0,
+      fixLabel: "Add empty alt"
+    } : null;
+  },
+  fix(t) {
+    t.element && t.element.setAttribute("alt", "");
+  }
+});
+f({
+  id: "empty-interactive",
+  wcag: "4.1.2",
+  description: "Interactive elements must have accessible names",
+  severity: "error",
+  selector: 'button, a, [role="button"]',
+  evaluate(t, n) {
+    const e = t;
+    if (e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "empty-interactive") return null;
+    const r = e.textContent?.trim(), a = e.hasAttribute("aria-label"), o = e.hasAttribute("aria-labelledby"), s = e.hasAttribute("title");
+    return !r && !a && !o && !s ? {
+      id: `interactive-empty-${n.cache.get("buttonIdx")}`,
+      rule: "empty-interactive",
+      wcag: "4.1.2",
+      severity: "error",
+      message: "Interactive element has no accessible name",
+      nodePath: n.cache.get("buttonPath"),
+      element: e,
+      suggestion: "Add text, aria-label, aria-labelledby, or title",
+      fixable: !0,
+      fixLabel: "Add aria-label"
+    } : null;
+  },
+  fix(t) {
+    t.element && t.element.setAttribute("aria-label", "Button");
+  }
+});
+f({
+  id: "form-label",
+  wcag: "1.3.1",
+  description: "Form controls must have labels",
+  severity: "error",
+  selector: "input, textarea, select",
+  evaluate(t, n) {
+    const e = t;
+    if (e.hasAttribute("type") && e.getAttribute("type") === "hidden" || e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "form-label") return null;
+    const r = n.doc.querySelector(`label[for="${e.getAttribute("id")}"]`), a = e.hasAttribute("aria-label"), o = e.hasAttribute("aria-labelledby");
+    return !r && !a && !o ? {
+      id: `form-label-${n.cache.get("inputIdx")}`,
+      rule: "form-label",
+      wcag: "1.3.1",
+      severity: "error",
+      message: "Form control missing label",
+      nodePath: n.cache.get("inputPath"),
+      element: e,
+      suggestion: "Add <label>, aria-label, or aria-labelledby",
+      fixable: !0,
+      fixLabel: "Add aria-label"
+    } : null;
+  },
+  fix(t) {
+    t.element && t.element.setAttribute("aria-label", "Input");
+  }
+});
+f({
+  id: "table-headers",
+  wcag: "1.3.1",
+  description: "Tables must have header rows",
+  severity: "error",
+  selector: "table",
+  evaluate(t, n) {
+    const e = t;
+    if (e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "table-headers") return null;
+    const r = e.querySelectorAll("th"), a = e.querySelectorAll("tr");
+    return r.length === 0 && a.length > 0 ? {
+      id: `table-no-headers-${n.cache.get("tableIdx")}`,
+      rule: "table-headers",
+      wcag: "1.3.1",
+      severity: "error",
+      message: "Table missing header row (<th> elements)",
+      nodePath: n.cache.get("tablePath"),
+      element: e,
+      suggestion: "Add <th> elements to first row",
+      fixable: !0,
+      fixLabel: "Convert first row to headers"
+    } : null;
+  },
+  fix(t) {
+    if (t.element) {
+      const e = t.element.querySelector("tr");
+      e && Array.from(e.children).forEach((r) => {
+        if (r.tagName === "TD") {
+          const a = document.createElement("th");
+          a.innerHTML = r.innerHTML, e.replaceChild(a, r);
+        }
+      });
+    }
+  }
+});
+f({
+  id: "heading-empty",
+  wcag: "1.3.1",
+  description: "Headings must not be empty",
+  severity: "error",
+  selector: "h1, h2, h3, h4, h5, h6",
+  evaluate(t, n) {
+    const e = t;
+    if (e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "heading-empty") return null;
+    const r = e.textContent?.replace(/\s+/g, "") || "", a = e.childNodes.length === 1 && e.childNodes[0].nodeName === "BR";
+    return !r && !a ? {
+      id: `heading-empty-${n.cache.get("headingIdx")}`,
+      rule: "heading-empty",
+      wcag: "1.3.1",
+      severity: "error",
+      message: `Empty ${e.tagName.toLowerCase()} heading`,
+      nodePath: n.cache.get("headingPath"),
+      element: e,
+      suggestion: "All headings must contain text",
+      fixable: !1
+    } : null;
+  }
+});
+f({
+  id: "heading-order",
+  wcag: "1.3.1",
+  description: "Headings should not skip levels",
+  severity: "warning",
+  selector: "h1, h2, h3, h4, h5, h6",
+  evaluate(t, n) {
+    const e = t, r = parseInt(e.tagName[1]), a = n.cache.get("previousHeadingLevel") || r;
+    return n.cache.set("previousHeadingLevel", r), r - a > 1 ? {
+      id: `heading-order-${n.cache.get("headingIdx")}`,
+      rule: "heading-order",
+      wcag: "1.3.1",
+      severity: "warning",
+      message: `Heading skips level (${a} → ${r})`,
+      nodePath: n.cache.get("headingPath"),
+      element: e,
+      suggestion: `Use heading level ${a + 1} instead`,
+      fixable: !1
+    } : null;
+  }
+});
+f({
+  id: "link-text",
+  wcag: "2.4.4",
+  description: "Links must have descriptive text",
+  severity: "error",
+  selector: "a",
+  evaluate(t, n) {
+    const e = t;
+    if (e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "link-text") return null;
+    const r = e.textContent?.replace(/\s+/g, "").toLowerCase() || "", a = e.childNodes.length === 1 && e.childNodes[0].nodeName === "BR", o = ["clickhere", "readmore", "link", "here", "this", "page"];
+    return !r && !a ? {
+      id: `link-empty-${n.cache.get("aIdx")}`,
+      rule: "link-text",
+      wcag: "2.4.4",
+      severity: "error",
+      message: "Link has no text content",
+      nodePath: n.cache.get("aPath"),
+      element: e,
+      suggestion: "All links must have descriptive text",
+      fixable: !0,
+      fixLabel: "Insert placeholder"
+    } : o.some((s) => r.includes(s)) ? {
+      id: `link-vague-${n.cache.get("aIdx")}`,
+      rule: "link-text",
+      wcag: "2.4.4",
+      severity: "warning",
+      message: `Vague link text: "${e.textContent?.trim()}"`,
+      nodePath: n.cache.get("aPath"),
+      element: e,
+      suggestion: "Use descriptive link text",
+      fixable: !1
+    } : null;
+  },
+  fix(t) {
+    t.element && (t.element.textContent = "Link");
+  }
+});
+f({
+  id: "list-structure",
+  wcag: "1.3.1",
+  description: "Lists must only contain <li> children",
+  severity: "error",
+  selector: "ul, ol",
+  evaluate(t, n) {
+    const e = t;
+    if (e.hasAttribute("data-a11y-ignore") && e.getAttribute("data-a11y-ignore") === "list-structure") return null;
+    const r = e.querySelectorAll(":scope > li");
+    return Array.from(e.children).filter((o) => o.tagName !== "LI").length > 0 ? {
+      id: `list-structure-${n.cache.get("ulIdx")}`,
+      rule: "list-structure",
+      wcag: "1.3.1",
+      severity: "error",
+      message: "List contains non-li elements",
+      nodePath: n.cache.get("ulPath"),
+      element: e,
+      suggestion: "All direct children of ul/ol must be li elements",
+      fixable: !1
+    } : r.length === 0 ? {
+      id: `list-empty-${n.cache.get("ulIdx")}`,
+      rule: "list-structure",
+      wcag: "1.3.1",
+      severity: "warning",
+      message: "Empty list element",
+      nodePath: n.cache.get("ulPath"),
+      element: e,
+      suggestion: "Remove empty lists or add list items",
+      fixable: !1
+    } : null;
+  }
+});
+const A = () => {
+  const t = window.getSelection();
+  if (t && t.rangeCount > 0) {
+    let e = t.getRangeAt(0).startContainer;
+    for (; e && e !== document.body; ) {
+      if (e.nodeType === Node.ELEMENT_NODE) {
+        const r = e;
+        if (r.getAttribute("contenteditable") === "true")
+          return r;
+      }
+      e = e.parentNode;
+    }
+  }
+  const n = document.activeElement;
+  if (n) {
+    if (n.getAttribute("contenteditable") === "true")
+      return n;
+    const e = n.closest('[contenteditable="true"]');
+    if (e) return e;
+  }
+  return document.querySelector('[contenteditable="true"]');
+}, T = () => {
+  if (A()?.closest(x)) return !0;
+  const n = window.getSelection();
+  if (n && n.rangeCount > 0) {
+    const r = n.getRangeAt(0).startContainer;
+    if ((r.nodeType === Node.ELEMENT_NODE ? r : r.parentElement)?.closest(x)) return !0;
+  }
+  return document.activeElement?.closest(x) ? !0 : document.body.matches(x) || document.documentElement.matches(x);
+}, w = () => {
+  const t = A();
+  if (!t) return [];
+  const n = [], e = { doc: t.ownerDocument || document, cache: /* @__PURE__ */ new Map() }, r = e.doc.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, null);
+  let a = r.currentNode, o = {}, s = {}, p = 0;
+  for (; a && p < 5e3; ) {
+    const h = a, i = h.tagName?.toLowerCase?.() || "";
+    if (h.hidden || h.style.display === "none" || h.style.visibility === "hidden") {
+      a = r.nextNode(), p++;
+      continue;
+    }
+    o[i] = (o[i] || 0) + 1, s[i] = `${i}[${o[i] - 1}]`;
+    for (const u of v) {
+      if (B.has(u.id) || u.selector && !a.matches?.(u.selector)) continue;
+      e.cache.set(`${i}Idx`, o[i] - 1), e.cache.set(`${i}Path`, s[i]), /^h[1-6]$/.test(i) && (e.cache.set("headingIdx", o[i] - 1), e.cache.set("headingPath", s[i])), i === "a" && (e.cache.set("aIdx", o[i] - 1), e.cache.set("aPath", s[i])), i === "table" && (e.cache.set("tableIdx", o[i] - 1), e.cache.set("tablePath", s[i])), i === "button" && (e.cache.set("buttonIdx", o[i] - 1), e.cache.set("buttonPath", s[i])), i === "input" && (e.cache.set("inputIdx", o[i] - 1), e.cache.set("inputPath", s[i])), (i === "ul" || i === "ol") && (e.cache.set("ulIdx", o[i] - 1), e.cache.set("ulPath", s[i]));
+      const m = u.evaluate(a, e);
+      m && n.push(m);
+    }
+    a = r.nextNode(), p++;
+  }
+  return n;
+}, b = (t, n = !0) => {
+  t.element && (n ? (t.element.classList.add("a11y-highlighted"), t.element.style.outline = "2px solid #ff9800", t.element.style.backgroundColor = "#fff3cd") : (t.element.classList.remove("a11y-highlighted"), t.element.style.outline = "", t.element.style.backgroundColor = ""));
+}, I = (t) => {
+  t || (t = w());
+  const n = t.filter((a) => a.severity === "error").length, e = t.filter((a) => a.severity === "warning").length;
+  let r = 100 - n * 20 - e * 5;
+  return Math.max(0, r);
+}, H = (t) => {
+  const n = v.find((e) => e.id === t.rule);
+  n && n.fix && n.fix(t);
+}, k = () => {
+  const t = w(), n = I(t), r = T() ? {
+    overlay: "rgba(0, 0, 0, 0.62)",
+    dialogBg: "#1f2937",
+    panelBg: "#222d3a",
+    border: "#3b4657",
+    text: "#e2e8f0",
+    muted: "#9fb0c6",
+    closeHover: "#334155",
+    summaryBg: "#111827",
+    issueBg: "#1f2937",
+    issueHoverBg: "#273244",
+    issueBorder: "#4b5563",
+    issueHoverBorder: "#58a6ff",
+    fixBtn: "#3b82f6",
+    fixBtnHover: "#2563eb"
+  } : {
+    overlay: "rgba(0, 0, 0, 0.5)",
+    dialogBg: "#ffffff",
+    panelBg: "#ffffff",
+    border: "#e0e0e0",
+    text: "#1f2937",
+    muted: "#666666",
+    closeHover: "#f0f0f0",
+    summaryBg: "#f5f5f5",
+    issueBg: "#ffffff",
+    issueHoverBg: "#f5f9ff",
+    issueBorder: "#e0e0e0",
+    issueHoverBorder: "#2196f3",
+    fixBtn: "#2196f3",
+    fixBtnHover: "#1976d2"
+  }, a = document.createElement("div");
+  a.className = "a11y-dialog-overlay", a.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: ${r.overlay};
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+  const o = document.createElement("div");
+  o.className = "a11y-dialog", o.style.cssText = `
+    background: ${r.dialogBg};
+    border: 1px solid ${r.border};
+    color: ${r.text};
+    border-radius: 8px;
+    max-width: 800px;
+    width: 90%;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  `;
+  const s = document.createElement("div");
+  s.style.cssText = `
+    padding: 20px;
+    border-bottom: 1px solid ${r.border};
+    background: ${r.panelBg};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `;
+  const p = document.createElement("h2");
+  p.style.cssText = `margin: 0; font-size: 20px; font-weight: 600; color: ${r.text};`, p.textContent = "Accessibility Checker";
+  const h = document.createElement("div");
+  h.style.cssText = `
+    font-size: 24px;
+    font-weight: bold;
+    padding: 8px 16px;
+    border-radius: 4px;
+    background: ${n >= 80 ? "#4caf50" : n >= 60 ? "#ff9800" : "#f44336"};
+    color: white;
+  `, h.textContent = `${n}/100`;
+  const i = document.createElement("button");
+  i.textContent = "✕", i.style.cssText = `
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: ${r.muted};
+  `, i.onmouseover = () => {
+    i.style.background = r.closeHover, i.style.color = "#f8fafc";
+  }, i.onmouseout = () => {
+    i.style.background = "none", i.style.color = r.muted;
+  }, i.onclick = () => {
+    t.forEach((g) => b(g, !1)), a.remove();
+  };
+  const u = document.createElement("div");
+  u.style.cssText = "display: flex; align-items: center; gap: 16px;", u.appendChild(p), u.appendChild(h), s.appendChild(u), s.appendChild(i);
+  const m = document.createElement("div");
+  if (m.style.cssText = `
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background: ${r.dialogBg};
+  `, t.length === 0)
+    m.innerHTML = `
+      <div style="text-align: center; padding: 40px 20px;">
+        <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
+        <h3 style="margin: 0 0 8px 0; color: #4caf50;">No issues found!</h3>
+        <p style="margin: 0; color: ${r.muted};">Your content meets WCAG 2.1 AA standards.</p>
+      </div>
+    `;
+  else {
+    const g = document.createElement("div");
+    g.style.cssText = `
+      background: ${r.summaryBg};
+      border: 1px solid ${r.border};
+      padding: 12px 16px;
+      border-radius: 6px;
+      margin-bottom: 20px;
+      display: flex;
+      gap: 20px;
+    `;
+    const y = t.filter((l) => l.severity === "error").length, $ = t.filter((l) => l.severity === "warning").length, E = t.filter((l) => l.severity === "info").length;
+    g.innerHTML = `
+      <div><strong style="color: #f44336;">${y}</strong> <span style="color: ${r.muted};">Errors</span></div>
+      <div><strong style="color: #ff9800;">${$}</strong> <span style="color: ${r.muted};">Warnings</span></div>
+      <div><strong style="color: #2196f3;">${E}</strong> <span style="color: ${r.muted};">Info</span></div>
+    `, m.appendChild(g), t.forEach((l) => {
+      const c = document.createElement("div");
+      c.style.cssText = `
+        border: 1px solid ${r.issueBorder};
+        border-radius: 6px;
+        padding: 16px;
+        margin-bottom: 12px;
+        transition: all 0.2s;
+        background: ${r.issueBg};
+        color: ${r.text};
+      `, c.onmouseover = () => {
+        c.style.borderColor = r.issueHoverBorder, c.style.background = r.issueHoverBg, b(l, !0);
+      }, c.onmouseout = () => {
+        c.style.borderColor = r.issueBorder, c.style.background = r.issueBg, b(l, !1);
+      };
+      const L = l.severity === "error" ? "#f44336" : l.severity === "warning" ? "#ff9800" : "#2196f3";
+      if (c.innerHTML = `
+        <div style="display: flex; align-items: start; gap: 12px; margin-bottom: 8px;">
+          <span style="
+            background: ${L};
+            color: white;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+          ">${l.severity}</span>
+          <div style="flex: 1;">
+            <div style="font-weight: 600; margin-bottom: 4px;">${l.message}</div>
+            <div style="font-size: 12px; color: ${r.muted};">WCAG ${l.wcag} · ${l.rule}</div>
+          </div>
+        </div>
+        <div style="font-size: 14px; color: ${r.text}; margin-bottom: 8px; padding-left: 68px;">
+          ${l.suggestion || ""}
+        </div>
+      `, l.fixable) {
+        const d = document.createElement("button");
+        d.textContent = `🔧 ${l.fixLabel || "Auto-fix"}`, d.style.cssText = `
+          background: ${r.fixBtn};
+          color: white;
+          border: none;
+          padding: 6px 12px;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 13px;
+          margin-left: 68px;
+        `, d.onmouseover = () => d.style.background = r.fixBtnHover, d.onmouseout = () => d.style.background = r.fixBtn, d.onclick = () => {
+          H(l), d.textContent = "✓ Fixed", d.style.background = "#4caf50", d.disabled = !0, d.style.cursor = "not-allowed", b(l, !1), setTimeout(() => {
+            a.remove(), k();
+          }, 1e3);
+        }, c.appendChild(d);
+      }
+      m.appendChild(c);
+    });
+  }
+  o.appendChild(s), o.appendChild(m), a.appendChild(o), document.body.appendChild(a), a.onclick = (g) => {
+    g.target === a && (t.forEach((y) => b(y, !1)), a.remove());
+  };
+  const C = (g) => {
+    g.key === "Escape" && (t.forEach((y) => b(y, !1)), a.remove(), document.removeEventListener("keydown", C));
+  };
+  document.addEventListener("keydown", C);
+}, P = () => ({
+  name: "a11yChecker",
+  toolbar: [
+    {
+      label: "Accessibility",
+      command: "toggleA11yChecker",
+      icon: '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9 6.82954C10.1652 6.4177 11 5.30646 11 4.00024C11 2.34339 9.65686 1.00024 8 1.00024C6.34315 1.00024 5 2.34339 5 4.00024C5 5.30646 5.83481 6.4177 7 6.82954V12.0002C7 13.6571 8.34315 15.0002 10 15.0002H14.9296C15.264 15.0002 15.5762 15.1673 15.7617 15.4455L18.4913 19.54C19.1914 20.5901 20.6772 20.7373 21.5696 19.8448L22.7071 18.7074C23.0976 18.3168 23.0976 17.6837 22.7071 17.2931C22.3166 16.9026 21.6834 16.9026 21.2929 17.2931L20.1554 18.4306L17.4258 14.3361C16.8694 13.5015 15.9327 13.0002 14.9296 13.0002H10C9.44772 13.0002 9 12.5525 9 12.0002V11.0002H15C15.5523 11.0002 16 10.5525 16 10.0002C16 9.44796 15.5523 9.00025 15 9.00025H9V6.82954ZM8 5.10758C7.38844 5.10758 6.89267 4.61181 6.89267 4.00024C6.89267 3.38868 7.38844 2.89291 8 2.89291C8.61157 2.89291 9.10734 3.38868 9.10734 4.00024C9.10734 4.61181 8.61157 5.10758 8 5.10758Z" fill="#0F0F0F"></path> <path d="M4.6328 9.07414C5.10517 8.78987 5.69738 9.0279 5.91645 9.53381C6.13552 10.0397 5.89604 10.6205 5.43795 10.9272C4.92993 11.2673 4.48018 11.6911 4.10882 12.1826C3.53598 12.9408 3.16922 13.8345 3.04425 14.7765C2.91928 15.7185 3.04036 16.6768 3.3957 17.5582C3.75103 18.4395 4.32852 19.2138 5.07194 19.8058C5.81535 20.3977 6.69937 20.787 7.63791 20.9359C8.57646 21.0847 9.53756 20.988 10.4276 20.6552C11.3177 20.3223 12.1065 19.7647 12.7171 19.0366C13.1129 18.5645 13.4251 18.0313 13.6428 17.46C13.8391 16.9448 14.3514 16.5813 14.8936 16.6815C15.4357 16.7816 15.8004 17.3054 15.6291 17.8295C15.3326 18.7372 14.8644 19.583 14.2468 20.3194C13.4147 21.3117 12.3399 22.0716 11.1269 22.5252C9.91394 22.9787 8.6042 23.1105 7.32518 22.9077C6.04617 22.7048 4.84148 22.1742 3.82838 21.3676C2.81528 20.561 2.02831 19.5058 1.54407 18.3047C1.05983 17.1037 0.894836 15.7977 1.06514 14.5139C1.23545 13.2302 1.73525 12.0124 2.51589 10.9791C3.09523 10.2123 3.81459 9.56654 4.6328 9.07414Z" fill="#0F0F0F"></path> </g></svg>',
+      shortcut: "Mod-Shift-Alt-a"
+    }
+  ],
+  commands: {
+    toggleA11yChecker: () => {
+      try {
+        return k(), !0;
+      } catch (t) {
+        return console.error("Failed to open accessibility checker:", t), !1;
+      }
+    }
+  },
+  keymap: {
+    "Mod-Shift-Alt-a": "toggleA11yChecker"
+  }
+});
+export {
+  P as A11yCheckerPlugin
+};