@storybook/addon-a11y 7.0.7 → 7.0.9

package/dist/chunk-RCNGGLPU.mjs

@@ -1 +1,3 @@
-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};export{ADDON_ID,PANEL_ID,PARAM_KEY,EVENTS};
+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};
+
+export { ADDON_ID, EVENTS, PANEL_ID, PARAM_KEY };

package/dist/index.mjs

@@ -1 +1 @@
-import{PARAM_KEY}from"./chunk-RCNGGLPU.mjs";export{PARAM_KEY};
+export { PARAM_KEY } from './chunk-RCNGGLPU.mjs';

package/dist/manager.mjs

@@ -1 +1,11 @@
-import{ADDON_ID,EVENTS,PANEL_ID,PARAM_KEY}from"./chunk-RCNGGLPU.mjs";import React13 from"react";import{addons,types}from"@storybook/manager-api";import React2,{useState}from"react";import{Global,styled}from"@storybook/theming";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";import*as React from"react";var Filters=props=>React.createElement("svg",{...props},React.createElement("defs",null,React.createElement("filter",{id:"protanopia"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"})),React.createElement("filter",{id:"protanomaly"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"})),React.createElement("filter",{id:"deuteranopia"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"})),React.createElement("filter",{id:"deuteranomaly"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"})),React.createElement("filter",{id:"tritanopia"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"})),React.createElement("filter",{id:"tritanomaly"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"})),React.createElement("filter",{id:"achromatopsia"},React.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"}))));var iframeId="storybook-preview-iframe",baseList=[{name:"blurred vision",percentage:22.9},{name:"deuteranomaly",percentage:2.7},{name:"deuteranopia",percentage:.56},{name:"protanomaly",percentage:.66},{name:"protanopia",percentage:.59},{name:"tritanomaly",percentage:.01},{name:"tritanopia",percentage:.016},{name:"achromatopsia",percentage:1e-4},{name:"grayscale"}],getFilter=filterName=>filterName?filterName==="blurred vision"?"blur(2px)":filterName==="grayscale"?"grayscale(100%)":`url('#${filterName}')`:"none",Hidden=styled.div(()=>({"&, & svg":{position:"absolute",width:0,height:0}})),ColorIcon=styled.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter})=>({filter:getFilter(filter)}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`})),Column=styled.span({display:"flex",flexDirection:"column"}),Title=styled.span({textTransform:"capitalize"}),Description=styled.span(({theme})=>({fontSize:11,color:theme.textMutedColor})),getColorList=(active,set)=>[...active!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{set(null)},right:void 0,active:!1}]:[],...baseList.map(i=>{let description=i.percentage!==void 0?`${i.percentage}% of users`:void 0;return{id:i.name,title:React2.createElement(Column,null,React2.createElement(Title,null,i.name),description&&React2.createElement(Description,null,description)),onClick:()=>{set(i)},right:React2.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=useState(null);return React2.createElement(React2.Fragment,null,filter&&React2.createElement(Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),React2.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide()});return React2.createElement(TooltipLinkList,{links:colorList})},closeOnOutsideClick:!0,onDoubleClick:()=>setFilter(null)},React2.createElement(IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},React2.createElement(Icons,{icon:"accessibility"}))),React2.createElement(Hidden,null,React2.createElement(Filters,null)))};import React12,{useCallback as useCallback3,useMemo,useState as useState4}from"react";import{styled as styled9}from"@storybook/theming";import{ActionBar,Icons as Icons3,ScrollArea}from"@storybook/components";import{useChannel as useChannel2,useParameter,useStorybookState}from"@storybook/manager-api";import React10,{Fragment as Fragment2}from"react";import{Placeholder}from"@storybook/components";import React9,{Fragment,useState as useState3}from"react";import{styled as styled7}from"@storybook/theming";import{Icons as Icons2}from"@storybook/components";import React3 from"react";import{styled as styled2}from"@storybook/theming";var Wrapper=styled2.div({padding:12,marginBottom:10}),Description2=styled2.p({margin:"0 0 12px"}),Link=styled2.a({marginTop:12,textDecoration:"underline",color:"inherit",display:"block"}),Info=({item})=>React3.createElement(Wrapper,null,React3.createElement(Description2,null,item.description),React3.createElement(Link,{href:item.helpUrl,target:"_blank"},"More info..."));import React7 from"react";import{styled as styled5}from"@storybook/theming";import React4 from"react";import{styled as styled3}from"@storybook/theming";import{Badge}from"@storybook/components";import{useResizeDetector}from"react-resize-detector";var List=styled3.div({display:"flex",flexDirection:"column",paddingBottom:4,paddingRight:4,paddingTop:4,fontWeight:400}),Item=styled3.div(({elementWidth})=>({flexDirection:elementWidth>407?"row":"inherit",marginBottom:elementWidth>407?6:12,display:elementWidth>407?"flex":"block"})),StyledBadge=styled3(Badge)({padding:"2px 8px",marginBottom:3,minWidth:65,maxWidth:"fit-content",width:"100%",textAlign:"center"}),Message=styled3.div({paddingLeft:6,paddingRight:23});var formatSeverityText=severity=>severity.charAt(0).toUpperCase().concat(severity.slice(1)),Rule=({rule})=>{let{ref,width}=useResizeDetector({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),badgeType=null;switch(rule.impact){case"critical":badgeType="critical";break;case"serious":badgeType="negative";break;case"moderate":badgeType="warning";break;case"minor":badgeType="neutral";break;default:break}return React4.createElement(Item,{ref,elementWidth:width||0},React4.createElement(StyledBadge,{status:badgeType},formatSeverityText(rule.impact)),React4.createElement(Message,null,rule.message))},Rules=({rules})=>React4.createElement(List,null,rules.map((rule,index)=>React4.createElement(Rule,{rule,key:index})));import React6 from"react";import{styled as styled4}from"@storybook/theming";import*as React5 from"react";import{themes,convert}from"@storybook/theming";import{useChannel,useAddonState,useStorybookApi}from"@storybook/manager-api";import{STORY_CHANGED,STORY_RENDERED}from"@storybook/core-events";import{HIGHLIGHT}from"@storybook/addon-highlight";var colorsByType=[convert(themes.light).color.negative,convert(themes.light).color.positive,convert(themes.light).color.warning],A11yContext=React5.createContext({results:{passes:[],incomplete:[],violations:[]},setResults:()=>{},highlighted:[],toggleHighlight:()=>{},clearHighlights:()=>{},tab:0,setTab:()=>{}}),defaultResult={passes:[],incomplete:[],violations:[]},A11yContextProvider=({active,...props})=>{let[results,setResults]=useAddonState(ADDON_ID,defaultResult),[tab,setTab]=React5.useState(0),[highlighted,setHighlighted]=React5.useState([]),storyEntry=useStorybookApi().getCurrentStoryData(),handleToggleHighlight=React5.useCallback((target,highlight)=>{setHighlighted(prevHighlighted=>highlight?[...prevHighlighted,...target]:prevHighlighted.filter(t=>!target.includes(t)))},[]),handleRun=renderedStoryId=>{emit(EVENTS.REQUEST,renderedStoryId)},handleClearHighlights=React5.useCallback(()=>setHighlighted([]),[]),handleSetTab=React5.useCallback(index=>{handleClearHighlights(),setTab(index)},[]),handleReset=React5.useCallback(()=>{setTab(0),setResults(defaultResult)},[]),emit=useChannel({[STORY_RENDERED]:handleRun,[STORY_CHANGED]:handleReset});return React5.useEffect(()=>{emit(HIGHLIGHT,{elements:highlighted,color:colorsByType[tab]})},[highlighted,tab]),React5.useEffect(()=>{active&&storyEntry?.type==="story"?handleRun(storyEntry.id):handleClearHighlights()},[active,handleClearHighlights,emit,storyEntry]),active?React5.createElement(A11yContext.Provider,{value:{results,setResults,highlighted,toggleHighlight:handleToggleHighlight,clearHighlights:handleClearHighlights,tab,setTab:handleSetTab},...props}):null},useA11yContext=()=>React5.useContext(A11yContext);var Checkbox=styled4.input(({disabled})=>({cursor:disabled?"not-allowed":"pointer"}));function areAllRequiredElementsHighlighted(elementsToHighlight,highlighted){let highlightedCount=elementsToHighlight.filter(item=>highlighted.includes(item.target[0])).length;return highlightedCount===0?1:highlightedCount===elementsToHighlight.length?0:2}var HighlightToggle=({toggleId,elementsToHighlight=[]})=>{let{toggleHighlight,highlighted}=useA11yContext(),checkBoxRef=React6.useRef(null),[checkBoxState,setChecked]=React6.useState(areAllRequiredElementsHighlighted(elementsToHighlight,highlighted));React6.useEffect(()=>{let newState=areAllRequiredElementsHighlighted(elementsToHighlight,highlighted);checkBoxRef.current&&(checkBoxRef.current.indeterminate=newState===2),setChecked(newState)},[elementsToHighlight,highlighted]);let handleToggle=React6.useCallback(()=>{toggleHighlight(elementsToHighlight.map(e=>e.target[0]),checkBoxState!==0)},[elementsToHighlight,checkBoxState,toggleHighlight]);return React6.createElement(Checkbox,{ref:checkBoxRef,id:toggleId,type:"checkbox","aria-label":"Highlight result",disabled:!elementsToHighlight.length,onChange:handleToggle,checked:checkBoxState===0})},HighlightToggle_default=HighlightToggle;var Item2=styled5.li({fontWeight:600}),ItemTitle=styled5.span(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,width:"100%",display:"flex",paddingBottom:6,marginBottom:6,justifyContent:"space-between"})),HighlightToggleElement=styled5.span({fontWeight:"normal",alignSelf:"center",paddingRight:15,input:{margin:0,display:"block"}}),Element=({element,type})=>{let{any,all,none}=element,rules=[...any,...all,...none],highlightToggleId=`${type}-${element.target[0]}`;return React7.createElement(Item2,null,React7.createElement(ItemTitle,null,element.target[0],React7.createElement(HighlightToggleElement,null,React7.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:[element]}))),React7.createElement(Rules,{rules}))},Elements=({elements,type})=>React7.createElement("ol",null,elements.map((element,index)=>React7.createElement(Element,{element,key:index,type})));import React8 from"react";import{styled as styled6}from"@storybook/theming";var Wrapper2=styled6.div({display:"flex",flexWrap:"wrap",margin:"12px 0"}),Item3=styled6.div(({theme})=>({margin:"0 6px",padding:5,border:`1px solid ${theme.appBorderColor}`,borderRadius:theme.appBorderRadius})),Tags=({tags})=>React8.createElement(Wrapper2,null,tags.map(tag=>React8.createElement(Item3,{key:tag},tag)));var Wrapper3=styled7.div(({theme})=>({display:"flex",width:"100%",borderBottom:`1px solid ${theme.appBorderColor}`,"&:hover":{background:theme.background.hoverable}})),Icon=styled7(Icons2)(({theme})=>({height:10,width:10,minWidth:10,color:theme.textMutedColor,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),HeaderBar=styled7.div(({theme})=>({padding:theme.layoutMargin,paddingLeft:theme.layoutMargin-3,lineHeight:"20px",background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%","&:focus":{outline:"0 none",borderLeft:`3px solid ${theme.color.secondary}`}})),HighlightToggleElement2=styled7.span({fontWeight:"normal",float:"right",marginRight:15,alignSelf:"center",input:{margin:0,display:"block"}}),Item4=props=>{let[open,onToggle]=useState3(!1),{item,type}=props,highlightToggleId=`${type}-${item.id}`;return React9.createElement(Fragment,null,React9.createElement(Wrapper3,null,React9.createElement(HeaderBar,{onClick:()=>onToggle(!open),role:"button"},React9.createElement(Icon,{icon:"arrowdown",color:"#9DA5AB",style:{transform:`rotate(${open?0:-90}deg)`}}),item.help),React9.createElement(HighlightToggleElement2,null,React9.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:item.nodes}))),open?React9.createElement(Fragment,null,React9.createElement(Info,{item,key:"info"}),React9.createElement(Elements,{elements:item.nodes,type,key:"elements"}),React9.createElement(Tags,{tags:item.tags,key:"tags"})):null)};var Report=({items,empty,type})=>React10.createElement(Fragment2,null,items&&items.length?items.map(item=>React10.createElement(Item4,{item,key:`${type}:${item.id}`,type})):React10.createElement(Placeholder,{key:"placeholder"},empty));import*as React11 from"react";import{styled as styled8}from"@storybook/theming";import{useResizeDetector as useResizeDetector2}from"react-resize-detector";var Container=styled8.div({width:"100%",position:"relative",minHeight:"100%"}),HighlightToggleLabel=styled8.label(({theme})=>({cursor:"pointer",userSelect:"none",color:theme.color.dark})),GlobalToggle=styled8.div(({elementWidth,theme})=>({cursor:"pointer",fontSize:13,lineHeight:"20px",padding:elementWidth>450?"10px 15px 10px 0":"10px 0px 10px 15px",height:"40px",border:"none",marginTop:elementWidth>450?-40:0,float:elementWidth>450?"right":"left",display:"flex",alignItems:"center",width:elementWidth>450?"auto":"100%",borderBottom:elementWidth>450?"none":`1px solid ${theme.appBorderColor}`,input:{marginLeft:10,marginRight:0,marginTop:-1,marginBottom:0}})),Item5=styled8.button(({theme})=>({textDecoration:"none",padding:"10px 15px",cursor:"pointer",fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,lineHeight:1,height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent","&:focus":{outline:"0 none",borderBottom:`3px solid ${theme.color.secondary}`}}),({active,theme})=>active?{opacity:1,borderBottom:`3px solid ${theme.color.secondary}`}:{}),TabsWrapper=styled8.div({}),List2=styled8.div(({theme})=>({boxShadow:`${theme.appBorderColor} 0 -1px 0 0 inset`,background:theme.background.app,display:"flex",justifyContent:"space-between",whiteSpace:"nowrap"}));function retrieveAllNodesFromResults(items){return items.reduce((acc,item)=>acc.concat(item.nodes),[])}var Tabs=({tabs})=>{let{ref,width}=useResizeDetector2({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),{tab:activeTab,setTab}=useA11yContext(),handleToggle=React11.useCallback(event=>{setTab(parseInt(event.currentTarget.getAttribute("data-index")||"",10))},[setTab]),highlightToggleId=`${tabs[activeTab].type}-global-checkbox`,highlightLabel="Highlight results";return React11.createElement(Container,{ref},React11.createElement(List2,null,React11.createElement(TabsWrapper,null,tabs.map((tab,index)=>React11.createElement(Item5,{key:index,"data-index":index,active:activeTab===index,onClick:handleToggle},tab.label)))),tabs[activeTab].items.length>0?React11.createElement(GlobalToggle,{elementWidth:width||0},React11.createElement(HighlightToggleLabel,{htmlFor:highlightToggleId},highlightLabel),React11.createElement(HighlightToggle_default,{toggleId:highlightToggleId,elementsToHighlight:retrieveAllNodesFromResults(tabs[activeTab].items)})):null,tabs[activeTab].panel)};var Icon2=styled9(Icons3)({height:12,width:12,marginRight:4}),RotatingIcon=styled9(Icon2)(({theme})=>({animation:`${theme.animation.rotate360} 1s linear infinite;`})),Passes=styled9.span(({theme})=>({color:theme.color.positiveText})),Violations=styled9.span(({theme})=>({color:theme.color.negativeText})),Incomplete=styled9.span(({theme})=>({color:theme.color.warningText})),Centered=styled9.span({display:"flex",alignItems:"center",justifyContent:"center",height:"100%"}),A11YPanel=()=>{let{manual}=useParameter("a11y",{manual:!1}),[status,setStatus]=useState4(manual?"manual":"initial"),[error,setError]=React12.useState(void 0),{setResults,results}=useA11yContext(),{storyId}=useStorybookState();React12.useEffect(()=>{setStatus(manual?"manual":"initial")},[manual]);let handleResult=axeResults=>{setStatus("ran"),setResults(axeResults),setTimeout(()=>{status==="ran"&&setStatus("ready")},900)},handleRun=useCallback3(()=>{setStatus("running")},[]),handleError=useCallback3(err=>{setStatus("error"),setError(err)},[]),emit=useChannel2({[EVENTS.RUNNING]:handleRun,[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError}),handleManual=useCallback3(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId)},[storyId]),manualActionItems=useMemo(()=>[{title:"Run test",onClick:handleManual}],[handleManual]),readyActionItems=useMemo(()=>[{title:status==="ready"?"Rerun tests":React12.createElement(React12.Fragment,null,React12.createElement(Icon2,{icon:"check"})," Tests completed"),onClick:handleManual}],[status,handleManual]),tabs=useMemo(()=>{let{passes,incomplete,violations}=results;return[{label:React12.createElement(Violations,null,violations.length," Violations"),panel:React12.createElement(Report,{items:violations,type:0,empty:"No accessibility violations found."}),items:violations,type:0},{label:React12.createElement(Passes,null,passes.length," Passes"),panel:React12.createElement(Report,{items:passes,type:1,empty:"No accessibility checks passed."}),items:passes,type:1},{label:React12.createElement(Incomplete,null,incomplete.length," Incomplete"),panel:React12.createElement(Report,{items:incomplete,type:2,empty:"No accessibility checks incomplete."}),items:incomplete,type:2}]},[results]);return React12.createElement(React12.Fragment,null,status==="initial"&&React12.createElement(Centered,null,"Initializing..."),status==="manual"&&React12.createElement(React12.Fragment,null,React12.createElement(Centered,null,"Manually run the accessibility scan."),React12.createElement(ActionBar,{key:"actionbar",actionItems:manualActionItems})),status==="running"&&React12.createElement(Centered,null,React12.createElement(RotatingIcon,{icon:"sync"})," Please wait while the accessibility scan is running ..."),(status==="ready"||status==="ran")&&React12.createElement(React12.Fragment,null,React12.createElement(ScrollArea,{vertical:!0,horizontal:!0},React12.createElement(Tabs,{key:"tabs",tabs})),React12.createElement(ActionBar,{key:"actionbar",actionItems:readyActionItems})),status==="error"&&React12.createElement(Centered,null,"The accessibility scan encountered an error.",React12.createElement("br",null),typeof error=="string"?error:JSON.stringify(error)))};addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"",type:types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React13.createElement(VisionSimulator,null)}),addons.add(PANEL_ID,{title(){let addonState=api?.getAddonState(ADDON_ID),violationsNb=addonState?.violations?.length||0,incompleteNb=addonState?.incomplete?.length||0,totalNb=violationsNb+incompleteNb;return totalNb!==0?`Accessibility (${totalNb})`:"Accessibility"},id:"accessibility",type:types.PANEL,render:({active=!0,key})=>React13.createElement(A11yContextProvider,{key,active},React13.createElement(A11YPanel,null)),paramKey:PARAM_KEY})});
+import { ADDON_ID, PANEL_ID, PARAM_KEY, EVENTS } from './chunk-RCNGGLPU.mjs';
+import * as React12 from 'react';
+import React12__default, { useState, useCallback, useMemo, Fragment } from 'react';
+import { addons, types, useAddonState, useStorybookApi, useChannel, useParameter, useStorybookState } from '@storybook/manager-api';
+import { styled, convert, themes, Global } from '@storybook/theming';
+import { Badge, Icons, WithTooltip, TooltipLinkList, IconButton, ActionBar, ScrollArea, Placeholder } from '@storybook/components';
+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)))};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});});

package/dist/preview.mjs

@@ -1 +1,5 @@
-import{EVENTS}from"./chunk-RCNGGLPU.mjs";import{global}from"@storybook/global";import{addons}from"@storybook/preview-api";var{document,window:globalWindow}=global,channel=addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId)},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import("axe-core")).default,{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);if(!htmlElement)return;axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options);activeStoryId===storyId?channel.emit(EVENTS.RESULT,result):(active=!1,run(activeStoryId))}}catch(error){channel.emit(EVENTS.ERROR,error)}finally{active=!1}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run);
+import { EVENTS } from './chunk-RCNGGLPU.mjs';
+import { global } from '@storybook/global';
+import { addons } from '@storybook/preview-api';
+
+var{document,window:globalWindow}=global,channel=addons.getChannel(),active=!1,activeStoryId,handleRequest=async storyId=>{let{manual}=await getParams(storyId);manual||await run(storyId);},run=async storyId=>{activeStoryId=storyId;try{let input=await getParams(storyId);if(!active){active=!0,channel.emit(EVENTS.RUNNING);let axe=(await import('axe-core')).default,{element="#storybook-root",config,options={}}=input,htmlElement=document.querySelector(element);if(!htmlElement)return;axe.reset(),config&&axe.configure(config);let result=await axe.run(htmlElement,options);activeStoryId===storyId?channel.emit(EVENTS.RESULT,result):(active=!1,run(activeStoryId));}}catch(error){channel.emit(EVENTS.ERROR,error);}finally{active=!1;}},getParams=async storyId=>{let{parameters}=await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({storyId})||{};return parameters.a11y||{config:{},options:{}}};channel.on(EVENTS.REQUEST,handleRequest);channel.on(EVENTS.MANUAL,run);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.7",
+  "version": "7.0.9",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/a11y"
+    "directory": "code/addons/a11y"
   },
   "funding": {
     "type": "opencollective",
@@ -27,25 +27,25 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./manager": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./preview": {
+      "types": "./dist/preview.d.ts",
       "require": "./dist/preview.js",
-      "import": "./dist/preview.mjs",
-      "types": "./dist/preview.d.ts"
+      "import": "./dist/preview.mjs"
     },
     "./register": {
+      "types": "./dist/manager.d.ts",
       "require": "./dist/manager.js",
-      "import": "./dist/manager.mjs",
-      "types": "./dist/manager.d.ts"
+      "import": "./dist/manager.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -63,16 +63,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.7",
-    "@storybook/channels": "7.0.7",
-    "@storybook/client-logger": "7.0.7",
-    "@storybook/components": "7.0.7",
-    "@storybook/core-events": "7.0.7",
+    "@storybook/addon-highlight": "7.0.9",
+    "@storybook/channels": "7.0.9",
+    "@storybook/client-logger": "7.0.9",
+    "@storybook/components": "7.0.9",
+    "@storybook/core-events": "7.0.9",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.7",
-    "@storybook/preview-api": "7.0.7",
-    "@storybook/theming": "7.0.7",
-    "@storybook/types": "7.0.7",
+    "@storybook/manager-api": "7.0.9",
+    "@storybook/preview-api": "7.0.9",
+    "@storybook/theming": "7.0.9",
+    "@storybook/types": "7.0.9",
     "axe-core": "^4.2.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"
@@ -104,7 +104,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "9e352853ca5ce94d81fcdb06c303b4fbf43f8971",
+  "gitHead": "797cfd6f12f94a65617c65f25b2d6546a689bf1b",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",