@storybook/addon-a11y 7.0.0-beta.2 → 7.0.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/manager.js +1 -1
  3. package/dist/manager.mjs +1 -1
  4. package/dist/preview.js +1 -1
  5. package/dist/preview.mjs +1 -1
  6. package/package.json +15 -13
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var s=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var R=(t,o)=>{for(var r in o)s(t,r,{get:o[r],enumerable:!0})},m=(t,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of u(o))!A.call(t,n)&&n!==r&&s(t,n,{get:()=>o[n],enumerable:!(c=E(o,n))||c.enumerable});return t};var p=t=>m(s({},"__esModule",{value:!0}),t);var N={};R(N,{PARAM_KEY:()=>l});module.exports=p(N);var e="storybook/a11y",x=`${e}/panel`,l="a11y",$=`${e}/result`,a=`${e}/request`,i=`${e}/running`,D=`${e}/error`,U=`${e}/manual`;module&&module.hot&&module.hot.decline&&module.hot.decline();0&&(module.exports={PARAM_KEY});
1
+ "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{PARAM_KEY:()=>PARAM_KEY});module.exports=__toCommonJS(src_exports);var ADDON_ID="storybook/a11y",PANEL_ID=`${ADDON_ID}/panel`,PARAM_KEY="a11y",RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`;module&&module.hot&&module.hot.decline&&module.hot.decline();0&&(module.exports={PARAM_KEY});
package/dist/manager.js CHANGED
@@ -1 +1 @@
1
- "use strict";var Ae=Object.create;var te=Object.defineProperty;var Re=Object.getOwnPropertyDescriptor;var ve=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Pe=Object.prototype.hasOwnProperty;var Ne=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ve(t))!Pe.call(e,n)&&n!==o&&te(e,n,{get:()=>t[n],enumerable:!(r=Re(t,n))||r.enumerable});return e};var d=(e,t,o)=>(o=e!=null?Ae(Be(e)):{},Ne(t||!e||!e.__esModule?te(o,"default",{value:e,enumerable:!0}):o,e));var j=d(require("react")),B=require("@storybook/manager-api");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 a=d(require("react")),re=e=>a.createElement("svg",{...e},a.createElement("defs",null,a.createElement("filter",{id:"protanopia"},a.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"})),a.createElement("filter",{id:"protanomaly"},a.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"})),a.createElement("filter",{id:"deuteranopia"},a.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"})),a.createElement("filter",{id:"deuteranomaly"},a.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"})),a.createElement("filter",{id:"tritanopia"},a.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"})),a.createElement("filter",{id:"tritanomaly"},a.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"})),a.createElement("filter",{id:"achromatopsia"},a.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"}))));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:"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")),v=require("@storybook/theming"),R=require("@storybook/components"),D=require("@storybook/manager-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"),Ye=U.styled.div({padding:12,marginBottom:10}),_e=U.styled.p({margin:"0 0 12px"}),Ke=U.styled.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),se=({item:e})=>V.default.createElement(Ye,null,V.default.createElement(_e,null,e.description),V.default.createElement(Ke,{href:e.helpUrl,target:"_blank"},"More info..."));var k=d(require("react")),Y=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"),N=require("@storybook/manager-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,N.useAddonState)(f,ce),[n,s]=p.useState(0),[l,y]=p.useState([]),I=(0,N.useStorybookApi)().getCurrentStoryData(),J=p.useCallback((g,O)=>{y(P=>O?[...P,...g]:P.filter(Se=>!g.includes(Se)))},[]),G=g=>{w(E.REQUEST,g)},x=p.useCallback(()=>y([]),[]),q=p.useCallback(g=>{x(),s(g)},[]),Q=p.useCallback(()=>{s(0),r(ce)},[]),w=(0,N.useChannel)({[z.STORY_RENDERED]:G,[z.STORY_CHANGED]:Q});return p.useEffect(()=>{w(me.HIGHLIGHT,{elements:l,color:et[n]})},[l,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:l,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),[s,l]=L.default.useState(ue(t,r));L.default.useEffect(()=>{let u=ue(t,r);n.current&&(n.current.indeterminate=u===2),l(u)},[t,r]);let y=L.default.useCallback(()=>{o(t.map(u=>u.target[0]),s!==0)},[t,s,o]);return L.default.createElement(tt,{ref:n,id:e,type:"checkbox","aria-label":"Highlight result",disabled:!t.length,onChange:y,checked:s===0})},F=ot;var rt=Y.styled.li({fontWeight:600}),it=Y.styled.span(({theme:e})=>({borderBottom:`1px solid ${e.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),nt=Y.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,s=[...o,...r,...n],l=`${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:l,elementsToHighlight:[e]}))),k.default.createElement(pe,{rules:s}))},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.textMutedColor,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,s=`${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:s,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 _=({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")),A=require("@storybook/theming"),Te=require("react-sizeme");var dt=A.styled.div({width:"100%",position:"relative",minHeight:"100%"}),ut=A.styled.label(({theme:e})=>({cursor:"pointer",userSelect:"none",color:e.color.dark})),ft=A.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=A.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=A.styled.div({}),xt=A.styled.div(({theme:e})=>({boxShadow:`${e.appBorderColor} 0 -1px 0 0 inset`,background:e.background.app,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(l=>{o(parseInt(l.currentTarget.getAttribute("data-index")||"",10))},[o]),n=`${e[t].type}-global-checkbox`,s="Highlight results";return h.createElement(Te.SizeMe,{refreshMode:"debounce"},({size:l})=>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:l.width||0},h.createElement(ut,{htmlFor:n},s),h.createElement(F,{toggleId:n,elementsToHighlight:bt(e[t].items)})):null,e[t].panel))};var Ie=(0,v.styled)(R.Icons)({height:12,width:12,marginRight:4}),Ct=(0,v.styled)(Ie)(({theme:e})=>({animation:`${e.animation.rotate360} 1s linear infinite;`})),Tt=v.styled.span(({theme:e})=>({color:e.color.positiveText})),kt=v.styled.span(({theme:e})=>({color:e.color.negativeText})),It=v.styled.span(({theme:e})=>({color:e.color.warningText})),K=v.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:s,results:l}=H(),{storyId:y}=(0,D.useStorybookState)();i.default.useEffect(()=>{o(e?"manual":"initial")},[e]);let u=g=>{o("ran"),s(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,{icon:"check"})," Tests completed"),onClick:x}],[t,x]),w=(0,i.useMemo)(()=>{let{passes:g,incomplete:O,violations:P}=l;return[{label:i.default.createElement(kt,null,P.length," Violations"),panel:i.default.createElement(_,{items:P,type:0,empty:"No accessibility violations found."}),items:P,type:0},{label:i.default.createElement(Tt,null,g.length," Passes"),panel:i.default.createElement(_,{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(_,{items:O,type:2,empty:"No accessibility checks incomplete."}),items:O,type:2}]},[l]);return i.default.createElement(i.default.Fragment,null,t==="initial"&&i.default.createElement(K,null,"Initializing..."),t==="manual"&&i.default.createElement(i.default.Fragment,null,i.default.createElement(K,null,"Manually run the accessibility scan."),i.default.createElement(R.ActionBar,{key:"actionbar",actionItems:q})),t==="running"&&i.default.createElement(K,null,i.default.createElement(Ct,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(t==="ready"||t==="ran")&&i.default.createElement(i.default.Fragment,null,i.default.createElement(R.ScrollArea,{vertical:!0,horizontal:!0},i.default.createElement(ke,{key:"tabs",tabs:w})),i.default.createElement(R.ActionBar,{key:"actionbar",actionItems:Q})),t==="error"&&i.default.createElement(K,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 s,l;let t=e==null?void 0:e.getAddonState(f),o=((s=t==null?void 0:t.violations)==null?void 0:s.length)||0,r=((l=t==null?void 0:t.incomplete)==null?void 0:l.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})});
1
+ "use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react10=__toESM(require("react")),import_manager_api3=require("@storybook/manager-api");var ADDON_ID="storybook/a11y",PANEL_ID=`${ADDON_ID}/panel`,PARAM_KEY="a11y",RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`,EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL};var import_react=__toESM(require("react")),import_theming=require("@storybook/theming"),import_components=require("@storybook/components");var React=__toESM(require("react")),Filters=props=>React.createElement("svg",{...props},React.createElement("defs",null,React.createElement("filter",{id:"protanopia"},React.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"})),React.createElement("filter",{id:"protanomaly"},React.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"})),React.createElement("filter",{id:"deuteranopia"},React.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"})),React.createElement("filter",{id:"deuteranomaly"},React.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"})),React.createElement("filter",{id:"tritanopia"},React.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"})),React.createElement("filter",{id:"tritanomaly"},React.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"})),React.createElement("filter",{id:"achromatopsia"},React.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"}))));var iframeId="storybook-preview-iframe",baseList=[{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:"achromatopsia",percentage:1e-4},{name:"grayscale"}],getFilter=filterName=>filterName?filterName==="blurred vision"?"blur(2px)":filterName==="grayscale"?"grayscale(100%)":`url('#${filterName}')`:"none",Hidden=import_theming.styled.div(()=>({"&, & svg":{position:"absolute",width:0,height:0}})),ColorIcon=import_theming.styled.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter})=>({filter:getFilter(filter)}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`})),Column=import_theming.styled.span({display:"flex",flexDirection:"column"}),Title=import_theming.styled.span({textTransform:"capitalize"}),Description=import_theming.styled.span(({theme})=>({fontSize:11,color:theme.textMutedColor})),getColorList=(active,set)=>[...active!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{set(null)},right:void 0,active:!1}]:[],...baseList.map(i=>{let description=i.percentage!==void 0?`${i.percentage}% of users`:void 0;return{id:i.name,title:import_react.default.createElement(Column,null,import_react.default.createElement(Title,null,i.name),description&&import_react.default.createElement(Description,null,description)),onClick:()=>{set(i)},right:import_react.default.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=(0,import_react.useState)(null);return import_react.default.createElement(import_react.default.Fragment,null,filter&&import_react.default.createElement(import_theming.Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide()});return import_react.default.createElement(import_components.TooltipLinkList,{links:colorList})},closeOnClick:!0,onDoubleClick:()=>setFilter(null)},import_react.default.createElement(import_components.IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},import_react.default.createElement(import_components.Icons,{icon:"accessibility"}))),import_react.default.createElement(Hidden,null,import_react.default.createElement(Filters,null)))};var import_react9=__toESM(require("react")),import_theming10=require("@storybook/theming"),import_components5=require("@storybook/components"),import_manager_api2=require("@storybook/manager-api");var import_react8=__toESM(require("react")),import_components4=require("@storybook/components");var import_react7=__toESM(require("react")),import_theming8=require("@storybook/theming"),import_components3=require("@storybook/components");var import_react2=__toESM(require("react")),import_theming2=require("@storybook/theming"),Wrapper=import_theming2.styled.div({padding:12,marginBottom:10}),Description2=import_theming2.styled.p({margin:"0 0 12px"}),Link=import_theming2.styled.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),Info=({item})=>import_react2.default.createElement(Wrapper,null,import_react2.default.createElement(Description2,null,item.description),import_react2.default.createElement(Link,{href:item.helpUrl,target:"_blank"},"More info..."));var import_react5=__toESM(require("react")),import_theming6=require("@storybook/theming");var import_react3=__toESM(require("react")),import_theming3=require("@storybook/theming"),import_components2=require("@storybook/components"),import_react_resize_detector=require("react-resize-detector"),List=import_theming3.styled.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Item=import_theming3.styled.div(({elementWidth})=>({flexDirection:elementWidth>407?"row":"inherit",marginBottom:elementWidth>407?6:12,display:elementWidth>407?"flex":"block"})),StyledBadge=(0,import_theming3.styled)(import_components2.Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Message=import_theming3.styled.div({paddingLeft:6,paddingRight:23});var formatSeverityText=severity=>severity.charAt(0).toUpperCase().concat(severity.slice(1)),Rule=({rule})=>{let{ref,width}=(0,import_react_resize_detector.useResizeDetector)({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),badgeType=null;switch(rule.impact){case"critical":badgeType="critical";break;case"serious":badgeType="negative";break;case"moderate":badgeType="warning";break;case"minor":badgeType="neutral";break;default:break}return import_react3.default.createElement(Item,{ref,elementWidth:width||0},import_react3.default.createElement(StyledBadge,{status:badgeType},formatSeverityText(rule.impact)),import_react3.default.createElement(Message,null,rule.message))},Rules=({rules})=>import_react3.default.createElement(List,null,rules.map((rule,index)=>import_react3.default.createElement(Rule,{rule,key:index})));var import_react4=__toESM(require("react")),import_theming5=require("@storybook/theming");var React5=__toESM(require("react")),import_theming4=require("@storybook/theming"),import_manager_api=require("@storybook/manager-api"),import_core_events=require("@storybook/core-events"),import_addon_highlight=require("@storybook/addon-highlight");var colorsByType=[(0,import_theming4.convert)(import_theming4.themes.light).color.negative,(0,import_theming4.convert)(import_theming4.themes.light).color.positive,(0,import_theming4.convert)(import_theming4.themes.light).color.warning],A11yContext=React5.createContext({results:{passes:[],incomplete:[],violations:[]},setResults:()=>{},highlighted:[],toggleHighlight:()=>{},clearHighlights:()=>{},tab:0,setTab:()=>{}}),defaultResult={passes:[],incomplete:[],violations:[]},A11yContextProvider=({active,...props})=>{let[results,setResults]=(0,import_manager_api.useAddonState)(ADDON_ID,defaultResult),[tab,setTab]=React5.useState(0),[highlighted,setHighlighted]=React5.useState([]),storyEntry=(0,import_manager_api.useStorybookApi)().getCurrentStoryData(),handleToggleHighlight=React5.useCallback((target,highlight)=>{setHighlighted(prevHighlighted=>highlight?[...prevHighlighted,...target]:prevHighlighted.filter(t=>!target.includes(t)))},[]),handleRun=renderedStoryId=>{emit(EVENTS.REQUEST,renderedStoryId)},handleClearHighlights=React5.useCallback(()=>setHighlighted([]),[]),handleSetTab=React5.useCallback(index=>{handleClearHighlights(),setTab(index)},[]),handleReset=React5.useCallback(()=>{setTab(0),setResults(defaultResult)},[]),emit=(0,import_manager_api.useChannel)({[import_core_events.STORY_RENDERED]:handleRun,[import_core_events.STORY_CHANGED]:handleReset});return React5.useEffect(()=>{emit(import_addon_highlight.HIGHLIGHT,{elements:highlighted,color:colorsByType[tab]})},[highlighted,tab]),React5.useEffect(()=>{active&&(storyEntry==null?void 0:storyEntry.type)==="story"?handleRun(storyEntry.id):handleClearHighlights()},[active,handleClearHighlights,emit,storyEntry]),active?React5.createElement(A11yContext.Provider,{value:{results,setResults,highlighted,toggleHighlight:handleToggleHighlight,clearHighlights:handleClearHighlights,tab,setTab:handleSetTab},...props}):null},useA11yContext=()=>React5.useContext(A11yContext);var Checkbox=import_theming5.styled.input(({disabled})=>({cursor:disabled?"not-allowed":"pointer"}));function areAllRequiredElementsHighlighted(elementsToHighlight,highlighted){let highlightedCount=elementsToHighlight.filter(item=>highlighted.includes(item.target[0])).length;return highlightedCount===0?1:highlightedCount===elementsToHighlight.length?0:2}var HighlightToggle=({toggleId,elementsToHighlight=[]})=>{let{toggleHighlight,highlighted}=useA11yContext(),checkBoxRef=import_react4.default.useRef(null),[checkBoxState,setChecked]=import_react4.default.useState(areAllRequiredElementsHighlighted(elementsToHighlight,highlighted));import_react4.default.useEffect(()=>{let newState=areAllRequiredElementsHighlighted(elementsToHighlight,highlighted);checkBoxRef.current&&(checkBoxRef.current.indeterminate=newState===2),setChecked(newState)},[elementsToHighlight,highlighted]);let handleToggle=import_react4.default.useCallback(()=>{toggleHighlight(elementsToHighlight.map(e=>e.target[0]),checkBoxState!==0)},[elementsToHighlight,checkBoxState,toggleHighlight]);return import_react4.default.createElement(Checkbox,{ref:checkBoxRef,id:toggleId,type:"checkbox","aria-label":"Highlight result",disabled:!elementsToHighlight.length,onChange:handleToggle,checked:checkBoxState===0})},HighlightToggle_default=HighlightToggle;var Item2=import_theming6.styled.li({fontWeight:600}),ItemTitle=import_theming6.styled.span(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),HighlightToggleElement=import_theming6.styled.span({fontWeight:"normal",alignSelf:"center",paddingRight:15,input:{margin:0,display:"block"}}),Element=({element,type})=>{let{any,all,none}=element,rules=[...any,...all,...none],highlightToggleId=`${type}-${element.target[0]}`;return import_react5.default.createElement(Item2,null,import_react5.default.createElement(ItemTitle,null,element.target[0],import_react5.default.createElement(HighlightToggleElement,null,import_react5.default.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:[element]}))),import_react5.default.createElement(Rules,{rules}))},Elements=({elements,type})=>import_react5.default.createElement("ol",null,elements.map((element,index)=>import_react5.default.createElement(Element,{element,key:index,type})));var import_react6=__toESM(require("react")),import_theming7=require("@storybook/theming"),Wrapper2=import_theming7.styled.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),Item3=import_theming7.styled.div(({theme})=>({margin:"0 6px",padding:5,border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius})),Tags=({tags})=>import_react6.default.createElement(Wrapper2,null,tags.map(tag=>import_react6.default.createElement(Item3,{key:tag},tag)));var Wrapper3=import_theming8.styled.div(({theme})=>({display:"flex",width:"100%",borderBottom:`1px solid ${theme.appBorderColor}`,"&:hover":{background:theme.background.hoverable}})),Icon=(0,import_theming8.styled)(import_components3.Icons)(({theme})=>({height:10,width:10,minWidth:10,color:theme.textMutedColor,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),HeaderBar=import_theming8.styled.div(({theme})=>({padding:theme.layoutMargin,paddingLeft:theme.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 ${theme.color.secondary}`}})),HighlightToggleElement2=import_theming8.styled.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),Item4=props=>{let[open,onToggle]=(0,import_react7.useState)(!1),{item,type}=props,highlightToggleId=`${type}-${item.id}`;return import_react7.default.createElement(import_react7.Fragment,null,import_react7.default.createElement(Wrapper3,null,import_react7.default.createElement(HeaderBar,{onClick:()=>onToggle(!open),role:"button"},import_react7.default.createElement(Icon,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${open?0:-90}deg)`}}),item.help),import_react7.default.createElement(HighlightToggleElement2,null,import_react7.default.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:item.nodes}))),open?import_react7.default.createElement(import_react7.Fragment,null,import_react7.default.createElement(Info,{item,key:"info"}),import_react7.default.createElement(Elements,{elements:item.nodes,type,key:"elements"}),import_react7.default.createElement(Tags,{tags:item.tags,key:"tags"})):null)};var Report=({items,empty,type})=>import_react8.default.createElement(import_react8.Fragment,null,items&&items.length?items.map(item=>import_react8.default.createElement(Item4,{item,key:`${type}:${item.id}`,type})):import_react8.default.createElement(import_components4.Placeholder,{key:"placeholder"},empty));var React11=__toESM(require("react")),import_theming9=require("@storybook/theming"),import_react_resize_detector2=require("react-resize-detector");var Container=import_theming9.styled.div({width:"100%",position:"relative",minHeight:"100%"}),HighlightToggleLabel=import_theming9.styled.label(({theme})=>({cursor:"pointer",userSelect:"none",color:theme.color.dark})),GlobalToggle=import_theming9.styled.div(({elementWidth,theme})=>({cursor:"pointer",fontSize:13,lineHeight:"20px",padding:elementWidth>450?"10px 15px 10px 0":"10px 0px 10px 15px",height:"40px",border:"none",marginTop:elementWidth>450?-40:0,float:elementWidth>450?"right":"left",display:"flex",alignItems:"center",width:elementWidth>450?"auto":"100%",borderBottom:elementWidth>450?"none":`1px solid ${theme.appBorderColor}`,input:{marginLeft:10,marginRight:0,marginTop:-1,marginBottom:0}})),Item5=import_theming9.styled.button(({theme})=>({textDecoration:"none",padding:"10px 15px",cursor:"pointer",fontWeight:theme.typography.weight.bold,fontSize:theme.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 ${theme.color.secondary}`}}),({active,theme})=>active?{opacity:1,borderBottom:`3px solid ${theme.color.secondary}`}:{}),TabsWrapper=import_theming9.styled.div({}),List2=import_theming9.styled.div(({theme})=>({boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`,background:theme.background.app,display:"flex",justifyContent:"space-between",whiteSpace:"nowrap"}));function retrieveAllNodesFromResults(items){return items.reduce((acc,item)=>acc.concat(item.nodes),[])}var Tabs=({tabs})=>{let{ref,width}=(0,import_react_resize_detector2.useResizeDetector)({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),{tab:activeTab,setTab}=useA11yContext(),handleToggle=React11.useCallback(event=>{setTab(parseInt(event.currentTarget.getAttribute("data-index")||"",10))},[setTab]),highlightToggleId=`${tabs[activeTab].type}-global-checkbox`,highlightLabel="Highlight results";return React11.createElement(Container,{ref},React11.createElement(List2,null,React11.createElement(TabsWrapper,null,tabs.map((tab,index)=>React11.createElement(Item5,{key:index,"data-index":index,active:activeTab===index,onClick:handleToggle},tab.label)))),tabs[activeTab].items.length>0?React11.createElement(GlobalToggle,{elementWidth:width||0},React11.createElement(HighlightToggleLabel,{htmlFor:highlightToggleId},highlightLabel),React11.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:retrieveAllNodesFromResults(tabs[activeTab].items)})):null,tabs[activeTab].panel)};var Icon2=(0,import_theming10.styled)(import_components5.Icons)({height:12,width:12,marginRight:4}),RotatingIcon=(0,import_theming10.styled)(Icon2)(({theme})=>({animation:`${theme.animation.rotate360} 1s linear infinite;`})),Passes=import_theming10.styled.span(({theme})=>({color:theme.color.positiveText})),Violations=import_theming10.styled.span(({theme})=>({color:theme.color.negativeText})),Incomplete=import_theming10.styled.span(({theme})=>({color:theme.color.warningText})),Centered=import_theming10.styled.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),A11YPanel=()=>{let{manual}=(0,import_manager_api2.useParameter)("a11y",{manual:!1}),[status,setStatus]=(0,import_react9.useState)(manual?"manual":"initial"),[error,setError]=import_react9.default.useState(void 0),{setResults,results}=useA11yContext(),{storyId}=(0,import_manager_api2.useStorybookState)();import_react9.default.useEffect(()=>{setStatus(manual?"manual":"initial")},[manual]);let handleResult=axeResults=>{setStatus("ran"),setResults(axeResults),setTimeout(()=>{status==="ran"&&setStatus("ready")},900)},handleRun=(0,import_react9.useCallback)(()=>{setStatus("running")},[]),handleError=(0,import_react9.useCallback)(err=>{setStatus("error"),setError(err)},[]),emit=(0,import_manager_api2.useChannel)({[EVENTS.RUNNING]:handleRun,[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError}),handleManual=(0,import_react9.useCallback)(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId)},[storyId]),manualActionItems=(0,import_react9.useMemo)(()=>[{title:"Run test",onClick:handleManual}],[handleManual]),readyActionItems=(0,import_react9.useMemo)(()=>[{title:status==="ready"?"Rerun tests":import_react9.default.createElement(import_react9.default.Fragment,null,import_react9.default.createElement(Icon2,{icon:"check"})," Tests completed"),onClick:handleManual}],[status,handleManual]),tabs=(0,import_react9.useMemo)(()=>{let{passes,incomplete,violations}=results;return[{label:import_react9.default.createElement(Violations,null,violations.length," Violations"),panel:import_react9.default.createElement(Report,{items:violations,type:0,empty:"No accessibility violations found."}),items:violations,type:0},{label:import_react9.default.createElement(Passes,null,passes.length," Passes"),panel:import_react9.default.createElement(Report,{items:passes,type:1,empty:"No accessibility checks passed."}),items:passes,type:1},{label:import_react9.default.createElement(Incomplete,null,incomplete.length," Incomplete"),panel:import_react9.default.createElement(Report,{items:incomplete,type:2,empty:"No accessibility checks incomplete."}),items:incomplete,type:2}]},[results]);return import_react9.default.createElement(import_react9.default.Fragment,null,status==="initial"&&import_react9.default.createElement(Centered,null,"Initializing..."),status==="manual"&&import_react9.default.createElement(import_react9.default.Fragment,null,import_react9.default.createElement(Centered,null,"Manually run the accessibility scan."),import_react9.default.createElement(import_components5.ActionBar,{key:"actionbar",actionItems:manualActionItems})),status==="running"&&import_react9.default.createElement(Centered,null,import_react9.default.createElement(RotatingIcon,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(status==="ready"||status==="ran")&&import_react9.default.createElement(import_react9.default.Fragment,null,import_react9.default.createElement(import_components5.ScrollArea,{vertical:!0,horizontal:!0},import_react9.default.createElement(Tabs,{key:"tabs",tabs})),import_react9.default.createElement(import_components5.ActionBar,{key:"actionbar",actionItems:readyActionItems})),status==="error"&&import_react9.default.createElement(Centered,null,"The accessibility scan encountered an error.",import_react9.default.createElement("br",null),typeof error=="string"?error:JSON.stringify(error)))};import_manager_api3.addons.register(ADDON_ID,api=>{import_manager_api3.addons.add(PANEL_ID,{title:"",type:import_manager_api3.types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>import_react10.default.createElement(VisionSimulator,null)}),import_manager_api3.addons.add(PANEL_ID,{title(){var _a,_b;let addonState=api==null?void 0:api.getAddonState(ADDON_ID),violationsNb=((_a=addonState==null?void 0:addonState.violations)==null?void 0:_a.length)||0,incompleteNb=((_b=addonState==null?void 0:addonState.incomplete)==null?void 0:_b.length)||0,totalNb=violationsNb+incompleteNb;return totalNb!==0?`Accessibility (${totalNb})`:"Accessibility"},type:import_manager_api3.types.PANEL,render:({active=!0,key})=>import_react10.default.createElement(A11yContextProvider,{key,active},import_react10.default.createElement(A11YPanel,null)),paramKey:PARAM_KEY})});
package/dist/manager.mjs CHANGED
@@ -1 +1 @@
1
- import{ADDON_ID,EVENTS,PANEL_ID,PARAM_KEY,init_constants}from"./chunk-4TMP7LA6.mjs";init_constants();import React13 from"react";import{addons,types}from"@storybook/manager-api";import React2,{useState}from"react";import{Global,styled}from"@storybook/theming";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";import*as React from"react";var Filters=props=>React.createElement("svg",{...props},React.createElement("defs",null,React.createElement("filter",{id:"protanopia"},React.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"})),React.createElement("filter",{id:"protanomaly"},React.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"})),React.createElement("filter",{id:"deuteranopia"},React.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"})),React.createElement("filter",{id:"deuteranomaly"},React.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"})),React.createElement("filter",{id:"tritanopia"},React.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"})),React.createElement("filter",{id:"tritanomaly"},React.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"})),React.createElement("filter",{id:"achromatopsia"},React.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"}))));var iframeId="storybook-preview-iframe",baseList=[{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:"achromatopsia",percentage:1e-4},{name:"grayscale"}],getFilter=filterName=>filterName?filterName==="blurred vision"?"blur(2px)":filterName==="grayscale"?"grayscale(100%)":`url('#${filterName}')`:"none",Hidden=styled.div(()=>({"&, & svg":{position:"absolute",width:0,height:0}})),ColorIcon=styled.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter})=>({filter:getFilter(filter)}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`})),Column=styled.span({display:"flex",flexDirection:"column"}),Title=styled.span({textTransform:"capitalize"}),Description=styled.span(({theme})=>({fontSize:11,color:theme.textMutedColor})),getColorList=(active,set)=>[...active!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{set(null)},right:void 0,active:!1}]:[],...baseList.map(i=>{let description=i.percentage!==void 0?`${i.percentage}% of users`:void 0;return{id:i.name,title:React2.createElement(Column,null,React2.createElement(Title,null,i.name),description&&React2.createElement(Description,null,description)),onClick:()=>{set(i)},right:React2.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=useState(null);return React2.createElement(React2.Fragment,null,filter&&React2.createElement(Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),React2.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide()});return React2.createElement(TooltipLinkList,{links:colorList})},closeOnClick:!0,onDoubleClick:()=>setFilter(null)},React2.createElement(IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},React2.createElement(Icons,{icon:"accessibility"}))),React2.createElement(Hidden,null,React2.createElement(Filters,null)))};import React12,{useCallback as useCallback3,useMemo,useState as useState4}from"react";import{styled as styled9}from"@storybook/theming";import{ActionBar,Icons as Icons3,ScrollArea}from"@storybook/components";import{useChannel as useChannel2,useParameter,useStorybookState}from"@storybook/manager-api";import React10,{Fragment as Fragment2}from"react";import{Placeholder}from"@storybook/components";import React9,{Fragment,useState as useState3}from"react";import{styled as styled7}from"@storybook/theming";import{Icons as Icons2}from"@storybook/components";import React3 from"react";import{styled as styled2}from"@storybook/theming";var Wrapper=styled2.div({padding:12,marginBottom:10}),Description2=styled2.p({margin:"0 0 12px"}),Link=styled2.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),Info=({item})=>React3.createElement(Wrapper,null,React3.createElement(Description2,null,item.description),React3.createElement(Link,{href:item.helpUrl,target:"_blank"},"More info..."));import React7 from"react";import{styled as styled5}from"@storybook/theming";import React4 from"react";import{styled as styled3}from"@storybook/theming";import{Badge}from"@storybook/components";import{SizeMe}from"react-sizeme";var List=styled3.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Item=styled3.div(({elementWidth})=>({flexDirection:elementWidth>407?"row":"inherit",marginBottom:elementWidth>407?6:12,display:elementWidth>407?"flex":"block"})),StyledBadge=styled3(Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Message=styled3.div({paddingLeft:6,paddingRight:23});var formatSeverityText=severity=>severity.charAt(0).toUpperCase().concat(severity.slice(1)),Rule=({rule})=>{let badgeType=null;switch(rule.impact){case"critical":badgeType="critical";break;case"serious":badgeType="negative";break;case"moderate":badgeType="warning";break;case"minor":badgeType="neutral";break;default:break}return React4.createElement(SizeMe,{refreshMode:"debounce"},({size})=>React4.createElement(Item,{elementWidth:size.width||0},React4.createElement(StyledBadge,{status:badgeType},formatSeverityText(rule.impact)),React4.createElement(Message,null,rule.message)))},Rules=({rules})=>React4.createElement(List,null,rules.map((rule,index)=>React4.createElement(Rule,{rule,key:index})));import React6 from"react";import{styled as styled4}from"@storybook/theming";init_constants();import*as React5 from"react";import{themes,convert}from"@storybook/theming";import{useChannel,useAddonState,useStorybookApi}from"@storybook/manager-api";import{STORY_CHANGED,STORY_RENDERED}from"@storybook/core-events";import{HIGHLIGHT}from"@storybook/addon-highlight";var colorsByType=[convert(themes.light).color.negative,convert(themes.light).color.positive,convert(themes.light).color.warning],A11yContext=React5.createContext({results:{passes:[],incomplete:[],violations:[]},setResults:()=>{},highlighted:[],toggleHighlight:()=>{},clearHighlights:()=>{},tab:0,setTab:()=>{}}),defaultResult={passes:[],incomplete:[],violations:[]},A11yContextProvider=({active,...props})=>{let[results,setResults]=useAddonState(ADDON_ID,defaultResult),[tab,setTab]=React5.useState(0),[highlighted,setHighlighted]=React5.useState([]),storyEntry=useStorybookApi().getCurrentStoryData(),handleToggleHighlight=React5.useCallback((target,highlight)=>{setHighlighted(prevHighlighted=>highlight?[...prevHighlighted,...target]:prevHighlighted.filter(t=>!target.includes(t)))},[]),handleRun=renderedStoryId=>{emit(EVENTS.REQUEST,renderedStoryId)},handleClearHighlights=React5.useCallback(()=>setHighlighted([]),[]),handleSetTab=React5.useCallback(index=>{handleClearHighlights(),setTab(index)},[]),handleReset=React5.useCallback(()=>{setTab(0),setResults(defaultResult)},[]),emit=useChannel({[STORY_RENDERED]:handleRun,[STORY_CHANGED]:handleReset});return React5.useEffect(()=>{emit(HIGHLIGHT,{elements:highlighted,color:colorsByType[tab]})},[highlighted,tab]),React5.useEffect(()=>{active&&storyEntry?.type==="story"?handleRun(storyEntry.id):handleClearHighlights()},[active,handleClearHighlights,emit,storyEntry]),active?React5.createElement(A11yContext.Provider,{value:{results,setResults,highlighted,toggleHighlight:handleToggleHighlight,clearHighlights:handleClearHighlights,tab,setTab:handleSetTab},...props}):null},useA11yContext=()=>React5.useContext(A11yContext);var Checkbox=styled4.input(({disabled})=>({cursor:disabled?"not-allowed":"pointer"}));function areAllRequiredElementsHighlighted(elementsToHighlight,highlighted){let highlightedCount=elementsToHighlight.filter(item=>highlighted.includes(item.target[0])).length;return highlightedCount===0?1:highlightedCount===elementsToHighlight.length?0:2}var HighlightToggle=({toggleId,elementsToHighlight=[]})=>{let{toggleHighlight,highlighted}=useA11yContext(),checkBoxRef=React6.useRef(null),[checkBoxState,setChecked]=React6.useState(areAllRequiredElementsHighlighted(elementsToHighlight,highlighted));React6.useEffect(()=>{let newState=areAllRequiredElementsHighlighted(elementsToHighlight,highlighted);checkBoxRef.current&&(checkBoxRef.current.indeterminate=newState===2),setChecked(newState)},[elementsToHighlight,highlighted]);let handleToggle=React6.useCallback(()=>{toggleHighlight(elementsToHighlight.map(e=>e.target[0]),checkBoxState!==0)},[elementsToHighlight,checkBoxState,toggleHighlight]);return React6.createElement(Checkbox,{ref:checkBoxRef,id:toggleId,type:"checkbox","aria-label":"Highlight result",disabled:!elementsToHighlight.length,onChange:handleToggle,checked:checkBoxState===0})},HighlightToggle_default=HighlightToggle;var Item2=styled5.li({fontWeight:600}),ItemTitle=styled5.span(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),HighlightToggleElement=styled5.span({fontWeight:"normal",alignSelf:"center",paddingRight:15,input:{margin:0,display:"block"}}),Element=({element,type})=>{let{any,all,none}=element,rules=[...any,...all,...none],highlightToggleId=`${type}-${element.target[0]}`;return React7.createElement(Item2,null,React7.createElement(ItemTitle,null,element.target[0],React7.createElement(HighlightToggleElement,null,React7.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:[element]}))),React7.createElement(Rules,{rules}))},Elements=({elements,type})=>React7.createElement("ol",null,elements.map((element,index)=>React7.createElement(Element,{element,key:index,type})));import React8 from"react";import{styled as styled6}from"@storybook/theming";var Wrapper2=styled6.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),Item3=styled6.div(({theme})=>({margin:"0 6px",padding:5,border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius})),Tags=({tags})=>React8.createElement(Wrapper2,null,tags.map(tag=>React8.createElement(Item3,{key:tag},tag)));var Wrapper3=styled7.div(({theme})=>({display:"flex",width:"100%",borderBottom:`1px solid ${theme.appBorderColor}`,"&:hover":{background:theme.background.hoverable}})),Icon=styled7(Icons2)(({theme})=>({height:10,width:10,minWidth:10,color:theme.textMutedColor,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),HeaderBar=styled7.div(({theme})=>({padding:theme.layoutMargin,paddingLeft:theme.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 ${theme.color.secondary}`}})),HighlightToggleElement2=styled7.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),Item4=props=>{let[open,onToggle]=useState3(!1),{item,type}=props,highlightToggleId=`${type}-${item.id}`;return React9.createElement(Fragment,null,React9.createElement(Wrapper3,null,React9.createElement(HeaderBar,{onClick:()=>onToggle(!open),role:"button"},React9.createElement(Icon,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${open?0:-90}deg)`}}),item.help),React9.createElement(HighlightToggleElement2,null,React9.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:item.nodes}))),open?React9.createElement(Fragment,null,React9.createElement(Info,{item,key:"info"}),React9.createElement(Elements,{elements:item.nodes,type,key:"elements"}),React9.createElement(Tags,{tags:item.tags,key:"tags"})):null)};var Report=({items,empty,type})=>React10.createElement(Fragment2,null,items&&items.length?items.map(item=>React10.createElement(Item4,{item,key:`${type}:${item.id}`,type})):React10.createElement(Placeholder,{key:"placeholder"},empty));import*as React11 from"react";import{styled as styled8}from"@storybook/theming";import{SizeMe as SizeMe2}from"react-sizeme";var Container=styled8.div({width:"100%",position:"relative",minHeight:"100%"}),HighlightToggleLabel=styled8.label(({theme})=>({cursor:"pointer",userSelect:"none",color:theme.color.dark})),GlobalToggle=styled8.div(({elementWidth,theme})=>({cursor:"pointer",fontSize:13,lineHeight:"20px",padding:elementWidth>450?"10px 15px 10px 0":"10px 0px 10px 15px",height:"40px",border:"none",marginTop:elementWidth>450?-40:0,float:elementWidth>450?"right":"left",display:"flex",alignItems:"center",width:elementWidth>450?"auto":"100%",borderBottom:elementWidth>450?"none":`1px solid ${theme.appBorderColor}`,input:{marginLeft:10,marginRight:0,marginTop:-1,marginBottom:0}})),Item5=styled8.button(({theme})=>({textDecoration:"none",padding:"10px 15px",cursor:"pointer",fontWeight:theme.typography.weight.bold,fontSize:theme.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 ${theme.color.secondary}`}}),({active,theme})=>active?{opacity:1,borderBottom:`3px solid ${theme.color.secondary}`}:{}),TabsWrapper=styled8.div({}),List2=styled8.div(({theme})=>({boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`,background:theme.background.app,display:"flex",justifyContent:"space-between",whiteSpace:"nowrap"}));function retrieveAllNodesFromResults(items){return items.reduce((acc,item)=>acc.concat(item.nodes),[])}var Tabs=({tabs})=>{let{tab:activeTab,setTab}=useA11yContext(),handleToggle=React11.useCallback(event=>{setTab(parseInt(event.currentTarget.getAttribute("data-index")||"",10))},[setTab]),highlightToggleId=`${tabs[activeTab].type}-global-checkbox`,highlightLabel="Highlight results";return React11.createElement(SizeMe2,{refreshMode:"debounce"},({size})=>React11.createElement(Container,null,React11.createElement(List2,null,React11.createElement(TabsWrapper,null,tabs.map((tab,index)=>React11.createElement(Item5,{key:index,"data-index":index,active:activeTab===index,onClick:handleToggle},tab.label)))),tabs[activeTab].items.length>0?React11.createElement(GlobalToggle,{elementWidth:size.width||0},React11.createElement(HighlightToggleLabel,{htmlFor:highlightToggleId},highlightLabel),React11.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:retrieveAllNodesFromResults(tabs[activeTab].items)})):null,tabs[activeTab].panel))};init_constants();var Icon2=styled9(Icons3)({height:12,width:12,marginRight:4}),RotatingIcon=styled9(Icon2)(({theme})=>({animation:`${theme.animation.rotate360} 1s linear infinite;`})),Passes=styled9.span(({theme})=>({color:theme.color.positiveText})),Violations=styled9.span(({theme})=>({color:theme.color.negativeText})),Incomplete=styled9.span(({theme})=>({color:theme.color.warningText})),Centered=styled9.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),A11YPanel=()=>{let{manual}=useParameter("a11y",{manual:!1}),[status,setStatus]=useState4(manual?"manual":"initial"),[error,setError]=React12.useState(void 0),{setResults,results}=useA11yContext(),{storyId}=useStorybookState();React12.useEffect(()=>{setStatus(manual?"manual":"initial")},[manual]);let handleResult=axeResults=>{setStatus("ran"),setResults(axeResults),setTimeout(()=>{status==="ran"&&setStatus("ready")},900)},handleRun=useCallback3(()=>{setStatus("running")},[]),handleError=useCallback3(err=>{setStatus("error"),setError(err)},[]),emit=useChannel2({[EVENTS.RUNNING]:handleRun,[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError}),handleManual=useCallback3(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId)},[storyId]),manualActionItems=useMemo(()=>[{title:"Run test",onClick:handleManual}],[handleManual]),readyActionItems=useMemo(()=>[{title:status==="ready"?"Rerun tests":React12.createElement(React12.Fragment,null,React12.createElement(Icon2,{icon:"check"})," Tests completed"),onClick:handleManual}],[status,handleManual]),tabs=useMemo(()=>{let{passes,incomplete,violations}=results;return[{label:React12.createElement(Violations,null,violations.length," Violations"),panel:React12.createElement(Report,{items:violations,type:0,empty:"No accessibility violations found."}),items:violations,type:0},{label:React12.createElement(Passes,null,passes.length," Passes"),panel:React12.createElement(Report,{items:passes,type:1,empty:"No accessibility checks passed."}),items:passes,type:1},{label:React12.createElement(Incomplete,null,incomplete.length," Incomplete"),panel:React12.createElement(Report,{items:incomplete,type:2,empty:"No accessibility checks incomplete."}),items:incomplete,type:2}]},[results]);return React12.createElement(React12.Fragment,null,status==="initial"&&React12.createElement(Centered,null,"Initializing..."),status==="manual"&&React12.createElement(React12.Fragment,null,React12.createElement(Centered,null,"Manually run the accessibility scan."),React12.createElement(ActionBar,{key:"actionbar",actionItems:manualActionItems})),status==="running"&&React12.createElement(Centered,null,React12.createElement(RotatingIcon,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(status==="ready"||status==="ran")&&React12.createElement(React12.Fragment,null,React12.createElement(ScrollArea,{vertical:!0,horizontal:!0},React12.createElement(Tabs,{key:"tabs",tabs})),React12.createElement(ActionBar,{key:"actionbar",actionItems:readyActionItems})),status==="error"&&React12.createElement(Centered,null,"The accessibility scan encountered an error.",React12.createElement("br",null),typeof error=="string"?error:JSON.stringify(error)))};addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"",type:types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React13.createElement(VisionSimulator,null)}),addons.add(PANEL_ID,{title(){let addonState=api?.getAddonState(ADDON_ID),violationsNb=addonState?.violations?.length||0,incompleteNb=addonState?.incomplete?.length||0,totalNb=violationsNb+incompleteNb;return totalNb!==0?`Accessibility (${totalNb})`:"Accessibility"},type:types.PANEL,render:({active=!0,key})=>React13.createElement(A11yContextProvider,{key,active},React13.createElement(A11YPanel,null)),paramKey:PARAM_KEY})});
1
+ import{ADDON_ID,EVENTS,PANEL_ID,PARAM_KEY,init_constants}from"./chunk-4TMP7LA6.mjs";init_constants();import React13 from"react";import{addons,types}from"@storybook/manager-api";import React2,{useState}from"react";import{Global,styled}from"@storybook/theming";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";import*as React from"react";var Filters=props=>React.createElement("svg",{...props},React.createElement("defs",null,React.createElement("filter",{id:"protanopia"},React.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"})),React.createElement("filter",{id:"protanomaly"},React.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"})),React.createElement("filter",{id:"deuteranopia"},React.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"})),React.createElement("filter",{id:"deuteranomaly"},React.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"})),React.createElement("filter",{id:"tritanopia"},React.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"})),React.createElement("filter",{id:"tritanomaly"},React.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"})),React.createElement("filter",{id:"achromatopsia"},React.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"}))));var iframeId="storybook-preview-iframe",baseList=[{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:"achromatopsia",percentage:1e-4},{name:"grayscale"}],getFilter=filterName=>filterName?filterName==="blurred vision"?"blur(2px)":filterName==="grayscale"?"grayscale(100%)":`url('#${filterName}')`:"none",Hidden=styled.div(()=>({"&, & svg":{position:"absolute",width:0,height:0}})),ColorIcon=styled.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter})=>({filter:getFilter(filter)}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`})),Column=styled.span({display:"flex",flexDirection:"column"}),Title=styled.span({textTransform:"capitalize"}),Description=styled.span(({theme})=>({fontSize:11,color:theme.textMutedColor})),getColorList=(active,set)=>[...active!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{set(null)},right:void 0,active:!1}]:[],...baseList.map(i=>{let description=i.percentage!==void 0?`${i.percentage}% of users`:void 0;return{id:i.name,title:React2.createElement(Column,null,React2.createElement(Title,null,i.name),description&&React2.createElement(Description,null,description)),onClick:()=>{set(i)},right:React2.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=useState(null);return React2.createElement(React2.Fragment,null,filter&&React2.createElement(Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),React2.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide()});return React2.createElement(TooltipLinkList,{links:colorList})},closeOnClick:!0,onDoubleClick:()=>setFilter(null)},React2.createElement(IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},React2.createElement(Icons,{icon:"accessibility"}))),React2.createElement(Hidden,null,React2.createElement(Filters,null)))};import React12,{useCallback as useCallback3,useMemo,useState as useState4}from"react";import{styled as styled9}from"@storybook/theming";import{ActionBar,Icons as Icons3,ScrollArea}from"@storybook/components";import{useChannel as useChannel2,useParameter,useStorybookState}from"@storybook/manager-api";import React10,{Fragment as Fragment2}from"react";import{Placeholder}from"@storybook/components";import React9,{Fragment,useState as useState3}from"react";import{styled as styled7}from"@storybook/theming";import{Icons as Icons2}from"@storybook/components";import React3 from"react";import{styled as styled2}from"@storybook/theming";var Wrapper=styled2.div({padding:12,marginBottom:10}),Description2=styled2.p({margin:"0 0 12px"}),Link=styled2.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),Info=({item})=>React3.createElement(Wrapper,null,React3.createElement(Description2,null,item.description),React3.createElement(Link,{href:item.helpUrl,target:"_blank"},"More info..."));import React7 from"react";import{styled as styled5}from"@storybook/theming";import React4 from"react";import{styled as styled3}from"@storybook/theming";import{Badge}from"@storybook/components";import{useResizeDetector}from"react-resize-detector";var List=styled3.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Item=styled3.div(({elementWidth})=>({flexDirection:elementWidth>407?"row":"inherit",marginBottom:elementWidth>407?6:12,display:elementWidth>407?"flex":"block"})),StyledBadge=styled3(Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Message=styled3.div({paddingLeft:6,paddingRight:23});var formatSeverityText=severity=>severity.charAt(0).toUpperCase().concat(severity.slice(1)),Rule=({rule})=>{let{ref,width}=useResizeDetector({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),badgeType=null;switch(rule.impact){case"critical":badgeType="critical";break;case"serious":badgeType="negative";break;case"moderate":badgeType="warning";break;case"minor":badgeType="neutral";break;default:break}return React4.createElement(Item,{ref,elementWidth:width||0},React4.createElement(StyledBadge,{status:badgeType},formatSeverityText(rule.impact)),React4.createElement(Message,null,rule.message))},Rules=({rules})=>React4.createElement(List,null,rules.map((rule,index)=>React4.createElement(Rule,{rule,key:index})));import React6 from"react";import{styled as styled4}from"@storybook/theming";init_constants();import*as React5 from"react";import{themes,convert}from"@storybook/theming";import{useChannel,useAddonState,useStorybookApi}from"@storybook/manager-api";import{STORY_CHANGED,STORY_RENDERED}from"@storybook/core-events";import{HIGHLIGHT}from"@storybook/addon-highlight";var colorsByType=[convert(themes.light).color.negative,convert(themes.light).color.positive,convert(themes.light).color.warning],A11yContext=React5.createContext({results:{passes:[],incomplete:[],violations:[]},setResults:()=>{},highlighted:[],toggleHighlight:()=>{},clearHighlights:()=>{},tab:0,setTab:()=>{}}),defaultResult={passes:[],incomplete:[],violations:[]},A11yContextProvider=({active,...props})=>{let[results,setResults]=useAddonState(ADDON_ID,defaultResult),[tab,setTab]=React5.useState(0),[highlighted,setHighlighted]=React5.useState([]),storyEntry=useStorybookApi().getCurrentStoryData(),handleToggleHighlight=React5.useCallback((target,highlight)=>{setHighlighted(prevHighlighted=>highlight?[...prevHighlighted,...target]:prevHighlighted.filter(t=>!target.includes(t)))},[]),handleRun=renderedStoryId=>{emit(EVENTS.REQUEST,renderedStoryId)},handleClearHighlights=React5.useCallback(()=>setHighlighted([]),[]),handleSetTab=React5.useCallback(index=>{handleClearHighlights(),setTab(index)},[]),handleReset=React5.useCallback(()=>{setTab(0),setResults(defaultResult)},[]),emit=useChannel({[STORY_RENDERED]:handleRun,[STORY_CHANGED]:handleReset});return React5.useEffect(()=>{emit(HIGHLIGHT,{elements:highlighted,color:colorsByType[tab]})},[highlighted,tab]),React5.useEffect(()=>{active&&storyEntry?.type==="story"?handleRun(storyEntry.id):handleClearHighlights()},[active,handleClearHighlights,emit,storyEntry]),active?React5.createElement(A11yContext.Provider,{value:{results,setResults,highlighted,toggleHighlight:handleToggleHighlight,clearHighlights:handleClearHighlights,tab,setTab:handleSetTab},...props}):null},useA11yContext=()=>React5.useContext(A11yContext);var Checkbox=styled4.input(({disabled})=>({cursor:disabled?"not-allowed":"pointer"}));function areAllRequiredElementsHighlighted(elementsToHighlight,highlighted){let highlightedCount=elementsToHighlight.filter(item=>highlighted.includes(item.target[0])).length;return highlightedCount===0?1:highlightedCount===elementsToHighlight.length?0:2}var HighlightToggle=({toggleId,elementsToHighlight=[]})=>{let{toggleHighlight,highlighted}=useA11yContext(),checkBoxRef=React6.useRef(null),[checkBoxState,setChecked]=React6.useState(areAllRequiredElementsHighlighted(elementsToHighlight,highlighted));React6.useEffect(()=>{let newState=areAllRequiredElementsHighlighted(elementsToHighlight,highlighted);checkBoxRef.current&&(checkBoxRef.current.indeterminate=newState===2),setChecked(newState)},[elementsToHighlight,highlighted]);let handleToggle=React6.useCallback(()=>{toggleHighlight(elementsToHighlight.map(e=>e.target[0]),checkBoxState!==0)},[elementsToHighlight,checkBoxState,toggleHighlight]);return React6.createElement(Checkbox,{ref:checkBoxRef,id:toggleId,type:"checkbox","aria-label":"Highlight result",disabled:!elementsToHighlight.length,onChange:handleToggle,checked:checkBoxState===0})},HighlightToggle_default=HighlightToggle;var Item2=styled5.li({fontWeight:600}),ItemTitle=styled5.span(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),HighlightToggleElement=styled5.span({fontWeight:"normal",alignSelf:"center",paddingRight:15,input:{margin:0,display:"block"}}),Element=({element,type})=>{let{any,all,none}=element,rules=[...any,...all,...none],highlightToggleId=`${type}-${element.target[0]}`;return React7.createElement(Item2,null,React7.createElement(ItemTitle,null,element.target[0],React7.createElement(HighlightToggleElement,null,React7.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:[element]}))),React7.createElement(Rules,{rules}))},Elements=({elements,type})=>React7.createElement("ol",null,elements.map((element,index)=>React7.createElement(Element,{element,key:index,type})));import React8 from"react";import{styled as styled6}from"@storybook/theming";var Wrapper2=styled6.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),Item3=styled6.div(({theme})=>({margin:"0 6px",padding:5,border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius})),Tags=({tags})=>React8.createElement(Wrapper2,null,tags.map(tag=>React8.createElement(Item3,{key:tag},tag)));var Wrapper3=styled7.div(({theme})=>({display:"flex",width:"100%",borderBottom:`1px solid ${theme.appBorderColor}`,"&:hover":{background:theme.background.hoverable}})),Icon=styled7(Icons2)(({theme})=>({height:10,width:10,minWidth:10,color:theme.textMutedColor,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),HeaderBar=styled7.div(({theme})=>({padding:theme.layoutMargin,paddingLeft:theme.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 ${theme.color.secondary}`}})),HighlightToggleElement2=styled7.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),Item4=props=>{let[open,onToggle]=useState3(!1),{item,type}=props,highlightToggleId=`${type}-${item.id}`;return React9.createElement(Fragment,null,React9.createElement(Wrapper3,null,React9.createElement(HeaderBar,{onClick:()=>onToggle(!open),role:"button"},React9.createElement(Icon,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${open?0:-90}deg)`}}),item.help),React9.createElement(HighlightToggleElement2,null,React9.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:item.nodes}))),open?React9.createElement(Fragment,null,React9.createElement(Info,{item,key:"info"}),React9.createElement(Elements,{elements:item.nodes,type,key:"elements"}),React9.createElement(Tags,{tags:item.tags,key:"tags"})):null)};var Report=({items,empty,type})=>React10.createElement(Fragment2,null,items&&items.length?items.map(item=>React10.createElement(Item4,{item,key:`${type}:${item.id}`,type})):React10.createElement(Placeholder,{key:"placeholder"},empty));import*as React11 from"react";import{styled as styled8}from"@storybook/theming";import{useResizeDetector as useResizeDetector2}from"react-resize-detector";var Container=styled8.div({width:"100%",position:"relative",minHeight:"100%"}),HighlightToggleLabel=styled8.label(({theme})=>({cursor:"pointer",userSelect:"none",color:theme.color.dark})),GlobalToggle=styled8.div(({elementWidth,theme})=>({cursor:"pointer",fontSize:13,lineHeight:"20px",padding:elementWidth>450?"10px 15px 10px 0":"10px 0px 10px 15px",height:"40px",border:"none",marginTop:elementWidth>450?-40:0,float:elementWidth>450?"right":"left",display:"flex",alignItems:"center",width:elementWidth>450?"auto":"100%",borderBottom:elementWidth>450?"none":`1px solid ${theme.appBorderColor}`,input:{marginLeft:10,marginRight:0,marginTop:-1,marginBottom:0}})),Item5=styled8.button(({theme})=>({textDecoration:"none",padding:"10px 15px",cursor:"pointer",fontWeight:theme.typography.weight.bold,fontSize:theme.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 ${theme.color.secondary}`}}),({active,theme})=>active?{opacity:1,borderBottom:`3px solid ${theme.color.secondary}`}:{}),TabsWrapper=styled8.div({}),List2=styled8.div(({theme})=>({boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`,background:theme.background.app,display:"flex",justifyContent:"space-between",whiteSpace:"nowrap"}));function retrieveAllNodesFromResults(items){return items.reduce((acc,item)=>acc.concat(item.nodes),[])}var Tabs=({tabs})=>{let{ref,width}=useResizeDetector2({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),{tab:activeTab,setTab}=useA11yContext(),handleToggle=React11.useCallback(event=>{setTab(parseInt(event.currentTarget.getAttribute("data-index")||"",10))},[setTab]),highlightToggleId=`${tabs[activeTab].type}-global-checkbox`,highlightLabel="Highlight results";return React11.createElement(Container,{ref},React11.createElement(List2,null,React11.createElement(TabsWrapper,null,tabs.map((tab,index)=>React11.createElement(Item5,{key:index,"data-index":index,active:activeTab===index,onClick:handleToggle},tab.label)))),tabs[activeTab].items.length>0?React11.createElement(GlobalToggle,{elementWidth:width||0},React11.createElement(HighlightToggleLabel,{htmlFor:highlightToggleId},highlightLabel),React11.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:retrieveAllNodesFromResults(tabs[activeTab].items)})):null,tabs[activeTab].panel)};init_constants();var Icon2=styled9(Icons3)({height:12,width:12,marginRight:4}),RotatingIcon=styled9(Icon2)(({theme})=>({animation:`${theme.animation.rotate360} 1s linear infinite;`})),Passes=styled9.span(({theme})=>({color:theme.color.positiveText})),Violations=styled9.span(({theme})=>({color:theme.color.negativeText})),Incomplete=styled9.span(({theme})=>({color:theme.color.warningText})),Centered=styled9.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),A11YPanel=()=>{let{manual}=useParameter("a11y",{manual:!1}),[status,setStatus]=useState4(manual?"manual":"initial"),[error,setError]=React12.useState(void 0),{setResults,results}=useA11yContext(),{storyId}=useStorybookState();React12.useEffect(()=>{setStatus(manual?"manual":"initial")},[manual]);let handleResult=axeResults=>{setStatus("ran"),setResults(axeResults),setTimeout(()=>{status==="ran"&&setStatus("ready")},900)},handleRun=useCallback3(()=>{setStatus("running")},[]),handleError=useCallback3(err=>{setStatus("error"),setError(err)},[]),emit=useChannel2({[EVENTS.RUNNING]:handleRun,[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError}),handleManual=useCallback3(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId)},[storyId]),manualActionItems=useMemo(()=>[{title:"Run test",onClick:handleManual}],[handleManual]),readyActionItems=useMemo(()=>[{title:status==="ready"?"Rerun tests":React12.createElement(React12.Fragment,null,React12.createElement(Icon2,{icon:"check"})," Tests completed"),onClick:handleManual}],[status,handleManual]),tabs=useMemo(()=>{let{passes,incomplete,violations}=results;return[{label:React12.createElement(Violations,null,violations.length," Violations"),panel:React12.createElement(Report,{items:violations,type:0,empty:"No accessibility violations found."}),items:violations,type:0},{label:React12.createElement(Passes,null,passes.length," Passes"),panel:React12.createElement(Report,{items:passes,type:1,empty:"No accessibility checks passed."}),items:passes,type:1},{label:React12.createElement(Incomplete,null,incomplete.length," Incomplete"),panel:React12.createElement(Report,{items:incomplete,type:2,empty:"No accessibility checks incomplete."}),items:incomplete,type:2}]},[results]);return React12.createElement(React12.Fragment,null,status==="initial"&&React12.createElement(Centered,null,"Initializing..."),status==="manual"&&React12.createElement(React12.Fragment,null,React12.createElement(Centered,null,"Manually run the accessibility scan."),React12.createElement(ActionBar,{key:"actionbar",actionItems:manualActionItems})),status==="running"&&React12.createElement(Centered,null,React12.createElement(RotatingIcon,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(status==="ready"||status==="ran")&&React12.createElement(React12.Fragment,null,React12.createElement(ScrollArea,{vertical:!0,horizontal:!0},React12.createElement(Tabs,{key:"tabs",tabs})),React12.createElement(ActionBar,{key:"actionbar",actionItems:readyActionItems})),status==="error"&&React12.createElement(Centered,null,"The accessibility scan encountered an error.",React12.createElement("br",null),typeof error=="string"?error:JSON.stringify(error)))};addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"",type:types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React13.createElement(VisionSimulator,null)}),addons.add(PANEL_ID,{title(){let addonState=api?.getAddonState(ADDON_ID),violationsNb=addonState?.violations?.length||0,incompleteNb=addonState?.incomplete?.length||0,totalNb=violationsNb+incompleteNb;return totalNb!==0?`Accessibility (${totalNb})`:"Accessibility"},type:types.PANEL,render:({active=!0,key})=>React13.createElement(A11yContextProvider,{key,active},React13.createElement(A11YPanel,null)),paramKey:PARAM_KEY})});
package/dist/preview.js CHANGED
@@ -1 +1 @@
1
- "use strict";var w=Object.create;var u=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,n,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of _(o))!O.call(t,e)&&e!==n&&u(t,e,{get:()=>o[e],enumerable:!(c=T(o,e))||c.enumerable});return t};var m=(t,o,n)=>(n=t!=null?w(h(t)):{},$(o||!t||!t.__esModule?u(n,"default",{value:t,enumerable:!0}):n,t));var a,G,x,L,b,D,q,r,R=U(()=>{"use strict";a="storybook/a11y",G=`${a}/panel`,x=`${a}/result`,L=`${a}/request`,b=`${a}/running`,D=`${a}/error`,q=`${a}/manual`,r={RESULT:x,REQUEST:L,RUNNING:b,ERROR:D,MANUAL:q}});var N=P((Q,s)=>{"use strict";var E=m(require("global")),y=require("@storybook/preview-api");R();var{document:M,window:Y}=E.default;s&&s.hot&&s.hot.decline&&s.hot.decline();var i=y.addons.getChannel(),l=!1,f,k=async t=>{let{manual:o}=await g(t);o||await p(t)},p=async t=>{f=t;try{let o=await g(t);if(!l){l=!0,i.emit(r.RUNNING);let n=(await import("axe-core")).default,{element:c="#storybook-root",config:e,options:S={}}=o,d=M.querySelector(c);n.reset(),e&&n.configure(e);let A=await n.run(d,S);f===t?i.emit(r.RESULT,A):(l=!1,p(f))}}catch(o){i.emit(r.ERROR,o)}finally{l=!1}},g=async t=>{let{parameters:o}=await Y.__STORYBOOK_STORY_STORE__.loadStory({storyId:t})||{};return o.a11y||{config:{},options:{}}};i.on(r.REQUEST,k);i.on(r.MANUAL,p)});var V=m(N());
1
+ "use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var ADDON_ID,PANEL_ID,RESULT,REQUEST,RUNNING,ERROR,MANUAL,EVENTS,init_constants=__esm({"src/constants.ts"(){"use strict";ADDON_ID="storybook/a11y",PANEL_ID=`${ADDON_ID}/panel`,RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`,EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL}}});var require_a11yRunner=__commonJS({"src/a11yRunner.ts"(exports,module2){"use strict";var import_global=require("@storybook/global"),import_preview_api=require("@storybook/preview-api");init_constants();var{document,window:globalWindow}=import_global.global;module2&&module2.hot&&module2.hot.decline&&module2.hot.decline();var channel=import_preview_api.addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId)},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import("axe-core")).default,{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);if(!htmlElement)return;axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options);activeStoryId===storyId?channel.emit(EVENTS.RESULT,result):(active=!1,run(activeStoryId))}}catch(error){channel.emit(EVENTS.ERROR,error)}finally{active=!1}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run)}});var import_a11yRunner=__toESM(require_a11yRunner());
package/dist/preview.mjs CHANGED
@@ -1 +1 @@
1
- import{EVENTS,__commonJS,__toESM,init_constants}from"./chunk-4TMP7LA6.mjs";import global from"global";import{addons}from"@storybook/preview-api";var require_a11yRunner=__commonJS({"src/a11yRunner.ts"(exports,module){"use strict";init_constants();var{document,window:globalWindow}=global;module&&module.hot&&module.hot.decline&&module.hot.decline();var channel=addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId)},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import("axe-core")).default,{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options);activeStoryId===storyId?channel.emit(EVENTS.RESULT,result):(active=!1,run(activeStoryId))}}catch(error){channel.emit(EVENTS.ERROR,error)}finally{active=!1}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run)}});var import_a11yRunner=__toESM(require_a11yRunner());
1
+ import{EVENTS,__commonJS,__toESM,init_constants}from"./chunk-4TMP7LA6.mjs";import{global}from"@storybook/global";import{addons}from"@storybook/preview-api";var require_a11yRunner=__commonJS({"src/a11yRunner.ts"(exports,module){"use strict";init_constants();var{document,window:globalWindow}=global;module&&module.hot&&module.hot.decline&&module.hot.decline();var channel=addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId)},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import("axe-core")).default,{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);if(!htmlElement)return;axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options);activeStoryId===storyId?channel.emit(EVENTS.RESULT,result):(active=!1,run(activeStoryId))}}catch(error){channel.emit(EVENTS.ERROR,error)}finally{active=!1}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run)}});var import_a11yRunner=__toESM(require_a11yRunner());
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-a11y",
3
- "version": "7.0.0-beta.2",
3
+ "version": "7.0.0-beta.20",
4
4
  "description": "Test component compliance with web accessibility standards",
5
5
  "keywords": [
6
6
  "a11y",
@@ -27,6 +27,7 @@
27
27
  "license": "MIT",
28
28
  "exports": {
29
29
  ".": {
30
+ "node": "./dist/index.js",
30
31
  "require": "./dist/index.js",
31
32
  "import": "./dist/index.mjs",
32
33
  "types": "./dist/index.d.ts"
@@ -62,22 +63,23 @@
62
63
  "prep": "../../../scripts/prepare/bundle.ts"
63
64
  },
64
65
  "dependencies": {
65
- "@storybook/addon-highlight": "7.0.0-beta.2",
66
- "@storybook/channels": "7.0.0-beta.2",
67
- "@storybook/client-logger": "7.0.0-beta.2",
68
- "@storybook/components": "7.0.0-beta.2",
69
- "@storybook/core-events": "7.0.0-beta.2",
70
- "@storybook/manager-api": "7.0.0-beta.2",
71
- "@storybook/preview-api": "7.0.0-beta.2",
72
- "@storybook/theming": "7.0.0-beta.2",
73
- "@storybook/types": "7.0.0-beta.2",
66
+ "@storybook/addon-highlight": "7.0.0-beta.20",
67
+ "@storybook/channels": "7.0.0-beta.20",
68
+ "@storybook/client-logger": "7.0.0-beta.20",
69
+ "@storybook/components": "7.0.0-beta.20",
70
+ "@storybook/core-events": "7.0.0-beta.20",
71
+ "@storybook/global": "^5.0.0",
72
+ "@storybook/manager-api": "7.0.0-beta.20",
73
+ "@storybook/preview-api": "7.0.0-beta.20",
74
+ "@storybook/theming": "7.0.0-beta.20",
75
+ "@storybook/types": "7.0.0-beta.20",
74
76
  "axe-core": "^4.2.0",
75
- "global": "^4.4.0",
76
77
  "lodash": "^4.17.21",
77
- "react-sizeme": "^3.0.1"
78
+ "react-resize-detector": "^7.1.2"
78
79
  },
79
80
  "devDependencies": {
80
81
  "@testing-library/react": "^11.2.2",
82
+ "resize-observer-polyfill": "^1.5.1",
81
83
  "typescript": "~4.9.3"
82
84
  },
83
85
  "peerDependencies": {
@@ -102,7 +104,7 @@
102
104
  "./src/preview.tsx"
103
105
  ]
104
106
  },
105
- "gitHead": "66a0d588184add900c48d49f3a62743fa9cc5185",
107
+ "gitHead": "22701aedf564e467511887eb041f32ae0c96bcde",
106
108
  "storybook": {
107
109
  "displayName": "Accessibility",
108
110
  "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",