@sanity/ui-workshop/dist/plugin-a11y.js

An environment for designing, reviewing, and quality-testing React components.

import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { Stack, Box, Card, Text, Code } from "@sanity/ui";
import { createContext, useContext, memo, useState, useEffect } from "react";
import { useWorkshop } from "@sanity/ui-workshop";
import axe from "axe-core";
const A11yContext = createContext(null);
function useA11y() {
  const props = useContext(A11yContext);
  if (!props)
    throw new Error("A11y: missing context value");
  return props;
}
const A11yInspector = memo(function() {
  const $ = c(4), {
    results
  } = useA11y();
  let t0;
  $[0] !== results ? (t0 = results && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
    results.violations.map(_temp$1),
    results.passes.map(_temp2)
  ] }) }), $[0] = results, $[1] = t0) : t0 = $[1];
  let t1;
  return $[2] !== t0 ? (t1 = /* @__PURE__ */ jsx(Box, { padding: 2, children: t0 }), $[2] = t0, $[3] = t1) : t1 = $[3], t1;
}), ResultItem = memo(function(props) {
  const $ = c(22), {
    result,
    tone
  } = props;
  let t0;
  $[0] !== result.impact ? (t0 = result.impact && /* @__PURE__ */ jsxs(Fragment, { children: [
    " (",
    result.impact,
    ")"
  ] }), $[0] = result.impact, $[1] = t0) : t0 = $[1];
  let t1;
  $[2] !== result.help || $[3] !== t0 ? (t1 = /* @__PURE__ */ jsxs(Text, { size: 1, weight: "semibold", children: [
    result.help,
    t0
  ] }), $[2] = result.help, $[3] = t0, $[4] = t1) : t1 = $[4];
  let t2;
  $[5] !== result.description ? (t2 = /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: result.description }), $[5] = result.description, $[6] = t2) : t2 = $[6];
  let t3;
  $[7] !== result.helpUrl ? (t3 = /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx("a", { href: result.helpUrl, target: "_blank", rel: "noreferrer", children: "Help URL \u2192" }) }), $[7] = result.helpUrl, $[8] = t3) : t3 = $[8];
  let t4;
  $[9] !== t1 || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Stack, { paddingX: 2, paddingY: 3, space: 3, children: [
    t1,
    t2,
    t3
  ] }), $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4) : t4 = $[12];
  let t5;
  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx(Card, { borderTop: !0, tone: "inherit" }), $[13] = t5) : t5 = $[13];
  let t6;
  $[14] !== result.nodes ? (t6 = result.nodes.map(_temp3), $[14] = result.nodes, $[15] = t6) : t6 = $[15];
  let t7;
  $[16] !== t6 ? (t7 = /* @__PURE__ */ jsx(Stack, { padding: 2, space: 2, children: t6 }), $[16] = t6, $[17] = t7) : t7 = $[17];
  let t8;
  return $[18] !== t4 || $[19] !== t7 || $[20] !== tone ? (t8 = /* @__PURE__ */ jsxs(Card, { border: !0, radius: 2, tone, children: [
    t4,
    t5,
    t7
  ] }), $[18] = t4, $[19] = t7, $[20] = tone, $[21] = t8) : t8 = $[21], t8;
});
function _temp$1(violation) {
  return /* @__PURE__ */ jsx(ResultItem, { result: violation, tone: "critical" }, violation.id);
}
function _temp2(violation_0) {
  return /* @__PURE__ */ jsx(ResultItem, { result: violation_0, tone: "positive" }, violation_0.id);
}
function _temp3(node, nodeIndex) {
  return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
    node.failureSummary && /* @__PURE__ */ jsx(Text, { size: 1, children: node.failureSummary }),
    /* @__PURE__ */ jsx(Card, { border: !0, overflow: "auto", padding: 2, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Code, { language: "html", size: 0, children: node.html }) })
  ] }, nodeIndex);
}
const A11yProvider = memo(function(props) {
  const $ = c(15), {
    children
  } = props, {
    broadcast,
    channel,
    origin,
    path
  } = useWorkshop();
  let t0;
  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
    error: null,
    results: null
  }, $[0] = t0) : t0 = $[0];
  const [t1, setState] = useState(t0), {
    error,
    results
  } = t1;
  let t2, t3;
  $[1] !== error || $[2] !== results ? (t3 = {
    error,
    results
  }, $[1] = error, $[2] = results, $[3] = t3) : t3 = $[3], t2 = t3;
  const a11y = t2;
  let t4, t5;
  $[4] !== broadcast || $[5] !== origin || $[6] !== path ? (t4 = () => {
    origin !== "main" && axe.run().then((_results) => {
      broadcast({
        type: "workshop/a11y/setResults",
        path,
        results: _results
      });
    }).catch((_error) => {
      broadcast({
        type: "workshop/a11y/setError",
        message: _error.message
      });
    });
  }, t5 = [broadcast, origin, path], $[4] = broadcast, $[5] = origin, $[6] = path, $[7] = t4, $[8] = t5) : (t4 = $[7], t5 = $[8]), useEffect(t4, t5);
  let t6, t7;
  $[9] !== channel ? (t6 = () => {
    channel.subscribe((msg) => {
      msg.type === "workshop/setPath" && setState(_temp), msg.type === "workshop/a11y/setResults" && setState((s_0) => ({
        ...s_0,
        error: null,
        results: msg.results
      })), msg.type === "workshop/a11y/setError" && setState((s_1) => ({
        ...s_1,
        error: {
          message: msg.message
        },
        results: null
      }));
    });
  }, t7 = [channel], $[9] = channel, $[10] = t6, $[11] = t7) : (t6 = $[10], t7 = $[11]), useEffect(t6, t7);
  let t8;
  return $[12] !== a11y || $[13] !== children ? (t8 = /* @__PURE__ */ jsx(A11yContext.Provider, { value: a11y, children }), $[12] = a11y, $[13] = children, $[14] = t8) : t8 = $[14], t8;
});
function _temp(s) {
  return {
    ...s,
    error: null,
    results: null
  };
}
function a11yPlugin() {
  return {
    name: "a11y",
    title: "A11y",
    inspector: A11yInspector,
    provider: A11yProvider
  };
}
export {
  a11yPlugin
};
//# sourceMappingURL=plugin-a11y.js.map