npm - @storybook/addon-a11y - Versions diffs - 7.2.3 → 7.3.0-alpha.0 - Mend

@storybook/addon-a11y 7.2.3 → 7.3.0-alpha.0

Files changed (3) hide show

package/dist/manager.js CHANGED Viewed

	@@ -1 +1 @@
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"),import_components6=require("@storybook/components");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",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide()});return import_react.default.createElement(import_components.TooltipLinkList,{links:colorList})},closeOnOutsideClick:!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)))};var Title2=()=>{var _a,_b;let[addonState]=(0,import_manager_api3.useAddonState)(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,count=violationsNb+incompleteNb;return import_react10.default.createElement("div",null,import_react10.default.createElement(import_components6.Spaced,{col:1},import_react10.default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Accessibility"),count===0?"":import_react10.default.createElement(import_components6.Badge,{status:"neutral"},count)))};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:Title2,type:import_manager_api3.types.PANEL,render:({active=!0})=>import_react10.default.createElement(A11yContextProvider,{active},import_react10.default.createElement(A11YPanel,null)),paramKey:PARAM_KEY})});
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"),import_components6=require("@storybook/components");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"),import_experimental=require("@storybook/components/experimental");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",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide()});return import_react.default.createElement(import_components.TooltipLinkList,{links:colorList})},closeOnOutsideClick:!0,onDoubleClick:()=>setFilter(null)},import_react.default.createElement(import_components.IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},import_react.default.createElement(import_experimental.Icon.Accessibility,null))),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}})),Icon2=(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(Icon2,{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 Icon3=(0,import_theming10.styled)(import_components5.Icons)({height:12,width:12,marginRight:4}),RotatingIcon=(0,import_theming10.styled)(Icon3)(({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(Icon3,{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)))};var Title2=()=>{var _a,_b;let[addonState]=(0,import_manager_api3.useAddonState)(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,count=violationsNb+incompleteNb;return import_react10.default.createElement("div",null,import_react10.default.createElement(import_components6.Spaced,{col:1},import_react10.default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Accessibility"),count===0?"":import_react10.default.createElement(import_components6.Badge,{status:"neutral"},count)))};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:Title2,type:import_manager_api3.types.PANEL,render:({active=!0})=>import_react10.default.createElement(A11yContextProvider,{active},import_react10.default.createElement(A11YPanel,null)),paramKey:PARAM_KEY})});

package/dist/manager.mjs CHANGED Viewed

@@ -4,8 +4,9 @@ import React12__default, { useState, useCallback, useMemo, Fragment } from 'reac
 import { addons, types, useAddonState, useStorybookApi, useChannel, useParameter, useStorybookState } from '@storybook/manager-api';
 import { Badge, Icons, WithTooltip, TooltipLinkList, IconButton, ActionBar, ScrollArea, Spaced, Placeholder } from '@storybook/components';
 import { styled, convert, themes, Global } from '@storybook/theming';
+import { Icon } from '@storybook/components/experimental';
 import { useResizeDetector } from 'react-resize-detector';
 import { STORY_RENDERED, STORY_CHANGED } from '@storybook/core-events';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
-var Filters=props=>React12.createElement("svg",{...props},React12.createElement("defs",null,React12.createElement("filter",{id:"protanopia"},React12.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"})),React12.createElement("filter",{id:"protanomaly"},React12.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"})),React12.createElement("filter",{id:"deuteranopia"},React12.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"})),React12.createElement("filter",{id:"deuteranomaly"},React12.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"})),React12.createElement("filter",{id:"tritanopia"},React12.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"})),React12.createElement("filter",{id:"tritanomaly"},React12.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"})),React12.createElement("filter",{id:"achromatopsia"},React12.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:React12__default.createElement(Column,null,React12__default.createElement(Title,null,i.name),description&&React12__default.createElement(Description,null,description)),onClick:()=>{set(i);},right:React12__default.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=useState(null);return React12__default.createElement(React12__default.Fragment,null,filter&&React12__default.createElement(Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),React12__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide();});return React12__default.createElement(TooltipLinkList,{links:colorList})},closeOnOutsideClick:!0,onDoubleClick:()=>setFilter(null)},React12__default.createElement(IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},React12__default.createElement(Icons,{icon:"accessibility"}))),React12__default.createElement(Hidden,null,React12__default.createElement(Filters,null)))};var Wrapper=styled.div({padding:12,marginBottom:10}),Description2=styled.p({margin:"0 0 12px"}),Link=styled.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),Info=({item})=>React12__default.createElement(Wrapper,null,React12__default.createElement(Description2,null,item.description),React12__default.createElement(Link,{href:item.helpUrl,target:"_blank"},"More info..."));var List=styled.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Item=styled.div(({elementWidth})=>({flexDirection:elementWidth>407?"row":"inherit",marginBottom:elementWidth>407?6:12,display:elementWidth>407?"flex":"block"})),StyledBadge=styled(Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Message=styled.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;}return React12__default.createElement(Item,{ref,elementWidth:width||0},React12__default.createElement(StyledBadge,{status:badgeType},formatSeverityText(rule.impact)),React12__default.createElement(Message,null,rule.message))},Rules=({rules})=>React12__default.createElement(List,null,rules.map((rule,index)=>React12__default.createElement(Rule,{rule,key:index})));var colorsByType=[convert(themes.light).color.negative,convert(themes.light).color.positive,convert(themes.light).color.warning],A11yContext=React12.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]=React12.useState(0),[highlighted,setHighlighted]=React12.useState([]),storyEntry=useStorybookApi().getCurrentStoryData(),handleToggleHighlight=React12.useCallback((target,highlight)=>{setHighlighted(prevHighlighted=>highlight?[...prevHighlighted,...target]:prevHighlighted.filter(t=>!target.includes(t)));},[]),handleRun=renderedStoryId=>{emit(EVENTS.REQUEST,renderedStoryId);},handleClearHighlights=React12.useCallback(()=>setHighlighted([]),[]),handleSetTab=React12.useCallback(index=>{handleClearHighlights(),setTab(index);},[]),handleReset=React12.useCallback(()=>{setTab(0),setResults(defaultResult);},[]),emit=useChannel({[STORY_RENDERED]:handleRun,[STORY_CHANGED]:handleReset});return React12.useEffect(()=>{emit(HIGHLIGHT,{elements:highlighted,color:colorsByType[tab]});},[highlighted,tab]),React12.useEffect(()=>{active&&storyEntry?.type==="story"?handleRun(storyEntry.id):handleClearHighlights();},[active,handleClearHighlights,emit,storyEntry]),active?React12.createElement(A11yContext.Provider,{value:{results,setResults,highlighted,toggleHighlight:handleToggleHighlight,clearHighlights:handleClearHighlights,tab,setTab:handleSetTab},...props}):null},useA11yContext=()=>React12.useContext(A11yContext);var Checkbox=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=React12__default.useRef(null),[checkBoxState,setChecked]=React12__default.useState(areAllRequiredElementsHighlighted(elementsToHighlight,highlighted));React12__default.useEffect(()=>{let newState=areAllRequiredElementsHighlighted(elementsToHighlight,highlighted);checkBoxRef.current&&(checkBoxRef.current.indeterminate=newState===2),setChecked(newState);},[elementsToHighlight,highlighted]);let handleToggle=React12__default.useCallback(()=>{toggleHighlight(elementsToHighlight.map(e=>e.target[0]),checkBoxState!==0);},[elementsToHighlight,checkBoxState,toggleHighlight]);return React12__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=styled.li({fontWeight:600}),ItemTitle=styled.span(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),HighlightToggleElement=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 React12__default.createElement(Item2,null,React12__default.createElement(ItemTitle,null,element.target[0],React12__default.createElement(HighlightToggleElement,null,React12__default.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:[element]}))),React12__default.createElement(Rules,{rules}))},Elements=({elements,type})=>React12__default.createElement("ol",null,elements.map((element,index)=>React12__default.createElement(Element,{element,key:index,type})));var Wrapper2=styled.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),Item3=styled.div(({theme})=>({margin:"0 6px",padding:5,border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius})),Tags=({tags})=>React12__default.createElement(Wrapper2,null,tags.map(tag=>React12__default.createElement(Item3,{key:tag},tag)));var Wrapper3=styled.div(({theme})=>({display:"flex",width:"100%",borderBottom:`1px solid ${theme.appBorderColor}`,"&:hover":{background:theme.background.hoverable}})),Icon=styled(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=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=styled.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),Item4=props=>{let[open,onToggle]=useState(!1),{item,type}=props,highlightToggleId=`${type}-${item.id}`;return React12__default.createElement(Fragment,null,React12__default.createElement(Wrapper3,null,React12__default.createElement(HeaderBar,{onClick:()=>onToggle(!open),role:"button"},React12__default.createElement(Icon,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${open?0:-90}deg)`}}),item.help),React12__default.createElement(HighlightToggleElement2,null,React12__default.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:item.nodes}))),open?React12__default.createElement(Fragment,null,React12__default.createElement(Info,{item,key:"info"}),React12__default.createElement(Elements,{elements:item.nodes,type,key:"elements"}),React12__default.createElement(Tags,{tags:item.tags,key:"tags"})):null)};var Report=({items,empty,type})=>React12__default.createElement(Fragment,null,items&&items.length?items.map(item=>React12__default.createElement(Item4,{item,key:`${type}:${item.id}`,type})):React12__default.createElement(Placeholder,{key:"placeholder"},empty));var Container=styled.div({width:"100%",position:"relative",minHeight:"100%"}),HighlightToggleLabel=styled.label(({theme})=>({cursor:"pointer",userSelect:"none",color:theme.color.dark})),GlobalToggle=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=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=styled.div({}),List2=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}=useResizeDetector({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),{tab:activeTab,setTab}=useA11yContext(),handleToggle=React12.useCallback(event=>{setTab(parseInt(event.currentTarget.getAttribute("data-index")||"",10));},[setTab]),highlightToggleId=`${tabs[activeTab].type}-global-checkbox`,highlightLabel="Highlight results";return React12.createElement(Container,{ref},React12.createElement(List2,null,React12.createElement(TabsWrapper,null,tabs.map((tab,index)=>React12.createElement(Item5,{key:index,"data-index":index,active:activeTab===index,onClick:handleToggle},tab.label)))),tabs[activeTab].items.length>0?React12.createElement(GlobalToggle,{elementWidth:width||0},React12.createElement(HighlightToggleLabel,{htmlFor:highlightToggleId},highlightLabel),React12.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:retrieveAllNodesFromResults(tabs[activeTab].items)})):null,tabs[activeTab].panel)};var Icon2=styled(Icons)({height:12,width:12,marginRight:4}),RotatingIcon=styled(Icon2)(({theme})=>({animation:`${theme.animation.rotate360} 1s linear infinite;`})),Passes=styled.span(({theme})=>({color:theme.color.positiveText})),Violations=styled.span(({theme})=>({color:theme.color.negativeText})),Incomplete=styled.span(({theme})=>({color:theme.color.warningText})),Centered=styled.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),A11YPanel=()=>{let{manual}=useParameter("a11y",{manual:!1}),[status,setStatus]=useState(manual?"manual":"initial"),[error,setError]=React12__default.useState(void 0),{setResults,results}=useA11yContext(),{storyId}=useStorybookState();React12__default.useEffect(()=>{setStatus(manual?"manual":"initial");},[manual]);let handleResult=axeResults=>{setStatus("ran"),setResults(axeResults),setTimeout(()=>{status==="ran"&&setStatus("ready");},900);},handleRun=useCallback(()=>{setStatus("running");},[]),handleError=useCallback(err=>{setStatus("error"),setError(err);},[]),emit=useChannel({[EVENTS.RUNNING]:handleRun,[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError}),handleManual=useCallback(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId);},[storyId]),manualActionItems=useMemo(()=>[{title:"Run test",onClick:handleManual}],[handleManual]),readyActionItems=useMemo(()=>[{title:status==="ready"?"Rerun tests":React12__default.createElement(React12__default.Fragment,null,React12__default.createElement(Icon2,{icon:"check"})," Tests completed"),onClick:handleManual}],[status,handleManual]),tabs=useMemo(()=>{let{passes,incomplete,violations}=results;return [{label:React12__default.createElement(Violations,null,violations.length," Violations"),panel:React12__default.createElement(Report,{items:violations,type:0,empty:"No accessibility violations found."}),items:violations,type:0},{label:React12__default.createElement(Passes,null,passes.length," Passes"),panel:React12__default.createElement(Report,{items:passes,type:1,empty:"No accessibility checks passed."}),items:passes,type:1},{label:React12__default.createElement(Incomplete,null,incomplete.length," Incomplete"),panel:React12__default.createElement(Report,{items:incomplete,type:2,empty:"No accessibility checks incomplete."}),items:incomplete,type:2}]},[results]);return React12__default.createElement(React12__default.Fragment,null,status==="initial"&&React12__default.createElement(Centered,null,"Initializing..."),status==="manual"&&React12__default.createElement(React12__default.Fragment,null,React12__default.createElement(Centered,null,"Manually run the accessibility scan."),React12__default.createElement(ActionBar,{key:"actionbar",actionItems:manualActionItems})),status==="running"&&React12__default.createElement(Centered,null,React12__default.createElement(RotatingIcon,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(status==="ready"||status==="ran")&&React12__default.createElement(React12__default.Fragment,null,React12__default.createElement(ScrollArea,{vertical:!0,horizontal:!0},React12__default.createElement(Tabs,{key:"tabs",tabs})),React12__default.createElement(ActionBar,{key:"actionbar",actionItems:readyActionItems})),status==="error"&&React12__default.createElement(Centered,null,"The accessibility scan encountered an error.",React12__default.createElement("br",null),typeof error=="string"?error:JSON.stringify(error)))};var Title2=()=>{let[addonState]=useAddonState(ADDON_ID),violationsNb=addonState?.violations?.length||0,incompleteNb=addonState?.incomplete?.length||0,count=violationsNb+incompleteNb;return React12__default.createElement("div",null,React12__default.createElement(Spaced,{col:1},React12__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Accessibility"),count===0?"":React12__default.createElement(Badge,{status:"neutral"},count)))};addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"",type:types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React12__default.createElement(VisionSimulator,null)}),addons.add(PANEL_ID,{title:Title2,type:types.PANEL,render:({active=!0})=>React12__default.createElement(A11yContextProvider,{active},React12__default.createElement(A11YPanel,null)),paramKey:PARAM_KEY});});
+var Filters=props=>React12.createElement("svg",{...props},React12.createElement("defs",null,React12.createElement("filter",{id:"protanopia"},React12.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"})),React12.createElement("filter",{id:"protanomaly"},React12.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"})),React12.createElement("filter",{id:"deuteranopia"},React12.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"})),React12.createElement("filter",{id:"deuteranomaly"},React12.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"})),React12.createElement("filter",{id:"tritanopia"},React12.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"})),React12.createElement("filter",{id:"tritanomaly"},React12.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"})),React12.createElement("filter",{id:"achromatopsia"},React12.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:React12__default.createElement(Column,null,React12__default.createElement(Title,null,i.name),description&&React12__default.createElement(Description,null,description)),onClick:()=>{set(i);},right:React12__default.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=useState(null);return React12__default.createElement(React12__default.Fragment,null,filter&&React12__default.createElement(Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),React12__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide();});return React12__default.createElement(TooltipLinkList,{links:colorList})},closeOnOutsideClick:!0,onDoubleClick:()=>setFilter(null)},React12__default.createElement(IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},React12__default.createElement(Icon.Accessibility,null))),React12__default.createElement(Hidden,null,React12__default.createElement(Filters,null)))};var Wrapper=styled.div({padding:12,marginBottom:10}),Description2=styled.p({margin:"0 0 12px"}),Link=styled.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),Info=({item})=>React12__default.createElement(Wrapper,null,React12__default.createElement(Description2,null,item.description),React12__default.createElement(Link,{href:item.helpUrl,target:"_blank"},"More info..."));var List=styled.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Item=styled.div(({elementWidth})=>({flexDirection:elementWidth>407?"row":"inherit",marginBottom:elementWidth>407?6:12,display:elementWidth>407?"flex":"block"})),StyledBadge=styled(Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Message=styled.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;}return React12__default.createElement(Item,{ref,elementWidth:width||0},React12__default.createElement(StyledBadge,{status:badgeType},formatSeverityText(rule.impact)),React12__default.createElement(Message,null,rule.message))},Rules=({rules})=>React12__default.createElement(List,null,rules.map((rule,index)=>React12__default.createElement(Rule,{rule,key:index})));var colorsByType=[convert(themes.light).color.negative,convert(themes.light).color.positive,convert(themes.light).color.warning],A11yContext=React12.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]=React12.useState(0),[highlighted,setHighlighted]=React12.useState([]),storyEntry=useStorybookApi().getCurrentStoryData(),handleToggleHighlight=React12.useCallback((target,highlight)=>{setHighlighted(prevHighlighted=>highlight?[...prevHighlighted,...target]:prevHighlighted.filter(t=>!target.includes(t)));},[]),handleRun=renderedStoryId=>{emit(EVENTS.REQUEST,renderedStoryId);},handleClearHighlights=React12.useCallback(()=>setHighlighted([]),[]),handleSetTab=React12.useCallback(index=>{handleClearHighlights(),setTab(index);},[]),handleReset=React12.useCallback(()=>{setTab(0),setResults(defaultResult);},[]),emit=useChannel({[STORY_RENDERED]:handleRun,[STORY_CHANGED]:handleReset});return React12.useEffect(()=>{emit(HIGHLIGHT,{elements:highlighted,color:colorsByType[tab]});},[highlighted,tab]),React12.useEffect(()=>{active&&storyEntry?.type==="story"?handleRun(storyEntry.id):handleClearHighlights();},[active,handleClearHighlights,emit,storyEntry]),active?React12.createElement(A11yContext.Provider,{value:{results,setResults,highlighted,toggleHighlight:handleToggleHighlight,clearHighlights:handleClearHighlights,tab,setTab:handleSetTab},...props}):null},useA11yContext=()=>React12.useContext(A11yContext);var Checkbox=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=React12__default.useRef(null),[checkBoxState,setChecked]=React12__default.useState(areAllRequiredElementsHighlighted(elementsToHighlight,highlighted));React12__default.useEffect(()=>{let newState=areAllRequiredElementsHighlighted(elementsToHighlight,highlighted);checkBoxRef.current&&(checkBoxRef.current.indeterminate=newState===2),setChecked(newState);},[elementsToHighlight,highlighted]);let handleToggle=React12__default.useCallback(()=>{toggleHighlight(elementsToHighlight.map(e=>e.target[0]),checkBoxState!==0);},[elementsToHighlight,checkBoxState,toggleHighlight]);return React12__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=styled.li({fontWeight:600}),ItemTitle=styled.span(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),HighlightToggleElement=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 React12__default.createElement(Item2,null,React12__default.createElement(ItemTitle,null,element.target[0],React12__default.createElement(HighlightToggleElement,null,React12__default.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:[element]}))),React12__default.createElement(Rules,{rules}))},Elements=({elements,type})=>React12__default.createElement("ol",null,elements.map((element,index)=>React12__default.createElement(Element,{element,key:index,type})));var Wrapper2=styled.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),Item3=styled.div(({theme})=>({margin:"0 6px",padding:5,border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius})),Tags=({tags})=>React12__default.createElement(Wrapper2,null,tags.map(tag=>React12__default.createElement(Item3,{key:tag},tag)));var Wrapper3=styled.div(({theme})=>({display:"flex",width:"100%",borderBottom:`1px solid ${theme.appBorderColor}`,"&:hover":{background:theme.background.hoverable}})),Icon2=styled(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=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=styled.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),Item4=props=>{let[open,onToggle]=useState(!1),{item,type}=props,highlightToggleId=`${type}-${item.id}`;return React12__default.createElement(Fragment,null,React12__default.createElement(Wrapper3,null,React12__default.createElement(HeaderBar,{onClick:()=>onToggle(!open),role:"button"},React12__default.createElement(Icon2,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${open?0:-90}deg)`}}),item.help),React12__default.createElement(HighlightToggleElement2,null,React12__default.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:item.nodes}))),open?React12__default.createElement(Fragment,null,React12__default.createElement(Info,{item,key:"info"}),React12__default.createElement(Elements,{elements:item.nodes,type,key:"elements"}),React12__default.createElement(Tags,{tags:item.tags,key:"tags"})):null)};var Report=({items,empty,type})=>React12__default.createElement(Fragment,null,items&&items.length?items.map(item=>React12__default.createElement(Item4,{item,key:`${type}:${item.id}`,type})):React12__default.createElement(Placeholder,{key:"placeholder"},empty));var Container=styled.div({width:"100%",position:"relative",minHeight:"100%"}),HighlightToggleLabel=styled.label(({theme})=>({cursor:"pointer",userSelect:"none",color:theme.color.dark})),GlobalToggle=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=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=styled.div({}),List2=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}=useResizeDetector({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),{tab:activeTab,setTab}=useA11yContext(),handleToggle=React12.useCallback(event=>{setTab(parseInt(event.currentTarget.getAttribute("data-index")||"",10));},[setTab]),highlightToggleId=`${tabs[activeTab].type}-global-checkbox`,highlightLabel="Highlight results";return React12.createElement(Container,{ref},React12.createElement(List2,null,React12.createElement(TabsWrapper,null,tabs.map((tab,index)=>React12.createElement(Item5,{key:index,"data-index":index,active:activeTab===index,onClick:handleToggle},tab.label)))),tabs[activeTab].items.length>0?React12.createElement(GlobalToggle,{elementWidth:width||0},React12.createElement(HighlightToggleLabel,{htmlFor:highlightToggleId},highlightLabel),React12.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:retrieveAllNodesFromResults(tabs[activeTab].items)})):null,tabs[activeTab].panel)};var Icon3=styled(Icons)({height:12,width:12,marginRight:4}),RotatingIcon=styled(Icon3)(({theme})=>({animation:`${theme.animation.rotate360} 1s linear infinite;`})),Passes=styled.span(({theme})=>({color:theme.color.positiveText})),Violations=styled.span(({theme})=>({color:theme.color.negativeText})),Incomplete=styled.span(({theme})=>({color:theme.color.warningText})),Centered=styled.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),A11YPanel=()=>{let{manual}=useParameter("a11y",{manual:!1}),[status,setStatus]=useState(manual?"manual":"initial"),[error,setError]=React12__default.useState(void 0),{setResults,results}=useA11yContext(),{storyId}=useStorybookState();React12__default.useEffect(()=>{setStatus(manual?"manual":"initial");},[manual]);let handleResult=axeResults=>{setStatus("ran"),setResults(axeResults),setTimeout(()=>{status==="ran"&&setStatus("ready");},900);},handleRun=useCallback(()=>{setStatus("running");},[]),handleError=useCallback(err=>{setStatus("error"),setError(err);},[]),emit=useChannel({[EVENTS.RUNNING]:handleRun,[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError}),handleManual=useCallback(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId);},[storyId]),manualActionItems=useMemo(()=>[{title:"Run test",onClick:handleManual}],[handleManual]),readyActionItems=useMemo(()=>[{title:status==="ready"?"Rerun tests":React12__default.createElement(React12__default.Fragment,null,React12__default.createElement(Icon3,{icon:"check"})," Tests completed"),onClick:handleManual}],[status,handleManual]),tabs=useMemo(()=>{let{passes,incomplete,violations}=results;return [{label:React12__default.createElement(Violations,null,violations.length," Violations"),panel:React12__default.createElement(Report,{items:violations,type:0,empty:"No accessibility violations found."}),items:violations,type:0},{label:React12__default.createElement(Passes,null,passes.length," Passes"),panel:React12__default.createElement(Report,{items:passes,type:1,empty:"No accessibility checks passed."}),items:passes,type:1},{label:React12__default.createElement(Incomplete,null,incomplete.length," Incomplete"),panel:React12__default.createElement(Report,{items:incomplete,type:2,empty:"No accessibility checks incomplete."}),items:incomplete,type:2}]},[results]);return React12__default.createElement(React12__default.Fragment,null,status==="initial"&&React12__default.createElement(Centered,null,"Initializing..."),status==="manual"&&React12__default.createElement(React12__default.Fragment,null,React12__default.createElement(Centered,null,"Manually run the accessibility scan."),React12__default.createElement(ActionBar,{key:"actionbar",actionItems:manualActionItems})),status==="running"&&React12__default.createElement(Centered,null,React12__default.createElement(RotatingIcon,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(status==="ready"||status==="ran")&&React12__default.createElement(React12__default.Fragment,null,React12__default.createElement(ScrollArea,{vertical:!0,horizontal:!0},React12__default.createElement(Tabs,{key:"tabs",tabs})),React12__default.createElement(ActionBar,{key:"actionbar",actionItems:readyActionItems})),status==="error"&&React12__default.createElement(Centered,null,"The accessibility scan encountered an error.",React12__default.createElement("br",null),typeof error=="string"?error:JSON.stringify(error)))};var Title2=()=>{let[addonState]=useAddonState(ADDON_ID),violationsNb=addonState?.violations?.length||0,incompleteNb=addonState?.incomplete?.length||0,count=violationsNb+incompleteNb;return React12__default.createElement("div",null,React12__default.createElement(Spaced,{col:1},React12__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Accessibility"),count===0?"":React12__default.createElement(Badge,{status:"neutral"},count)))};addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"",type:types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React12__default.createElement(VisionSimulator,null)}),addons.add(PANEL_ID,{title:Title2,type:types.PANEL,render:({active=!0})=>React12__default.createElement(A11yContextProvider,{active},React12__default.createElement(A11YPanel,null)),paramKey:PARAM_KEY});});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.2.3",
+  "version": "7.3.0-alpha.0",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -63,16 +63,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.2.3",
-    "@storybook/channels": "7.2.3",
-    "@storybook/client-logger": "7.2.3",
-    "@storybook/components": "7.2.3",
-    "@storybook/core-events": "7.2.3",
+    "@storybook/addon-highlight": "7.3.0-alpha.0",
+    "@storybook/channels": "7.3.0-alpha.0",
+    "@storybook/client-logger": "7.3.0-alpha.0",
+    "@storybook/components": "7.3.0-alpha.0",
+    "@storybook/core-events": "7.3.0-alpha.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.2.3",
-    "@storybook/preview-api": "7.2.3",
-    "@storybook/theming": "7.2.3",
-    "@storybook/types": "7.2.3",
+    "@storybook/manager-api": "7.3.0-alpha.0",
+    "@storybook/preview-api": "7.3.0-alpha.0",
+    "@storybook/theming": "7.3.0-alpha.0",
+    "@storybook/types": "7.3.0-alpha.0",
     "axe-core": "^4.2.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"