@storybook/addon-a11y 7.0.0-alpha.2 → 7.0.0-alpha.23

package/README.md

@@ -4,7 +4,7 @@ This Storybook addon can be helpful to make your UI components more accessible.
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/a11y/docs/screenshot.png)
+![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png)
 
 ## Getting started
 

package/dist/chunk-M5RWOKLV.mjs

@@ -0,0 +1 @@
+var R=Object.create;var E=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var a=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var N=(o,t)=>()=>(o&&(t=o(o=0)),t);var L=(o,t)=>()=>(t||o((t={exports:{}}).exports,t),t.exports);var u=(o,t,s,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of $(t))!p.call(o,r)&&r!==s&&E(o,r,{get:()=>t[r],enumerable:!(e=A(t,r))||e.enumerable});return o};var S=(o,t,s)=>(s=o!=null?R(a(o)):{},u(t||!o||!o.__esModule?E(s,"default",{value:o,enumerable:!0}):s,o));var c=N(()=>{});var n,P,b,x,D,U,l,y,g,I=N(()=>{"use strict";c();n="storybook/a11y",P=`${n}/panel`,b="a11y",x=`${n}/result`,D=`${n}/request`,U=`${n}/running`,l=`${n}/error`,y=`${n}/manual`,g={RESULT:x,REQUEST:D,RUNNING:U,ERROR:l,MANUAL:y}});export{L as a,S as b,c,n as d,P as e,b as f,g,I as h};

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { DecoratorFunction, AnyFramework } from '@storybook/csf';
+import { ElementContext, Spec, RunOptions } from 'axe-core';
+
+declare const PARAM_KEY = "a11y";
+
+interface Setup {
+    element?: ElementContext;
+    config: Spec;
+    options: RunOptions;
+}
+interface A11yParameters {
+    element?: ElementContext;
+    config?: Spec;
+    options?: RunOptions;
+    manual?: boolean;
+}
+
+declare const withA11y: DecoratorFunction<AnyFramework>;
+
+export { A11yParameters, PARAM_KEY, Setup, withA11y };

package/dist/index.js

@@ -0,0 +1,9 @@
+"use strict";var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var h=(o,t)=>{for(var e in t)a(o,e,{get:t[e],enumerable:!0})},c=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of y(t))!l.call(o,n)&&n!==e&&a(o,n,{get:()=>t[n],enumerable:!(s=u(t,n))||s.enumerable});return o};var E=(o,t,e)=>(e=o!=null?p(A(o)):{},c(t||!o||!o.__esModule?a(e,"default",{value:o,enumerable:!0}):e,o)),R=o=>c(a({},"__esModule",{value:!0}),o);var x={};h(x,{PARAM_KEY:()=>d,withA11y:()=>f});module.exports=R(x);var m=E(require("util-deprecate")),i=require("ts-dedent");var r="storybook/a11y",b=`${r}/panel`,d="a11y",k=`${r}/result`,D=`${r}/request`,$=`${r}/running`,w=`${r}/error`,I=`${r}/manual`;module&&module.hot&&module.hot.decline&&module.hot.decline();var f=(0,m.default)((o,t)=>o(t),i.dedent`
+    withA11y(options) is deprecated, please configure addon-a11y using the addParameter api:
+
+    addParameters({
+      a11y: options,
+    });
+
+    More at: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-witha11y-decorator
+  `);0&&(module.exports={PARAM_KEY,withA11y});

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import{c as e,f as r,h as n}from"./chunk-M5RWOKLV.mjs";e();n();import m from"util-deprecate";import{dedent as a}from"ts-dedent";e();module&&module.hot&&module.hot.decline&&module.hot.decline();var d=m((o,t)=>o(t),a`
+    withA11y(options) is deprecated, please configure addon-a11y using the addParameter api:
+
+    addParameters({
+      a11y: options,
+    });
+
+    More at: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-witha11y-decorator
+  `);export{r as PARAM_KEY,d as withA11y};

package/dist/manager.d.ts

@@ -0,0 +1 @@
+

package/dist/manager.js

@@ -0,0 +1 @@
+"use strict";var Re=Object.create;var te=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var Ae=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Ne=Object.prototype.hasOwnProperty;var Pe=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Ae(t))!Ne.call(e,n)&&n!==o&&te(e,n,{get:()=>t[n],enumerable:!(r=ve(t,n))||r.enumerable});return e};var d=(e,t,o)=>(o=e!=null?Re(Be(e)):{},Pe(t||!e||!e.__esModule?te(o,"default",{value:e,enumerable:!0}):o,e));var j=d(require("react")),B=require("@storybook/addons");var f="storybook/a11y",X=`${f}/panel`,oe="a11y",He=`${f}/result`,Le=`${f}/request`,Fe=`${f}/running`,Me=`${f}/error`,De=`${f}/manual`,E={RESULT:He,REQUEST:Le,RUNNING:Fe,ERROR:Me,MANUAL:De};var c=d(require("react")),b=require("@storybook/theming"),C=require("@storybook/components");var s=d(require("react")),re=e=>s.createElement("svg",{...e},s.createElement("defs",null,s.createElement("filter",{id:"protanopia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"protanomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"deuteranopia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"deuteranomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"tritanopia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"})),s.createElement("filter",{id:"tritanomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"achromatopsia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"achromatomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"}))));var we="storybook-preview-iframe",Oe=[{name:"blurred vision",percentage:22.9},{name:"deuteranomaly",percentage:2.7},{name:"deuteranopia",percentage:.56},{name:"protanomaly",percentage:.66},{name:"protanopia",percentage:.59},{name:"tritanomaly",percentage:.01},{name:"tritanopia",percentage:.016},{name:"achromatomaly",percentage:1e-5},{name:"achromatopsia",percentage:1e-4},{name:"grayscale"}],ie=e=>e?e==="blurred vision"?"blur(2px)":e==="grayscale"?"grayscale(100%)":`url('#${e}')`:"none",$e=b.styled.div(()=>({"&, & svg":{position:"absolute",width:0,height:0}})),We=b.styled.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter:e})=>({filter:ie(e)}),({theme:e})=>({boxShadow:`${e.appBorderColor} 0 0 0 1px inset`})),Ge=b.styled.span({display:"flex",flexDirection:"column"}),Ve=b.styled.span({textTransform:"capitalize"}),Ue=b.styled.span(({theme:e})=>({fontSize:11,color:e.textMutedColor})),ze=(e,t)=>[...e!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{t(null)},right:void 0,active:!1}]:[],...Oe.map(o=>{let r=o.percentage!==void 0?`${o.percentage}% of users`:void 0;return{id:o.name,title:c.default.createElement(Ge,null,c.default.createElement(Ve,null,o.name),r&&c.default.createElement(Ue,null,r)),onClick:()=>{t(o)},right:c.default.createElement(We,{filter:o.name}),active:e===o}})],ne=()=>{let[e,t]=(0,c.useState)(null);return c.default.createElement(c.default.Fragment,null,e&&c.default.createElement(b.Global,{styles:{[`#${we}`]:{filter:ie(e.name)}}}),c.default.createElement(C.WithTooltip,{placement:"top",trigger:"click",tooltip:({onHide:o})=>{let r=ze(e,n=>{t(n),o()});return c.default.createElement(C.TooltipLinkList,{links:r})},closeOnClick:!0,onDoubleClick:()=>t(null)},c.default.createElement(C.IconButton,{key:"filter",active:!!e,title:"Vision simulator"},c.default.createElement(C.Icons,{icon:"accessibility"}))),c.default.createElement($e,null,c.default.createElement(re,null)))};var i=d(require("react")),A=require("@storybook/theming"),v=require("@storybook/components"),D=require("@storybook/api");var M=d(require("react")),Ce=require("@storybook/components");var m=d(require("react")),W=require("@storybook/theming"),xe=require("@storybook/components");var V=d(require("react")),U=require("@storybook/theming"),_e=U.styled.div({padding:12,marginBottom:10}),Ke=U.styled.p({margin:"0 0 12px"}),Ye=U.styled.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),se=({item:e})=>V.default.createElement(_e,null,V.default.createElement(Ke,null,e.description),V.default.createElement(Ye,{href:e.helpUrl,target:"_blank"},"More info..."));var k=d(require("react")),_=require("@storybook/theming");var S=d(require("react")),$=require("@storybook/theming"),le=require("@storybook/components"),ae=require("react-sizeme"),je=$.styled.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Je=$.styled.div(({elementWidth:e})=>({flexDirection:e>407?"row":"inherit",marginBottom:e>407?6:12,display:e>407?"flex":"block"})),qe=(0,$.styled)(le.Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Qe=$.styled.div({paddingLeft:6,paddingRight:23});var Xe=e=>e.charAt(0).toUpperCase().concat(e.slice(1)),Ze=({rule:e})=>{let t=null;switch(e.impact){case"critical":t="critical";break;case"serious":t="negative";break;case"moderate":t="warning";break;case"minor":t="neutral";break;default:break}return S.default.createElement(ae.SizeMe,{refreshMode:"debounce"},({size:o})=>S.default.createElement(Je,{elementWidth:o.width||0},S.default.createElement(qe,{status:t},Xe(e.impact)),S.default.createElement(Qe,null,e.message)))},pe=({rules:e})=>S.default.createElement(je,null,e.map((t,o)=>S.default.createElement(Ze,{rule:t,key:o})));var L=d(require("react")),fe=require("@storybook/theming");var p=d(require("react")),T=require("@storybook/theming"),P=require("@storybook/api"),z=require("@storybook/core-events"),me=require("@storybook/addon-highlight");var et=[(0,T.convert)(T.themes.light).color.negative,(0,T.convert)(T.themes.light).color.positive,(0,T.convert)(T.themes.light).color.warning],ge=p.createContext({results:{passes:[],incomplete:[],violations:[]},setResults:()=>{},highlighted:[],toggleHighlight:()=>{},clearHighlights:()=>{},tab:0,setTab:()=>{}}),ce={passes:[],incomplete:[],violations:[]},de=({active:e,...t})=>{let[o,r]=(0,P.useAddonState)(f,ce),[n,l]=p.useState(0),[a,y]=p.useState([]),I=(0,P.useStorybookApi)().getCurrentStoryData(),J=p.useCallback((g,O)=>{y(N=>O?[...N,...g]:N.filter(Se=>!g.includes(Se)))},[]),G=g=>{w(E.REQUEST,g)},x=p.useCallback(()=>y([]),[]),q=p.useCallback(g=>{x(),l(g)},[]),Q=p.useCallback(()=>{l(0),r(ce)},[]),w=(0,P.useChannel)({[z.STORY_RENDERED]:G,[z.STORY_CHANGED]:Q});return p.useEffect(()=>{w(me.HIGHLIGHT,{elements:a,color:et[n]})},[a,n]),p.useEffect(()=>{e&&(I==null?void 0:I.type)==="story"?G(I.id):x()},[e,x,w,I]),e?p.createElement(ge.Provider,{value:{results:o,setResults:r,highlighted:a,toggleHighlight:J,clearHighlights:x,tab:n,setTab:q},...t}):null},H=()=>p.useContext(ge);var tt=fe.styled.input(({disabled:e})=>({cursor:e?"not-allowed":"pointer"}));function ue(e,t){let o=e.filter(r=>t.includes(r.target[0])).length;return o===0?1:o===e.length?0:2}var ot=({toggleId:e,elementsToHighlight:t=[]})=>{let{toggleHighlight:o,highlighted:r}=H(),n=L.default.useRef(null),[l,a]=L.default.useState(ue(t,r));L.default.useEffect(()=>{let u=ue(t,r);n.current&&(n.current.indeterminate=u===2),a(u)},[t,r]);let y=L.default.useCallback(()=>{o(t.map(u=>u.target[0]),l!==0)},[t,l,o]);return L.default.createElement(tt,{ref:n,id:e,type:"checkbox","aria-label":"Highlight result",disabled:!t.length,onChange:y,checked:l===0})},F=ot;var rt=_.styled.li({fontWeight:600}),it=_.styled.span(({theme:e})=>({borderBottom:`1px solid ${e.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),nt=_.styled.span({fontWeight:"normal",alignSelf:"center",paddingRight:15,input:{margin:0,display:"block"}}),st=({element:e,type:t})=>{let{any:o,all:r,none:n}=e,l=[...o,...r,...n],a=`${t}-${e.target[0]}`;return k.default.createElement(rt,null,k.default.createElement(it,null,e.target[0],k.default.createElement(nt,null,k.default.createElement(F,{toggleId:a,elementsToHighlight:[e]}))),k.default.createElement(pe,{rules:l}))},he=({elements:e,type:t})=>k.default.createElement("ol",null,e.map((o,r)=>k.default.createElement(st,{element:o,key:r,type:t})));var Z=d(require("react")),ee=require("@storybook/theming"),lt=ee.styled.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),at=ee.styled.div(({theme:e})=>({margin:"0 6px",padding:5,border:`1px solid ${e.appBorderColor}`,borderRadius:e.appBorderRadius})),ye=({tags:e})=>Z.default.createElement(lt,null,e.map(t=>Z.default.createElement(at,{key:t},t)));var pt=W.styled.div(({theme:e})=>({display:"flex",width:"100%",borderBottom:`1px solid ${e.appBorderColor}`,"&:hover":{background:e.background.hoverable}})),ct=(0,W.styled)(xe.Icons)(({theme:e})=>({height:10,width:10,minWidth:10,color:e.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),mt=W.styled.div(({theme:e})=>({padding:e.layoutMargin,paddingLeft:e.layoutMargin-3,lineHeight:"20px",background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%","&:focus":{outline:"0 none",borderLeft:`3px solid ${e.color.secondary}`}})),gt=W.styled.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),be=e=>{let[t,o]=(0,m.useState)(!1),{item:r,type:n}=e,l=`${n}-${r.id}`;return m.default.createElement(m.Fragment,null,m.default.createElement(pt,null,m.default.createElement(mt,{onClick:()=>o(!t),role:"button"},m.default.createElement(ct,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${t?0:-90}deg)`}}),r.help),m.default.createElement(gt,null,m.default.createElement(F,{toggleId:l,elementsToHighlight:r.nodes}))),t?m.default.createElement(m.Fragment,null,m.default.createElement(se,{item:r,key:"info"}),m.default.createElement(he,{elements:r.nodes,type:n,key:"elements"}),m.default.createElement(ye,{tags:r.tags,key:"tags"})):null)};var K=({items:e,empty:t,type:o})=>M.default.createElement(M.Fragment,null,e&&e.length?e.map(r=>M.default.createElement(be,{item:r,key:`${o}:${r.id}`,type:o})):M.default.createElement(Ce.Placeholder,{key:"placeholder"},t));var h=d(require("react")),R=require("@storybook/theming"),Te=require("react-sizeme");var dt=R.styled.div({width:"100%",position:"relative",minHeight:"100%"}),ut=R.styled.label(({theme:e})=>({cursor:"pointer",userSelect:"none",color:e.color.dark})),ft=R.styled.div(({elementWidth:e,theme:t})=>({cursor:"pointer",fontSize:13,lineHeight:"20px",padding:e>450?"10px 15px 10px 0":"10px 0px 10px 15px",height:"40px",border:"none",marginTop:e>450?-40:0,float:e>450?"right":"left",display:"flex",alignItems:"center",width:e>450?"auto":"100%",borderBottom:e>450?"none":`1px solid ${t.appBorderColor}`,input:{marginLeft:10,marginRight:0,marginTop:-1,marginBottom:0}})),ht=R.styled.button(({theme:e})=>({textDecoration:"none",padding:"10px 15px",cursor:"pointer",fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,lineHeight:1,height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent","&:focus":{outline:"0 none",borderBottom:`3px solid ${e.color.secondary}`}}),({active:e,theme:t})=>e?{opacity:1,borderBottom:`3px solid ${t.color.secondary}`}:{}),yt=R.styled.div({}),xt=R.styled.div(({theme:e})=>({boxShadow:`${e.appBorderColor} 0 -1px 0 0 inset`,background:"rgba(0, 0, 0, .05)",display:"flex",justifyContent:"space-between",whiteSpace:"nowrap"}));function bt(e){return e.reduce((t,o)=>t.concat(o.nodes),[])}var ke=({tabs:e})=>{let{tab:t,setTab:o}=H(),r=h.useCallback(a=>{o(parseInt(a.currentTarget.getAttribute("data-index")||"",10))},[o]),n=`${e[t].type}-global-checkbox`,l="Highlight results";return h.createElement(Te.SizeMe,{refreshMode:"debounce"},({size:a})=>h.createElement(dt,null,h.createElement(xt,null,h.createElement(yt,null,e.map((y,u)=>h.createElement(ht,{key:u,"data-index":u,active:t===u,onClick:r},y.label)))),e[t].items.length>0?h.createElement(ft,{elementWidth:a.width||0},h.createElement(ut,{htmlFor:n},l),h.createElement(F,{toggleId:n,elementsToHighlight:bt(e[t].items)})):null,e[t].panel))};var Ie=(0,A.styled)(v.Icons)({height:12,width:12,marginRight:4}),Ct=(0,A.styled)(Ie)(({theme:e})=>({animation:`${e.animation.rotate360} 1s linear infinite;`})),Tt=A.styled.span(({theme:e})=>({color:e.color.positive})),kt=A.styled.span(({theme:e})=>({color:e.color.negative})),It=A.styled.span(({theme:e})=>({color:e.color.warning})),Y=A.styled.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),Ee=()=>{let{manual:e}=(0,D.useParameter)("a11y",{manual:!1}),[t,o]=(0,i.useState)(e?"manual":"initial"),[r,n]=i.default.useState(void 0),{setResults:l,results:a}=H(),{storyId:y}=(0,D.useStorybookState)();i.default.useEffect(()=>{o(e?"manual":"initial")},[e]);let u=g=>{o("ran"),l(g),setTimeout(()=>{t==="ran"&&o("ready")},900)},I=(0,i.useCallback)(()=>{o("running")},[]),J=(0,i.useCallback)(g=>{o("error"),n(g)},[]),G=(0,D.useChannel)({[E.RUNNING]:I,[E.RESULT]:u,[E.ERROR]:J}),x=(0,i.useCallback)(()=>{o("running"),G(E.MANUAL,y)},[y]),q=(0,i.useMemo)(()=>[{title:"Run test",onClick:x}],[x]),Q=(0,i.useMemo)(()=>[{title:t==="ready"?"Rerun tests":i.default.createElement(i.default.Fragment,null,i.default.createElement(Ie,{inline:!0,icon:"check"})," Tests completed"),onClick:x}],[t,x]),w=(0,i.useMemo)(()=>{let{passes:g,incomplete:O,violations:N}=a;return[{label:i.default.createElement(kt,null,N.length," Violations"),panel:i.default.createElement(K,{items:N,type:0,empty:"No accessibility violations found."}),items:N,type:0},{label:i.default.createElement(Tt,null,g.length," Passes"),panel:i.default.createElement(K,{items:g,type:1,empty:"No accessibility checks passed."}),items:g,type:1},{label:i.default.createElement(It,null,O.length," Incomplete"),panel:i.default.createElement(K,{items:O,type:2,empty:"No accessibility checks incomplete."}),items:O,type:2}]},[a]);return i.default.createElement(i.default.Fragment,null,t==="initial"&&i.default.createElement(Y,null,"Initializing..."),t==="manual"&&i.default.createElement(i.default.Fragment,null,i.default.createElement(Y,null,"Manually run the accessibility scan."),i.default.createElement(v.ActionBar,{key:"actionbar",actionItems:q})),t==="running"&&i.default.createElement(Y,null,i.default.createElement(Ct,{inline:!0,icon:"sync"})," Please wait while the accessibility scan is running ..."),(t==="ready"||t==="ran")&&i.default.createElement(i.default.Fragment,null,i.default.createElement(v.ScrollArea,{vertical:!0,horizontal:!0},i.default.createElement(ke,{key:"tabs",tabs:w})),i.default.createElement(v.ActionBar,{key:"actionbar",actionItems:Q})),t==="error"&&i.default.createElement(Y,null,"The accessibility scan encountered an error.",i.default.createElement("br",null),typeof r=="string"?r:JSON.stringify(r)))};B.addons.register(f,e=>{B.addons.add(X,{title:"",type:B.types.TOOL,match:({viewMode:t})=>t==="story",render:()=>j.default.createElement(ne,null)}),B.addons.add(X,{title(){var l,a;let t=e==null?void 0:e.getAddonState(f),o=((l=t==null?void 0:t.violations)==null?void 0:l.length)||0,r=((a=t==null?void 0:t.incomplete)==null?void 0:a.length)||0,n=o+r;return n!==0?`Accessibility (${n})`:"Accessibility"},type:B.types.PANEL,render:({active:t=!0,key:o})=>j.default.createElement(de,{key:o,active:t},j.default.createElement(Ee,null)),paramKey:oe})});

package/dist/manager.mjs

@@ -0,0 +1 @@
+import{c as n,d as P,e as G,f as Z,g as b,h as V}from"./chunk-M5RWOKLV.mjs";n();V();import q from"react";import{addons as Q,types as be}from"@storybook/addons";n();import d,{useState as Te}from"react";import{Global as ke,styled as N}from"@storybook/theming";import{Icons as Ie,IconButton as Se,WithTooltip as Ee,TooltipLinkList as ve}from"@storybook/components";n();import*as s from"react";var ee=e=>s.createElement("svg",{...e},s.createElement("defs",null,s.createElement("filter",{id:"protanopia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"protanomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"deuteranopia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"deuteranomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"tritanopia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"})),s.createElement("filter",{id:"tritanomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"achromatopsia"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"})),s.createElement("filter",{id:"achromatomaly"},s.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"}))));var Re="storybook-preview-iframe",Ae=[{name:"blurred vision",percentage:22.9},{name:"deuteranomaly",percentage:2.7},{name:"deuteranopia",percentage:.56},{name:"protanomaly",percentage:.66},{name:"protanopia",percentage:.59},{name:"tritanomaly",percentage:.01},{name:"tritanopia",percentage:.016},{name:"achromatomaly",percentage:1e-5},{name:"achromatopsia",percentage:1e-4},{name:"grayscale"}],te=e=>e?e==="blurred vision"?"blur(2px)":e==="grayscale"?"grayscale(100%)":`url('#${e}')`:"none",Be=N.div(()=>({"&, & svg":{position:"absolute",width:0,height:0}})),Pe=N.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter:e})=>({filter:te(e)}),({theme:e})=>({boxShadow:`${e.appBorderColor} 0 0 0 1px inset`})),Ne=N.span({display:"flex",flexDirection:"column"}),He=N.span({textTransform:"capitalize"}),Fe=N.span(({theme:e})=>({fontSize:11,color:e.textMutedColor})),Le=(e,t)=>[...e!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{t(null)},right:void 0,active:!1}]:[],...Ae.map(o=>{let r=o.percentage!==void 0?`${o.percentage}% of users`:void 0;return{id:o.name,title:d.createElement(Ne,null,d.createElement(He,null,o.name),r&&d.createElement(Fe,null,r)),onClick:()=>{t(o)},right:d.createElement(Pe,{filter:o.name}),active:e===o}})],oe=()=>{let[e,t]=Te(null);return d.createElement(d.Fragment,null,e&&d.createElement(ke,{styles:{[`#${Re}`]:{filter:te(e.name)}}}),d.createElement(Ee,{placement:"top",trigger:"click",tooltip:({onHide:o})=>{let r=Le(e,l=>{t(l),o()});return d.createElement(ve,{links:r})},closeOnClick:!0,onDoubleClick:()=>t(null)},d.createElement(Se,{key:"filter",active:!!e,title:"Vision simulator"},d.createElement(Ie,{icon:"accessibility"}))),d.createElement(Be,null,d.createElement(ee,null)))};n();import i,{useCallback as J,useMemo as X,useState as St}from"react";import{styled as v}from"@storybook/theming";import{ActionBar as he,Icons as Et,ScrollArea as vt}from"@storybook/components";import{useChannel as Rt,useParameter as At,useStorybookState as Bt}from"@storybook/api";n();import j,{Fragment as ut}from"react";import{Placeholder as ft}from"@storybook/components";n();import h,{Fragment as ge,useState as at}from"react";import{styled as M}from"@storybook/theming";import{Icons as pt}from"@storybook/components";n();import z from"react";import{styled as U}from"@storybook/theming";var Me=U.div({padding:12,marginBottom:10}),we=U.p({margin:"0 0 12px"}),De=U.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),re=({item:e})=>z.createElement(Me,null,z.createElement(we,null,e.description),z.createElement(De,{href:e.helpUrl,target:"_blank"},"More info..."));n();import C from"react";import{styled as Y}from"@storybook/theming";n();import k from"react";import{styled as L}from"@storybook/theming";import{Badge as Oe}from"@storybook/components";import{SizeMe as We}from"react-sizeme";var $e=L.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Ge=L.div(({elementWidth:e})=>({flexDirection:e>407?"row":"inherit",marginBottom:e>407?6:12,display:e>407?"flex":"block"})),Ve=L(Oe)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),ze=L.div({paddingLeft:6,paddingRight:23});var Ue=e=>e.charAt(0).toUpperCase().concat(e.slice(1)),Ke=({rule:e})=>{let t=null;switch(e.impact){case"critical":t="critical";break;case"serious":t="negative";break;case"moderate":t="warning";break;case"minor":t="neutral";break;default:break}return k.createElement(We,{refreshMode:"debounce"},({size:o})=>k.createElement(Ge,{elementWidth:o.width||0},k.createElement(Ve,{status:t},Ue(e.impact)),k.createElement(ze,null,e.message)))},ie=({rules:e})=>k.createElement($e,null,e.map((t,o)=>k.createElement(Ke,{rule:t,key:o})));n();import H from"react";import{styled as Ze}from"@storybook/theming";n();V();import*as a from"react";import{themes as K,convert as _}from"@storybook/theming";import{useChannel as _e,useAddonState as Ye,useStorybookApi as je}from"@storybook/api";import{STORY_CHANGED as Je,STORY_RENDERED as Xe}from"@storybook/core-events";import{HIGHLIGHT as qe}from"@storybook/addon-highlight";var Qe=[_(K.light).color.negative,_(K.light).color.positive,_(K.light).color.warning],le=a.createContext({results:{passes:[],incomplete:[],violations:[]},setResults:()=>{},highlighted:[],toggleHighlight:()=>{},clearHighlights:()=>{},tab:0,setTab:()=>{}}),ne={passes:[],incomplete:[],violations:[]},se=({active:e,...t})=>{let[o,r]=Ye(P,ne),[l,p]=a.useState(0),[m,y]=a.useState([]),R=je().getCurrentStoryData(),O=a.useCallback((c,B)=>{y(T=>B?[...T,...c]:T.filter(Ce=>!c.includes(Ce)))},[]),F=c=>{A(b.REQUEST,c)},x=a.useCallback(()=>y([]),[]),W=a.useCallback(c=>{x(),p(c)},[]),$=a.useCallback(()=>{p(0),r(ne)},[]),A=_e({[Xe]:F,[Je]:$});return a.useEffect(()=>{A(qe,{elements:m,color:Qe[l]})},[m,l]),a.useEffect(()=>{e&&R?.type==="story"?F(R.id):x()},[e,x,A,R]),e?a.createElement(le.Provider,{value:{results:o,setResults:r,highlighted:m,toggleHighlight:O,clearHighlights:x,tab:l,setTab:W},...t}):null},I=()=>a.useContext(le);var et=Ze.input(({disabled:e})=>({cursor:e?"not-allowed":"pointer"}));function ae(e,t){let o=e.filter(r=>t.includes(r.target[0])).length;return o===0?1:o===e.length?0:2}var tt=({toggleId:e,elementsToHighlight:t=[]})=>{let{toggleHighlight:o,highlighted:r}=I(),l=H.useRef(null),[p,m]=H.useState(ae(t,r));H.useEffect(()=>{let u=ae(t,r);l.current&&(l.current.indeterminate=u===2),m(u)},[t,r]);let y=H.useCallback(()=>{o(t.map(u=>u.target[0]),p!==0)},[t,p,o]);return H.createElement(et,{ref:l,id:e,type:"checkbox","aria-label":"Highlight result",disabled:!t.length,onChange:y,checked:p===0})},S=tt;var ot=Y.li({fontWeight:600}),rt=Y.span(({theme:e})=>({borderBottom:`1px solid ${e.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),it=Y.span({fontWeight:"normal",alignSelf:"center",paddingRight:15,input:{margin:0,display:"block"}}),nt=({element:e,type:t})=>{let{any:o,all:r,none:l}=e,p=[...o,...r,...l],m=`${t}-${e.target[0]}`;return C.createElement(ot,null,C.createElement(rt,null,e.target[0],C.createElement(it,null,C.createElement(S,{toggleId:m,elementsToHighlight:[e]}))),C.createElement(ie,{rules:p}))},pe=({elements:e,type:t})=>C.createElement("ol",null,e.map((o,r)=>C.createElement(nt,{element:o,key:r,type:t})));n();import me from"react";import{styled as ce}from"@storybook/theming";var lt=ce.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),st=ce.div(({theme:e})=>({margin:"0 6px",padding:5,border:`1px solid ${e.appBorderColor}`,borderRadius:e.appBorderRadius})),de=({tags:e})=>me.createElement(lt,null,e.map(t=>me.createElement(st,{key:t},t)));var mt=M.div(({theme:e})=>({display:"flex",width:"100%",borderBottom:`1px solid ${e.appBorderColor}`,"&:hover":{background:e.background.hoverable}})),ct=M(pt)(({theme:e})=>({height:10,width:10,minWidth:10,color:e.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),dt=M.div(({theme:e})=>({padding:e.layoutMargin,paddingLeft:e.layoutMargin-3,lineHeight:"20px",background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%","&:focus":{outline:"0 none",borderLeft:`3px solid ${e.color.secondary}`}})),gt=M.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),ue=e=>{let[t,o]=at(!1),{item:r,type:l}=e,p=`${l}-${r.id}`;return h.createElement(ge,null,h.createElement(mt,null,h.createElement(dt,{onClick:()=>o(!t),role:"button"},h.createElement(ct,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${t?0:-90}deg)`}}),r.help),h.createElement(gt,null,h.createElement(S,{toggleId:p,elementsToHighlight:r.nodes}))),t?h.createElement(ge,null,h.createElement(re,{item:r,key:"info"}),h.createElement(pe,{elements:r.nodes,type:l,key:"elements"}),h.createElement(de,{tags:r.tags,key:"tags"})):null)};var w=({items:e,empty:t,type:o})=>j.createElement(ut,null,e&&e.length?e.map(r=>j.createElement(ue,{item:r,key:`${o}:${r.id}`,type:o})):j.createElement(ft,{key:"placeholder"},t));n();import*as f from"react";import{styled as E}from"@storybook/theming";import{SizeMe as ht}from"react-sizeme";var yt=E.div({width:"100%",position:"relative",minHeight:"100%"}),xt=E.label(({theme:e})=>({cursor:"pointer",userSelect:"none",color:e.color.dark})),bt=E.div(({elementWidth:e,theme:t})=>({cursor:"pointer",fontSize:13,lineHeight:"20px",padding:e>450?"10px 15px 10px 0":"10px 0px 10px 15px",height:"40px",border:"none",marginTop:e>450?-40:0,float:e>450?"right":"left",display:"flex",alignItems:"center",width:e>450?"auto":"100%",borderBottom:e>450?"none":`1px solid ${t.appBorderColor}`,input:{marginLeft:10,marginRight:0,marginTop:-1,marginBottom:0}})),Ct=E.button(({theme:e})=>({textDecoration:"none",padding:"10px 15px",cursor:"pointer",fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,lineHeight:1,height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent","&:focus":{outline:"0 none",borderBottom:`3px solid ${e.color.secondary}`}}),({active:e,theme:t})=>e?{opacity:1,borderBottom:`3px solid ${t.color.secondary}`}:{}),Tt=E.div({}),kt=E.div(({theme:e})=>({boxShadow:`${e.appBorderColor} 0 -1px 0 0 inset`,background:"rgba(0, 0, 0, .05)",display:"flex",justifyContent:"space-between",whiteSpace:"nowrap"}));function It(e){return e.reduce((t,o)=>t.concat(o.nodes),[])}var fe=({tabs:e})=>{let{tab:t,setTab:o}=I(),r=f.useCallback(m=>{o(parseInt(m.currentTarget.getAttribute("data-index")||"",10))},[o]),l=`${e[t].type}-global-checkbox`,p="Highlight results";return f.createElement(ht,{refreshMode:"debounce"},({size:m})=>f.createElement(yt,null,f.createElement(kt,null,f.createElement(Tt,null,e.map((y,u)=>f.createElement(Ct,{key:u,"data-index":u,active:t===u,onClick:r},y.label)))),e[t].items.length>0?f.createElement(bt,{elementWidth:m.width||0},f.createElement(xt,{htmlFor:l},p),f.createElement(S,{toggleId:l,elementsToHighlight:It(e[t].items)})):null,e[t].panel))};V();var ye=v(Et)({height:12,width:12,marginRight:4}),Pt=v(ye)(({theme:e})=>({animation:`${e.animation.rotate360} 1s linear infinite;`})),Nt=v.span(({theme:e})=>({color:e.color.positive})),Ht=v.span(({theme:e})=>({color:e.color.negative})),Ft=v.span(({theme:e})=>({color:e.color.warning})),D=v.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),xe=()=>{let{manual:e}=At("a11y",{manual:!1}),[t,o]=St(e?"manual":"initial"),[r,l]=i.useState(void 0),{setResults:p,results:m}=I(),{storyId:y}=Bt();i.useEffect(()=>{o(e?"manual":"initial")},[e]);let u=c=>{o("ran"),p(c),setTimeout(()=>{t==="ran"&&o("ready")},900)},R=J(()=>{o("running")},[]),O=J(c=>{o("error"),l(c)},[]),F=Rt({[b.RUNNING]:R,[b.RESULT]:u,[b.ERROR]:O}),x=J(()=>{o("running"),F(b.MANUAL,y)},[y]),W=X(()=>[{title:"Run test",onClick:x}],[x]),$=X(()=>[{title:t==="ready"?"Rerun tests":i.createElement(i.Fragment,null,i.createElement(ye,{inline:!0,icon:"check"})," Tests completed"),onClick:x}],[t,x]),A=X(()=>{let{passes:c,incomplete:B,violations:T}=m;return[{label:i.createElement(Ht,null,T.length," Violations"),panel:i.createElement(w,{items:T,type:0,empty:"No accessibility violations found."}),items:T,type:0},{label:i.createElement(Nt,null,c.length," Passes"),panel:i.createElement(w,{items:c,type:1,empty:"No accessibility checks passed."}),items:c,type:1},{label:i.createElement(Ft,null,B.length," Incomplete"),panel:i.createElement(w,{items:B,type:2,empty:"No accessibility checks incomplete."}),items:B,type:2}]},[m]);return i.createElement(i.Fragment,null,t==="initial"&&i.createElement(D,null,"Initializing..."),t==="manual"&&i.createElement(i.Fragment,null,i.createElement(D,null,"Manually run the accessibility scan."),i.createElement(he,{key:"actionbar",actionItems:W})),t==="running"&&i.createElement(D,null,i.createElement(Pt,{inline:!0,icon:"sync"})," Please wait while the accessibility scan is running ..."),(t==="ready"||t==="ran")&&i.createElement(i.Fragment,null,i.createElement(vt,{vertical:!0,horizontal:!0},i.createElement(fe,{key:"tabs",tabs:A})),i.createElement(he,{key:"actionbar",actionItems:$})),t==="error"&&i.createElement(D,null,"The accessibility scan encountered an error.",i.createElement("br",null),typeof r=="string"?r:JSON.stringify(r)))};Q.register(P,e=>{Q.add(G,{title:"",type:be.TOOL,match:({viewMode:t})=>t==="story",render:()=>q.createElement(oe,null)}),Q.add(G,{title(){let t=e?.getAddonState(P),o=t?.violations?.length||0,r=t?.incomplete?.length||0,l=o+r;return l!==0?`Accessibility (${l})`:"Accessibility"},type:be.PANEL,render:({active:t=!0,key:o})=>q.createElement(se,{key:o,active:t},q.createElement(xe,null)),paramKey:Z})});

package/dist/preview.d.ts

@@ -0,0 +1 @@
+

package/dist/preview.js

@@ -0,0 +1 @@
+"use strict";var w=Object.create;var R=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var U=(t,o)=>()=>(t&&(o=t(t=0)),o);var P=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports);var $=(t,o,e,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of _(o))!O.call(t,n)&&n!==e&&R(t,n,{get:()=>o[n],enumerable:!(c=T(o,n))||c.enumerable});return t};var m=(t,o,e)=>(e=t!=null?w(h(t)):{},$(o||!t||!t.__esModule?R(e,"default",{value:t,enumerable:!0}):e,t));var r,I,x,L,D,b,q,a,E=U(()=>{"use strict";r="storybook/a11y",I=`${r}/panel`,x=`${r}/result`,L=`${r}/request`,D=`${r}/running`,b=`${r}/error`,q=`${r}/manual`,a={RESULT:x,REQUEST:L,RUNNING:D,ERROR:b,MANUAL:q}});var N=P((V,s)=>{"use strict";var p=m(require("global")),S=require("@storybook/addons");E();var{document:M,window:Y}=p.default;s&&s.hot&&s.hot.decline&&s.hot.decline();var i=S.addons.getChannel(),l=!1,f,v=async t=>{let{manual:o}=await g(t);o||await u(t)},u=async t=>{f=t;try{let o=await g(t);if(!l){l=!0,i.emit(a.RUNNING);let e=(await import("axe-core")).default,{element:c="#root",config:n,options:y={}}=o,d=M.querySelector(c);e.reset(),n&&e.configure(n);let A=await e.run(d,y);f===t?i.emit(a.RESULT,A):(l=!1,u(f))}}catch(o){i.emit(a.ERROR,o)}finally{l=!1}},g=async t=>{let{parameters:o}=await Y.__STORYBOOK_STORY_STORE__.loadStory({storyId:t})||{};return o.a11y||{config:{},options:{restoreScroll:!0}}};i.on(a.REQUEST,v);i.on(a.MANUAL,u)});var k=m(N());

package/dist/preview.mjs

@@ -0,0 +1 @@
+import{a as S,b as w,c as r,g as n,h}from"./chunk-M5RWOKLV.mjs";import E from"global";import{addons as O}from"@storybook/addons";var u=S((b,o)=>{"use strict";r();h();var{document:T,window:_}=E;o&&o.hot&&o.hot.decline&&o.hot.decline();var a=O.getChannel(),i=!1,c,N=async t=>{let{manual:e}=await f(t);e||await l(t)},l=async t=>{c=t;try{let e=await f(t);if(!i){i=!0,a.emit(n.RUNNING);let s=(await import("axe-core")).default,{element:g="#root",config:m,options:d={}}=e,p=T.querySelector(g);s.reset(),m&&s.configure(m);let R=await s.run(p,d);c===t?a.emit(n.RESULT,R):(i=!1,l(c))}}catch(e){a.emit(n.ERROR,e)}finally{i=!1}},f=async t=>{let{parameters:e}=await _.__STORYBOOK_STORY_STORE__.loadStory({storyId:t})||{};return e.a11y||{config:{},options:{restoreScroll:!0}}};a.on(n.REQUEST,N);a.on(n.MANUAL,l)});r();var q=w(u());

package/manager.js

@@ -1 +1 @@
-import './dist/esm/manager';
+import './dist/manager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-alpha.23",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -25,9 +25,32 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./register.js": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -35,28 +58,30 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "tsc --noEmit",
+    "prepare": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.2",
-    "@storybook/api": "7.0.0-alpha.2",
-    "@storybook/channels": "7.0.0-alpha.2",
-    "@storybook/client-logger": "7.0.0-alpha.2",
-    "@storybook/components": "7.0.0-alpha.2",
-    "@storybook/core-events": "7.0.0-alpha.2",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "7.0.0-alpha.2",
+    "@storybook/addon-highlight": "7.0.0-alpha.23",
+    "@storybook/addons": "7.0.0-alpha.23",
+    "@storybook/api": "7.0.0-alpha.23",
+    "@storybook/channels": "7.0.0-alpha.23",
+    "@storybook/client-logger": "7.0.0-alpha.23",
+    "@storybook/components": "7.0.0-alpha.23",
+    "@storybook/core-events": "7.0.0-alpha.23",
+    "@storybook/csf": "0.0.2--canary.0899bb7.0",
+    "@storybook/theming": "7.0.0-alpha.23",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
     "react-sizeme": "^3.0.1",
-    "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.2"
+    "@testing-library/react": "^11.2.2",
+    "typescript": "~4.6.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -73,7 +98,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44920e2b6bd51981bac5124743c29fb9f5517e44",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preview.tsx"
+    ]
+  },
+  "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

package/preview.js

@@ -1 +1 @@
-export * from './dist/esm/preview';
+import './dist/preview';

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/cjs/a11yHighlight.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _global = _interopRequireDefault(require("global"));
-
-var _addons = require("@storybook/addons");
-
-var _coreEvents = require("@storybook/core-events");
-
-var _constants = require("./constants");
-
-var _highlight = require("./highlight");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  document
-} = _global.default;
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
-
-const channel = _addons.addons.getChannel();
-
-const highlight = infos => {
-  const id = _constants.HIGHLIGHT_STYLE_ID;
-  resetHighlight(); // Make sure there are no duplicated selectors
-
-  const elements = Array.from(new Set(infos.elements));
-  const sheet = document.createElement('style');
-  sheet.setAttribute('id', id);
-  sheet.innerHTML = elements.map(target => `${target}{
-          ${(0, _highlight.highlightStyle)(infos.color)}
-         }`).join(' ');
-  document.head.appendChild(sheet);
-};
-
-const resetHighlight = () => {
-  const id = _constants.HIGHLIGHT_STYLE_ID;
-  const sheetToBeRemoved = document.getElementById(id);
-
-  if (sheetToBeRemoved) {
-    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
-  }
-};
-
-channel.on(_coreEvents.STORY_CHANGED, resetHighlight);
-channel.on(_constants.EVENTS.HIGHLIGHT, highlight);

package/dist/cjs/a11yRunner.js

@@ -1,103 +0,0 @@
-"use strict";
-
-var _global = _interopRequireDefault(require("global"));
-
-var _addons = require("@storybook/addons");
-
-var _constants = require("./constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const {
-  document,
-  window: globalWindow
-} = _global.default;
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
-
-const channel = _addons.addons.getChannel(); // Holds axe core running state
-
-
-let active = false; // Holds latest story we requested a run
-
-let activeStoryId;
-/**
- * Handle A11yContext events.
- * Because the event are sent without manual check, we split calls
- */
-
-const handleRequest = async storyId => {
-  const {
-    manual
-  } = await getParams(storyId);
-
-  if (!manual) {
-    await run(storyId);
-  }
-};
-
-const run = async storyId => {
-  activeStoryId = storyId;
-
-  try {
-    const input = await getParams(storyId);
-
-    if (!active) {
-      active = true;
-      channel.emit(_constants.EVENTS.RUNNING);
-      const axe = (await Promise.resolve().then(() => _interopRequireWildcard(require('axe-core')))).default;
-      const {
-        element = '#root',
-        config,
-        options = {}
-      } = input;
-      const htmlElement = document.querySelector(element);
-      axe.reset();
-
-      if (config) {
-        axe.configure(config);
-      }
-
-      const result = await axe.run(htmlElement, options); // It's possible that we requested a new run on a different story.
-      // Unfortunately, axe doesn't support a cancel method to abort current run.
-      // We check if the story we run against is still the current one,
-      // if not, trigger a new run using the current story
-
-      if (activeStoryId === storyId) {
-        channel.emit(_constants.EVENTS.RESULT, result);
-      } else {
-        active = false;
-        run(activeStoryId);
-      }
-    }
-  } catch (error) {
-    channel.emit(_constants.EVENTS.ERROR, error);
-  } finally {
-    active = false;
-  }
-};
-/** Returns story parameters or default ones. */
-
-
-const getParams = async storyId => {
-  const {
-    parameters
-  } = (await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({
-    storyId
-  })) || {};
-  return parameters.a11y || {
-    config: {},
-    options: {
-      restoreScroll: true
-    }
-  };
-};
-
-channel.on(_constants.EVENTS.REQUEST, handleRequest);
-channel.on(_constants.EVENTS.MANUAL, run);

package/dist/cjs/components/A11YPanel.js

@@ -1,185 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RuleType = exports.A11YPanel = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _components = require("@storybook/components");
-
-var _api = require("@storybook/api");
-
-var _Report = require("./Report");
-
-var _Tabs = require("./Tabs");
-
-var _A11yContext = require("./A11yContext");
-
-var _constants = require("../constants");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-let RuleType;
-exports.RuleType = RuleType;
-
-(function (RuleType) {
-  RuleType[RuleType["VIOLATION"] = 0] = "VIOLATION";
-  RuleType[RuleType["PASS"] = 1] = "PASS";
-  RuleType[RuleType["INCOMPLETION"] = 2] = "INCOMPLETION";
-})(RuleType || (exports.RuleType = RuleType = {}));
-
-const Icon = (0, _theming.styled)(_components.Icons)({
-  height: 12,
-  width: 12,
-  marginRight: 4
-});
-const RotatingIcon = (0, _theming.styled)(Icon)(({
-  theme
-}) => ({
-  animation: `${theme.animation.rotate360} 1s linear infinite;`
-}));
-
-const Passes = _theming.styled.span(({
-  theme
-}) => ({
-  color: theme.color.positive
-}));
-
-const Violations = _theming.styled.span(({
-  theme
-}) => ({
-  color: theme.color.negative
-}));
-
-const Incomplete = _theming.styled.span(({
-  theme
-}) => ({
-  color: theme.color.warning
-}));
-
-const Centered = _theming.styled.span({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '100%'
-});
-
-const A11YPanel = () => {
-  const {
-    manual
-  } = (0, _api.useParameter)('a11y', {
-    manual: false
-  });
-  const [status, setStatus] = (0, _react.useState)(manual ? 'manual' : 'initial');
-
-  const [error, setError] = _react.default.useState(undefined);
-
-  const {
-    setResults,
-    results
-  } = (0, _A11yContext.useA11yContext)();
-  const {
-    storyId
-  } = (0, _api.useStorybookState)();
-
-  _react.default.useEffect(() => {
-    setStatus(manual ? 'manual' : 'initial');
-  }, [manual]);
-
-  const handleResult = axeResults => {
-    setStatus('ran');
-    setResults(axeResults);
-    setTimeout(() => {
-      if (status === 'ran') {
-        setStatus('ready');
-      }
-    }, 900);
-  };
-
-  const handleRun = (0, _react.useCallback)(() => {
-    setStatus('running');
-  }, []);
-  const handleError = (0, _react.useCallback)(err => {
-    setStatus('error');
-    setError(err);
-  }, []);
-  const emit = (0, _api.useChannel)({
-    [_constants.EVENTS.RUNNING]: handleRun,
-    [_constants.EVENTS.RESULT]: handleResult,
-    [_constants.EVENTS.ERROR]: handleError
-  });
-  const handleManual = (0, _react.useCallback)(() => {
-    setStatus('running');
-    emit(_constants.EVENTS.MANUAL, storyId);
-  }, [storyId]);
-  const manualActionItems = (0, _react.useMemo)(() => [{
-    title: 'Run test',
-    onClick: handleManual
-  }], [handleManual]);
-  const readyActionItems = (0, _react.useMemo)(() => [{
-    title: status === 'ready' ? 'Rerun tests' : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Icon, {
-      inline: true,
-      icon: "check"
-    }), " Tests completed"),
-    onClick: handleManual
-  }], [status, handleManual]);
-  const tabs = (0, _react.useMemo)(() => {
-    const {
-      passes,
-      incomplete,
-      violations
-    } = results;
-    return [{
-      label: /*#__PURE__*/_react.default.createElement(Violations, null, violations.length, " Violations"),
-      panel: /*#__PURE__*/_react.default.createElement(_Report.Report, {
-        items: violations,
-        type: RuleType.VIOLATION,
-        empty: "No accessibility violations found."
-      }),
-      items: violations,
-      type: RuleType.VIOLATION
-    }, {
-      label: /*#__PURE__*/_react.default.createElement(Passes, null, passes.length, " Passes"),
-      panel: /*#__PURE__*/_react.default.createElement(_Report.Report, {
-        items: passes,
-        type: RuleType.PASS,
-        empty: "No accessibility checks passed."
-      }),
-      items: passes,
-      type: RuleType.PASS
-    }, {
-      label: /*#__PURE__*/_react.default.createElement(Incomplete, null, incomplete.length, " Incomplete"),
-      panel: /*#__PURE__*/_react.default.createElement(_Report.Report, {
-        items: incomplete,
-        type: RuleType.INCOMPLETION,
-        empty: "No accessibility checks incomplete."
-      }),
-      items: incomplete,
-      type: RuleType.INCOMPLETION
-    }];
-  }, [results]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, status === 'initial' && /*#__PURE__*/_react.default.createElement(Centered, null, "Initializing..."), status === 'manual' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Centered, null, "Manually run the accessibility scan."), /*#__PURE__*/_react.default.createElement(_components.ActionBar, {
-    key: "actionbar",
-    actionItems: manualActionItems
-  })), status === 'running' && /*#__PURE__*/_react.default.createElement(Centered, null, /*#__PURE__*/_react.default.createElement(RotatingIcon, {
-    inline: true,
-    icon: "sync"
-  }), " Please wait while the accessibility scan is running ..."), (status === 'ready' || status === 'ran') && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.ScrollArea, {
-    vertical: true,
-    horizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, {
-    key: "tabs",
-    tabs: tabs
-  })), /*#__PURE__*/_react.default.createElement(_components.ActionBar, {
-    key: "actionbar",
-    actionItems: readyActionItems
-  })), status === 'error' && /*#__PURE__*/_react.default.createElement(Centered, null, "The accessibility scan encountered an error.", /*#__PURE__*/_react.default.createElement("br", null), typeof error === 'string' ? error : JSON.stringify(error)));
-};
-
-exports.A11YPanel = A11YPanel;