| 11 | 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)))};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(){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"},id:"accessibility",type:types.PANEL,render:({active=!0,key})=>React12__default.createElement(A11yContextProvider,{key,active},React12__default.createElement(A11YPanel,null)),paramKey:PARAM_KEY});});
|