@storybook/addon-a11y 7.0.0-alpha.7 → 7.0.0-beta.0

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
 
@@ -175,7 +175,7 @@ export default {
   parameters: {
     a11y: {
       // optional selector which element to inspect
-      element: '#root',
+      element: '#storybook-root',
       // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
       config: {},
       // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)

package/dist/chunk-4TMP7LA6.mjs

@@ -0,0 +1 @@
+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,PARAM_KEY,RESULT,REQUEST,RUNNING,ERROR,MANUAL,EVENTS,init_constants=__esm({"src/constants.ts"(){"use strict";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}}});export{__commonJS,__toESM,ADDON_ID,PANEL_ID,PARAM_KEY,EVENTS,init_constants};

package/dist/{types/params.d.ts → index.d.ts}

@@ -1,12 +1,17 @@
 import { ElementContext, Spec, RunOptions } from 'axe-core';
-export interface Setup {
+
+declare const PARAM_KEY = "a11y";
+
+interface Setup {
     element?: ElementContext;
     config: Spec;
     options: RunOptions;
 }
-export interface A11yParameters {
+interface A11yParameters {
     element?: ElementContext;
     config?: Spec;
     options?: RunOptions;
     manual?: boolean;
 }
+
+export { A11yParameters, PARAM_KEY, Setup };

package/dist/index.js

@@ -0,0 +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});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{PARAM_KEY,init_constants}from"./chunk-4TMP7LA6.mjs";init_constants();module&&module.hot&&module.hot.decline&&module.hot.decline();export{PARAM_KEY};

package/dist/manager.d.ts

@@ -0,0 +1 @@
+

package/dist/manager.js

@@ -0,0 +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})});

package/dist/manager.mjs

@@ -0,0 +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})});

package/dist/preview.d.ts

@@ -0,0 +1 @@
+

package/dist/preview.js

@@ -0,0 +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());

package/dist/preview.mjs

@@ -0,0 +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());

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

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.7",
+  "version": "7.0.0-beta.0",
   "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": {
+      "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,27 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.7",
-    "@storybook/addons": "7.0.0-alpha.7",
-    "@storybook/api": "7.0.0-alpha.7",
-    "@storybook/channels": "7.0.0-alpha.7",
-    "@storybook/client-logger": "7.0.0-alpha.7",
-    "@storybook/components": "7.0.0-alpha.7",
-    "@storybook/core-events": "7.0.0-alpha.7",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "7.0.0-alpha.7",
+    "@storybook/addon-highlight": "7.0.0-beta.0",
+    "@storybook/channels": "7.0.0-beta.0",
+    "@storybook/client-logger": "7.0.0-beta.0",
+    "@storybook/components": "7.0.0-beta.0",
+    "@storybook/core-events": "7.0.0-beta.0",
+    "@storybook/manager-api": "7.0.0-beta.0",
+    "@storybook/preview-api": "7.0.0-beta.0",
+    "@storybook/theming": "7.0.0-beta.0",
+    "@storybook/types": "7.0.0-beta.0",
     "axe-core": "^4.2.0",
-    "core-js": "^3.8.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
-    "react-sizeme": "^3.0.1",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
+    "react-sizeme": "^3.0.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.2"
+    "@testing-library/react": "^11.2.2",
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -73,7 +95,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d334cabd251cd0ed8b845a87707dc84f007d4074",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preview.tsx"
+    ]
+  },
+  "gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70",
   "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/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;