@storybook/addon-a11y
Version:
Test component compliance with web accessibility standards
11 lines (10 loc) • 96.7 kB
JavaScript
import * as React7 from 'react';
import React7__default, { createContext, forwardRef, Children, isValidElement, createElement, cloneElement, useEffect, useRef, useState, useCallback, useMemo, Fragment, useContext, createRef, PureComponent, useLayoutEffect, useReducer } from 'react';
import { SyntaxHighlighter, Button, IconButton, Badge, WithTooltip, TooltipLinkList, EmptyTabContent, TooltipNote, ScrollArea, Link } from 'storybook/internal/components';
import { addons, types, useParameter, useGlobals, useStorybookApi, useAddonState, useStorybookState, experimental_useStatusStore, experimental_getStatusStore, useChannel } from 'storybook/manager-api';
import { ChevronSmallDownIcon, SyncIcon, AccessibilityIcon, EyeCloseIcon, EyeIcon, CollapseIcon, ExpandAltIcon, LocationIcon, CheckIcon, CopyIcon } from '@storybook/icons';
import { convert, themes, styled, Global } from 'storybook/theming';
import { STORY_CHANGED, STORY_RENDER_PHASE_CHANGED, STORY_FINISHED, STORY_HOT_UPDATED } from 'storybook/internal/core-events';
import { SCROLL_INTO_VIEW, REMOVE_HIGHLIGHT, HIGHLIGHT } from 'storybook/highlight';
import { flushSync, findDOMNode } from 'react-dom';
var RuleType={VIOLATION:"violations",PASS:"passes",INCOMPLETION:"incomplete"};var axeRuleMapping_wcag_2_0_a_aa={"area-alt":{title:"<area> alt text",axeSummary:"Ensure <area> elements of image maps have alternative text",friendlySummary:"Add alt text to all <area> elements of image maps."},"aria-allowed-attr":{title:"Supported ARIA attributes",axeSummary:"Ensure an element's role supports its ARIA attributes",friendlySummary:"Only use ARIA attributes that are permitted for the element's role."},"aria-braille-equivalent":{title:"Braille equivalent",axeSummary:"Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",friendlySummary:"If you use braille ARIA labels, also provide a matching non-braille label."},"aria-command-name":{title:"ARIA command name",axeSummary:"Ensure every ARIA button, link and menuitem has an accessible name",friendlySummary:"Every ARIA button, link, or menuitem needs a label or accessible name."},"aria-conditional-attr":{title:"ARIA attribute valid for role",axeSummary:"Ensure ARIA attributes are used as described in the specification of the element's role",friendlySummary:"Follow the element role's specification when using ARIA attributes."},"aria-deprecated-role":{title:"Deprecated ARIA role",axeSummary:"Ensure elements do not use deprecated roles",friendlySummary:"Don't use deprecated ARIA roles on elements."},"aria-hidden-body":{title:"Hidden body",axeSummary:'Ensure aria-hidden="true" is not present on the document <body>',friendlySummary:'Never set aria-hidden="true" on the <body> element.'},"aria-hidden-focus":{title:"Hidden element focus",axeSummary:"Ensure aria-hidden elements are not focusable nor contain focusable elements",friendlySummary:"Elements marked hidden (aria-hidden) should not be focusable or contain focusable items."},"aria-input-field-name":{title:"ARIA input field name",axeSummary:"Ensure every ARIA input field has an accessible name",friendlySummary:"Give each ARIA text input or field a label or accessible name."},"aria-meter-name":{title:"ARIA meter name",axeSummary:"Ensure every ARIA meter node has an accessible name",friendlySummary:'Give each element with role="meter" a label or accessible name.'},"aria-progressbar-name":{title:"ARIA progressbar name",axeSummary:"Ensure every ARIA progressbar node has an accessible name",friendlySummary:'Give each element with role="progressbar" a label or accessible name.'},"aria-prohibited-attr":{title:"ARIA prohibited attributes",axeSummary:"Ensure ARIA attributes are not prohibited for an element's role",friendlySummary:"Don't use ARIA attributes that are forbidden for that element's role."},"aria-required-attr":{title:"ARIA required attributes",axeSummary:"Ensure elements with ARIA roles have all required ARIA attributes",friendlySummary:"Include all required ARIA attributes for elements with that ARIA role."},"aria-required-children":{title:"ARIA required children",axeSummary:"Ensure elements with an ARIA role that require child roles contain them",friendlySummary:"If an ARIA role requires specific child roles, include those child elements."},"aria-required-parent":{title:"ARIA required parent",axeSummary:"Ensure elements with an ARIA role that require parent roles are contained by them",friendlySummary:"Place elements with certain ARIA roles inside the required parent role element."},"aria-roles":{title:"ARIA role value",axeSummary:"Ensure all elements with a role attribute use a valid value",friendlySummary:"Use only valid values in the role attribute (no typos or invalid roles)."},"aria-toggle-field-name":{title:"ARIA toggle field name",axeSummary:"Ensure every ARIA toggle field has an accessible name",friendlySummary:"Every ARIA toggle field (elements with the checkbox, radio, or switch roles) needs an accessible name."},"aria-tooltip-name":{title:"ARIA tooltip name",axeSummary:"Ensure every ARIA tooltip node has an accessible name",friendlySummary:'Give each element with role="tooltip" a descriptive accessible name.'},"aria-valid-attr-value":{title:"ARIA attribute values valid",axeSummary:"Ensure all ARIA attributes have valid values",friendlySummary:"Use only valid values for ARIA attributes (no typos or invalid values)."},"aria-valid-attr":{title:"ARIA attribute valid",axeSummary:"Ensure attributes that begin with aria- are valid ARIA attributes",friendlySummary:"Use only valid aria-* attributes (make sure the attribute name is correct)."},blink:{title:"<blink> element",axeSummary:"Ensure <blink> elements are not used",friendlySummary:"Don't use the deprecated <blink> element."},"button-name":{title:"Button name",axeSummary:"Ensure buttons have discernible text",friendlySummary:"Every <button> needs a visible label or accessible name."},bypass:{title:"Navigation bypass",axeSummary:"Ensure each page has at least one mechanism to bypass navigation and jump to content",friendlySummary:'Provide a way to skip repetitive navigation (e.g. a "Skip to content" link).'},"color-contrast":{title:"Color contrast",axeSummary:"Ensure the contrast between foreground and background text meets WCAG 2 AA minimum thresholds",friendlySummary:"The color contrast between text and its background meets WCAG AA contrast ratio."},"definition-list":{title:"Definition list structure",axeSummary:"Ensure <dl> elements are structured correctly",friendlySummary:"Definition lists (<dl>) should directly contain <dt> and <dd> elements in order."},dlitem:{title:"Definition list items",axeSummary:"Ensure <dt> and <dd> elements are contained by a <dl>",friendlySummary:"Ensure <dt> and <dd> elements are contained by a <dl>"},"document-title":{title:"Document title",axeSummary:"Ensure each HTML document contains a non-empty <title> element",friendlySummary:"Include a non-empty <title> element for every page."},"duplicate-id-aria":{title:"Unique id",axeSummary:"Ensure every id attribute value used in ARIA and in labels is unique",friendlySummary:"Every id used for ARIA or form labels should be unique on the page."},"form-field-multiple-labels":{title:"Multiple form field labels",axeSummary:"Ensure a form field does not have multiple <label> elements",friendlySummary:"Don't give a single form field more than one <label>."},"frame-focusable-content":{title:"Focusable frames",axeSummary:'Ensure <frame> and <iframe> with focusable content do not have tabindex="-1"',friendlySummary:`Don't set tabindex="-1" on a <frame> or <iframe> that contains focusable elements.`},"frame-title-unique":{title:"Unique frame title",axeSummary:"Ensure <iframe> and <frame> elements contain a unique title attribute",friendlySummary:"Use a unique title attribute for each <frame> or <iframe> on the page."},"frame-title":{title:"Frame title",axeSummary:"Ensure <iframe> and <frame> elements have an accessible name",friendlySummary:"Every <frame> and <iframe> needs a title or accessible name."},"html-has-lang":{title:"<html> has lang",axeSummary:"Ensure every HTML document has a lang attribute",friendlySummary:"Add a lang attribute to the <html> element."},"html-lang-valid":{title:"<html> lang valid",axeSummary:"Ensure the <html lang> attribute has a valid value",friendlySummary:"Use a valid language code in the <html lang> attribute."},"html-xml-lang-mismatch":{title:"HTML and XML lang mismatch",axeSummary:"Ensure that HTML elements with both lang and xml:lang agree on the page's language",friendlySummary:"If using both lang and xml:lang on <html>, make sure they are the same language."},"image-alt":{title:"Image alt text",axeSummary:"Ensure <img> elements have alternative text or a role of none/presentation",friendlySummary:'Give every image alt text or mark it as decorative with alt="".'},"input-button-name":{title:"Input button name",axeSummary:"Ensure input buttons have discernible text",friendlySummary:'Give each <input type="button"> or similar a clear label (text or aria-label).'},"input-image-alt":{title:"Input image alt",axeSummary:'Ensure <input type="image"> elements have alternative text',friendlySummary:'<input type="image"> must have alt text describing its image.'},label:{title:"Form label",axeSummary:"Ensure every form element has a label",friendlySummary:"Every form field needs an associated label."},"link-in-text-block":{title:"Identifiable links",axeSummary:"Ensure links are distinguishable from surrounding text without relying on color",friendlySummary:"Make sure links are obviously identifiable without relying only on color."},"link-name":{title:"Link name",axeSummary:"Ensure links have discernible text",friendlySummary:"Give each link meaningful text or an aria-label so its purpose is clear."},list:{title:"List structure",axeSummary:"Ensure that lists are structured correctly",friendlySummary:"Use proper list structure. Only use <li> inside <ul> or <ol>."},listitem:{title:"List item",axeSummary:"Ensure <li> elements are used semantically",friendlySummary:"Only use <li> tags inside <ul> or <ol> lists."},marquee:{title:"<marquee> element",axeSummary:"Ensure <marquee> elements are not used",friendlySummary:"Don't use the deprecated <marquee> element."},"meta-refresh":{title:"<meta> refresh",axeSummary:'Ensure <meta http-equiv="refresh"> is not used for delayed refresh',friendlySummary:'Avoid auto-refreshing or redirecting pages using <meta http-equiv="refresh">.'},"meta-viewport":{title:"<meta> viewport scaling",axeSummary:'Ensure <meta name="viewport"> does not disable text scaling and zooming',friendlySummary:`Don't disable user zooming in <meta name="viewport"> to allow scaling.`},"nested-interactive":{title:"Nested interactive controls",axeSummary:"Ensure interactive controls are not nested (nesting causes screen reader/focus issues)",friendlySummary:"Do not nest interactive elements; it can confuse screen readers and keyboard focus."},"no-autoplay-audio":{title:"Autoplaying video",axeSummary:"Ensure <video> or <audio> do not autoplay audio > 3 seconds without a control to stop/mute",friendlySummary:"Don't autoplay audio for more than 3 seconds without providing a way to stop or mute it."},"object-alt":{title:"<object> alt text",axeSummary:"Ensure <object> elements have alternative text",friendlySummary:"Provide alternative text or content for <object> elements."},"role-img-alt":{title:'role="img" alt text',axeSummary:'Ensure elements with role="img" have alternative text',friendlySummary:'Any element with role="img" needs alt text.'},"scrollable-region-focusable":{title:"Scrollable element focusable",axeSummary:"Ensure elements with scrollable content are keyboard-accessible",friendlySummary:"If an area can scroll, ensure it can be focused and scrolled via keyboard."},"select-name":{title:"<select> name",axeSummary:"Ensure <select> elements have an accessible name",friendlySummary:"Give each <select> field a label or other accessible name."},"server-side-image-map":{title:"Server-side image map",axeSummary:"Ensure that server-side image maps are not used",friendlySummary:"Don't use server-side image maps."},"svg-img-alt":{title:"SVG image alt text",axeSummary:"Ensure <svg> images/graphics have accessible text",friendlySummary:'SVG images with role="img" or similar need a text description.'},"td-headers-attr":{title:"Table headers attribute",axeSummary:"Ensure each cell in a table using headers only refers to <th> in that table",friendlySummary:"In tables using the headers attribute, only reference other cells in the same table."},"th-has-data-cells":{title:"<th> has data cell",axeSummary:"Ensure <th> (or header role) elements have data cells they describe",friendlySummary:"Every table header (<th> or header role) should correspond to at least one data cell."},"valid-lang":{title:"Valid lang",axeSummary:"Ensure lang attributes have valid values",friendlySummary:"Use valid language codes in all lang attributes."},"video-caption":{title:"<video> captions",axeSummary:"Ensure <video> elements have captions",friendlySummary:"Provide captions for all <video> content."}},axeRuleMapping_wcag_2_1_a_aa={"autocomplete-valid":{title:"autocomplete attribute valid",axeSummary:"Ensure the autocomplete attribute is correct and suitable for the form field",friendlySummary:"Use valid autocomplete values that match the form field's purpose."},"avoid-inline-spacing":{title:"Forced inline spacing",axeSummary:"Ensure that text spacing set via inline styles can be adjusted with custom CSS",friendlySummary:"Don't lock in text spacing with forced (!important) inline styles\u2014allow user CSS to adjust text spacing."}},axeRuleMapping_wcag_2_2_a_aa={"target-size":{title:"Touch target size",axeSummary:"Ensure touch targets have sufficient size and space",friendlySummary:"Make sure interactive elements are big enough and not too close together for touch."}},axeRuleMapping_best_practices={accesskeys:{title:"Unique accesskey",axeSummary:"Ensure every accesskey attribute value is unique",friendlySummary:"Use unique values for all accesskey attributes."},"aria-allowed-role":{title:"Appropriate role value",axeSummary:"Ensure the role attribute has an appropriate value for the element",friendlySummary:"ARIA roles should have a valid value for the element."},"aria-dialog-name":{title:"ARIA dialog name",axeSummary:"Ensure every ARIA dialog and alertdialog has an accessible name",friendlySummary:"Give each ARIA dialog or alertdialog a title or accessible name."},"aria-text":{title:'ARIA role="text"',axeSummary:'Ensure role="text" is used on elements with no focusable descendants',friendlySummary:`Only use role="text" on elements that don't contain focusable elements.`},"aria-treeitem-name":{title:"ARIA treeitem name",axeSummary:"Ensure every ARIA treeitem node has an accessible name",friendlySummary:"Give each ARIA treeitem a label or accessible name."},"empty-heading":{title:"Empty heading",axeSummary:"Ensure headings have discernible text",friendlySummary:"Don't leave heading elements empty or hide them."},"empty-table-header":{title:"Empty table header",axeSummary:"Ensure table headers have discernible text",friendlySummary:"Make sure table header cells have visible text."},"frame-tested":{title:"Test all frames",axeSummary:"Ensure <iframe> and <frame> elements contain the axe-core script",friendlySummary:"Make sure axe-core is injected into all frames or iframes so they are tested."},"heading-order":{title:"Heading order",axeSummary:"Ensure the order of headings is semantically correct (no skipping levels)",friendlySummary:"Use proper heading order (don't skip heading levels)."},"image-redundant-alt":{title:"Redundant image alt text",axeSummary:"Ensure image alternative text is not repeated as nearby text",friendlySummary:"Avoid repeating the same information in both an image's alt text and nearby text."},"label-title-only":{title:"Visible form element label",axeSummary:"Ensure each form element has a visible label (not only title/ARIA)",friendlySummary:"Every form input needs a visible label (not only a title attribute or hidden text)."},"landmark-banner-is-top-level":{title:"Top-level landmark banner",axeSummary:"Ensure the banner landmark is at top level (not nested)",friendlySummary:"Use the banner landmark (e.g. site header) only at the top level of the page, not inside another landmark."},"landmark-complementary-is-top-level":{title:"Top-level <aside>",axeSummary:"Ensure the complementary landmark (<aside>) is top level",friendlySummary:'The complementary landmark <aside> or role="complementary" should be a top-level region, not nested in another landmark.'},"landmark-contentinfo-is-top-level":{title:"Top-level contentinfo",axeSummary:"Ensure the contentinfo landmark (footer) is top level",friendlySummary:"Make sure the contentinfo landmark (footer) is at the top level of the page and not contained in another landmark."},"landmark-main-is-top-level":{title:"Top-level main",axeSummary:"Ensure the main landmark is at top level",friendlySummary:"The main landmark should be a top-level element and not nested inside another landmark."},"landmark-no-duplicate-banner":{title:"Duplicate banner landmark",axeSummary:"Ensure the document has at most one banner landmark",friendlySummary:'Have only one role="banner" or <header> on a page.'},"landmark-no-duplicate-contentinfo":{title:"Duplicate contentinfo",axeSummary:"Ensure the document has at most one contentinfo landmark",friendlySummary:'Have only one role="contentinfo" or <footer> on a page.'},"landmark-no-duplicate-main":{title:"Duplicate main",axeSummary:"Ensure the document has at most one main landmark",friendlySummary:'Have only one role="main" or <main> on a page.'},"landmark-one-main":{title:"main landmark",axeSummary:"Ensure the document has a main landmark",friendlySummary:'Include a main landmark on each page using a <main> region or role="main".'},"landmark-unique":{title:"Unique landmark",axeSummary:"Ensure landmarks have a unique role or role/label combination",friendlySummary:"If you use multiple landmarks of the same type, give them unique labels (names)."},"meta-viewport-large":{title:"Significant viewport scaling",axeSummary:'Ensure <meta name="viewport"> can scale a significant amount (e.g. 500%)',friendlySummary:'<meta name="viewport"> should allow users to significantly scale content.'},"page-has-heading-one":{title:"Has <h1>",axeSummary:"Ensure the page (or at least one frame) contains a level-one heading",friendlySummary:"Every page or frame should have at least one <h1> heading."},"presentation-role-conflict":{title:"Presentational content",axeSummary:'Ensure elements with role="presentation"/"none" have no ARIA or tabindex',friendlySummary:`Don't give elements with role="none"/"presentation" any ARIA attributes or a tabindex.`},region:{title:"Landmark regions",axeSummary:"Ensure all page content is contained by landmarks",friendlySummary:"Wrap all page content in appropriate landmark regions (<header>, <main>, <footer>, etc.)."},"scope-attr-valid":{title:"scope attribute",axeSummary:"Ensure the scope attribute is used correctly on tables",friendlySummary:"Use the scope attribute only on <th> elements, with proper values (col, row, etc.)."},"skip-link":{title:"Skip link",axeSummary:'Ensure all "skip" links have a focusable target',friendlySummary:'Make sure any "skip to content" link targets an existing, focusable element.'},tabindex:{title:"tabindex values",axeSummary:"Ensure tabindex attribute values are not greater than 0",friendlySummary:"Don't use tabindex values greater than 0."},"table-duplicate-name":{title:"Duplicate names for table",axeSummary:"Ensure the <caption> does not duplicate the summary attribute text",friendlySummary:"Don't use the same text in both a table's <caption> and its summary attribute."}},axeRuleMapping_wcag_2_x_aaa={"color-contrast-enhanced":{title:"Enhanced color contrast",axeSummary:"Ensure contrast between text and background meets WCAG 2 AAA enhanced contrast thresholds",friendlySummary:"Use extra-high contrast for text and background to meet WCAG AAA level."},"identical-links-same-purpose":{title:"Same link name, same purpose",axeSummary:"Ensure links with the same accessible name serve a similar purpose",friendlySummary:"If two links have the same text, they should do the same thing (lead to the same content)."},"meta-refresh-no-exceptions":{title:'No <meta http-equiv="refresh">',axeSummary:'Ensure <meta http-equiv="refresh"> is not used for delayed refresh (no exceptions)',friendlySummary:`Don't auto-refresh or redirect pages using <meta http-equiv="refresh"> even with a delay.`}},axeRuleMapping_experimental={"css-orientation-lock":{title:"CSS orientation lock",axeSummary:"Ensure content is not locked to a specific display orientation (works in all orientations)",friendlySummary:"Don't lock content to one screen orientation; support both portrait and landscape modes."},"focus-order-semantics":{title:"Focus order semantic role",axeSummary:"Ensure elements in the tab order have a role appropriate for interactive content",friendlySummary:"Ensure elements in the tab order have a role appropriate for interactive content"},"hidden-content":{title:"Hidden content",axeSummary:"Informs users about hidden content",friendlySummary:"Display hidden content on the page for test analysis."},"label-content-name-mismatch":{title:"Content name mismatch",axeSummary:"Ensure elements labeled by their content include that text in their accessible name",friendlySummary:"If an element's visible text serves as its label, include that text in its accessible name."},"p-as-heading":{title:"No <p> headings",axeSummary:"Ensure <p> elements aren't styled to look like headings (use real headings)",friendlySummary:"Don't just style a <p> to look like a heading \u2013 use an actual heading tag for headings."},"table-fake-caption":{title:"Table caption",axeSummary:"Ensure that tables with a caption use the <caption> element",friendlySummary:"Use a <caption> element for table captions instead of just styled text."},"td-has-header":{title:"<td> has header",axeSummary:"Ensure each non-empty data cell in large tables (3\xD73+) has one or more headers",friendlySummary:"Every data cell in large tables should be associated with at least one header cell."}},axeRuleMapping_deprecated={"aria-roledescription":{title:"aria-roledescription",axeSummary:"Ensure aria-roledescription is only used on elements with an implicit or explicit role",friendlySummary:"Only use aria-roledescription on elements that already have a defined role."}},combinedRulesMap={...axeRuleMapping_wcag_2_0_a_aa,...axeRuleMapping_wcag_2_1_a_aa,...axeRuleMapping_wcag_2_2_a_aa,...axeRuleMapping_wcag_2_x_aaa,...axeRuleMapping_best_practices,...axeRuleMapping_experimental,...axeRuleMapping_deprecated};var getTitleForAxeResult=axeResult=>combinedRulesMap[axeResult.id]?.title||axeResult.id,getFriendlySummaryForAxeResult=axeResult=>combinedRulesMap[axeResult.id]?.friendlySummary||axeResult.description;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`,SELECT=`${ADDON_ID}/select`,DOCUMENTATION_LINK="writing-tests/accessibility-testing",DOCUMENTATION_DISCREPANCY_LINK=`${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;var EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL,SELECT},STATUS_TYPE_ID_COMPONENT_TEST="storybook/component-test",STATUS_TYPE_ID_A11Y="storybook/a11y";var unhighlightedSelectors=["html","body","main"],theme=convert(themes.light),colorsByType={[RuleType.VIOLATION]:theme.color.negative,[RuleType.PASS]:theme.color.positive,[RuleType.INCOMPLETION]:theme.color.warning},A11yContext=createContext({parameters:{},results:void 0,highlighted:!1,toggleHighlight:()=>{},tab:RuleType.VIOLATION,handleCopyLink:()=>{},setTab:()=>{},setStatus:()=>{},status:"initial",error:void 0,handleManual:()=>{},discrepancy:null,selectedItems:new Map,allExpanded:!1,toggleOpen:()=>{},handleCollapseAll:()=>{},handleExpandAll:()=>{},handleJumpToElement:()=>{},handleSelectionChange:()=>{}}),A11yContextProvider=props=>{let parameters=useParameter("a11y",{}),[globals]=useGlobals()??[],api=useStorybookApi(),getInitialStatus=useCallback((manual2=!1)=>manual2?"manual":"initial",[]),manual=useMemo(()=>globals?.a11y?.manual??!1,[globals?.a11y?.manual]),a11ySelection=useMemo(()=>{let value=api.getQueryParam("a11ySelection");return value&&api.setQueryParams({a11ySelection:""}),value},[api]),[results,setResults]=useAddonState(ADDON_ID),[tab,setTab]=useState(()=>{let[type]=a11ySelection?.split(".")??[];return type&&Object.values(RuleType).includes(type)?type:RuleType.VIOLATION}),[error,setError]=useState(void 0),[status,setStatus]=useState(getInitialStatus(manual)),[highlighted,setHighlighted]=useState(!!a11ySelection),{storyId}=useStorybookState(),currentStoryA11yStatusValue=experimental_useStatusStore(allStatuses=>allStatuses[storyId]?.[STATUS_TYPE_ID_A11Y]?.value);useEffect(()=>experimental_getStatusStore("storybook/component-test").onAllStatusChange((statuses,previousStatuses)=>{let current=statuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST],previous=previousStatuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];current?.value==="status-value:error"&&previous?.value!=="status-value:error"&&setStatus("component-test-error");}),[storyId]);let handleToggleHighlight=useCallback(()=>setHighlighted(prevHighlighted=>!prevHighlighted),[]),[selectedItems,setSelectedItems]=useState(()=>{let initialValue=new Map;if(a11ySelection&&/^[a-z]+.[a-z-]+.[0-9]+$/.test(a11ySelection)){let[type,id]=a11ySelection.split(".");initialValue.set(`${type}.${id}`,a11ySelection);}return initialValue}),allExpanded=useMemo(()=>results?.[tab]?.every(result=>selectedItems.has(`${tab}.${result.id}`))??!1,[results,selectedItems,tab]),toggleOpen=useCallback((event,type,item)=>{event.stopPropagation();let key=`${type}.${item.id}`;setSelectedItems(prev=>new Map(prev.delete(key)?prev:prev.set(key,`${key}.1`)));},[]),handleCollapseAll=useCallback(()=>{setSelectedItems(new Map);},[]),handleExpandAll=useCallback(()=>{setSelectedItems(prev=>new Map(results?.[tab]?.map(result=>{let key=`${tab}.${result.id}`;return [key,prev.get(key)??`${key}.1`]})??[]));},[results,tab]),handleSelectionChange=useCallback(key=>{let[type,id]=key.split(".");setSelectedItems(prev=>new Map(prev.set(`${type}.${id}`,key)));},[]),handleError=useCallback(err=>{setStatus("error"),setError(err);},[]),handleResult=useCallback((axeResults,id)=>{storyId===id&&(setStatus("ran"),setResults(axeResults),setTimeout(()=>{if(status==="ran"&&setStatus("ready"),selectedItems.size===1){let[key]=selectedItems.values();document.getElementById(key)?.scrollIntoView({behavior:"smooth",block:"center"});}},900));},[setResults,status,storyId,selectedItems]),handleSelect=useCallback((itemId,details)=>{let[type,id]=itemId.split("."),{helpUrl,nodes}=results?.[type]?.find(r=>r.id===id)||{},openedWindow=helpUrl&&window.open(helpUrl,"_blank","noopener,noreferrer");if(nodes&&!openedWindow){let index=nodes.findIndex(n=>details.selectors.some(s=>s===String(n.target)))??-1;if(index!==-1){let key=`${type}.${id}.${index+1}`;setSelectedItems(new Map([[`${type}.${id}`,key]])),setTimeout(()=>{document.getElementById(key)?.scrollIntoView({behavior:"smooth",block:"center"});},100);}}},[results]),handleReport=useCallback(({reporters})=>{let a11yReport=reporters.find(r=>r.type==="a11y");a11yReport&&("error"in a11yReport.result?handleError(a11yReport.result.error):handleResult(a11yReport.result,storyId));},[handleError,handleResult,storyId]),handleReset=useCallback(({newPhase})=>{newPhase==="loading"&&(setResults(void 0),setStatus(manual?"manual":"initial")),newPhase==="afterEach"&&!manual&&setStatus("running");},[manual,setResults]),emit=useChannel({[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError,[EVENTS.SELECT]:handleSelect,[STORY_CHANGED]:()=>setSelectedItems(new Map),[STORY_RENDER_PHASE_CHANGED]:handleReset,[STORY_FINISHED]:handleReport,[STORY_HOT_UPDATED]:()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId,parameters);}},[handleReset,handleReport,handleSelect,handleError,handleResult,parameters,storyId]),handleManual=useCallback(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId,parameters);},[emit,parameters,storyId]),handleCopyLink=useCallback(async linkPath=>{let{createCopyToClipboardFunction}=await import('storybook/internal/components');await createCopyToClipboardFunction()(`${window.location.origin}${linkPath}`);},[]),handleJumpToElement=useCallback(target=>emit(SCROLL_INTO_VIEW,target),[emit]);useEffect(()=>{setStatus(getInitialStatus(manual));},[getInitialStatus,manual]),useEffect(()=>{if(emit(REMOVE_HIGHLIGHT,`${ADDON_ID}/selected`),emit(REMOVE_HIGHLIGHT,`${ADDON_ID}/others`),!highlighted)return;let selected=Array.from(selectedItems.values()).flatMap(key=>{let[type,id,number]=key.split(".");if(type!==tab)return [];let target=results?.[type]?.find(r=>r.id===id)?.nodes[Number(number)-1]?.target;return target?[String(target)]:[]});emit(HIGHLIGHT,{id:`${ADDON_ID}/selected`,priority:1,selectors:selected,styles:{outline:`1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,backgroundColor:"transparent"},hoverStyles:{outlineWidth:"2px"},focusStyles:{backgroundColor:"transparent"},menu:results?.[tab].map(result=>{let selectors=result.nodes.flatMap(n=>n.target).map(String).filter(e=>selected.includes(e));return [{id:`${tab}.${result.id}:info`,title:getTitleForAxeResult(result),description:getFriendlySummaryForAxeResult(result),selectors},{id:`${tab}.${result.id}`,iconLeft:"info",iconRight:"shareAlt",title:"Learn how to resolve this violation",clickEvent:EVENTS.SELECT,selectors}]})});let others=results?.[tab].flatMap(r=>r.nodes.flatMap(n=>n.target).map(String)).filter(e=>![...unhighlightedSelectors,...selected].includes(e));emit(HIGHLIGHT,{id:`${ADDON_ID}/others`,selectors:others,styles:{outline:`1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,backgroundColor:`color-mix(in srgb, ${colorsByType[tab]}, transparent 60%)`},hoverStyles:{outlineWidth:"2px"},focusStyles:{backgroundColor:"transparent"},menu:results?.[tab].map(result=>{let selectors=result.nodes.flatMap(n=>n.target).map(String).filter(e=>!selected.includes(e));return [{id:`${tab}.${result.id}:info`,title:getTitleForAxeResult(result),description:getFriendlySummaryForAxeResult(result),selectors},{id:`${tab}.${result.id}`,iconLeft:"info",iconRight:"shareAlt",title:"Learn how to resolve this violation",clickEvent:EVENTS.SELECT,selectors}]})});},[emit,highlighted,results,tab,selectedItems]);let discrepancy=useMemo(()=>{if(!currentStoryA11yStatusValue)return null;if(currentStoryA11yStatusValue==="status-value:success"&&results?.violations.length)return "cliPassedBrowserFailed";if(currentStoryA11yStatusValue==="status-value:error"&&!results?.violations.length){if(status==="ready"||status==="ran")return "browserPassedCliFailed";if(status==="manual")return "cliFailedButModeManual"}return null},[results?.violations.length,status,currentStoryA11yStatusValue]);return React7__default.createElement(A11yContext.Provider,{value:{parameters,results,highlighted,toggleHighlight:handleToggleHighlight,tab,setTab,handleCopyLink,status,setStatus,error,handleManual,discrepancy,selectedItems,toggleOpen,allExpanded,handleCollapseAll,handleExpandAll,handleJumpToElement,handleSelectionChange},...props})},useA11yContext=()=>useContext(A11yContext);function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r]);}return n},_extends.apply(null,arguments)}function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler,ourEventHandler,{checkForDefaultPrevented=!0}={}){return function(event){if(originalEventHandler?.(event),checkForDefaultPrevented===!1||!event.defaultPrevented)return ourEventHandler?.(event)}}function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName,createContextScopeDeps=[]){let defaultContexts=[];function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName,defaultContext){let BaseContext=createContext(defaultContext),index=defaultContexts.length;defaultContexts=[...defaultContexts,defaultContext];function Provider(props){let{scope,children,...context}=props,Context=scope?.[scopeName][index]||BaseContext,value=useMemo(()=>context,Object.values(context));return createElement(Context.Provider,{value},children)}function useContext2(consumerName,scope){let Context=scope?.[scopeName][index]||BaseContext,context=useContext(Context);if(context)return context;if(defaultContext!==void 0)return defaultContext;throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``)}return Provider.displayName=rootComponentName+"Provider",[Provider,useContext2]}let createScope=()=>{let scopeContexts=defaultContexts.map(defaultContext=>createContext(defaultContext));return function(scope){let contexts=scope?.[scopeName]||scopeContexts;return useMemo(()=>({[`__scope${scopeName}`]:{...scope,[scopeName]:contexts}}),[scope,contexts])}};return createScope.scopeName=scopeName,[$c512c27ab02ef895$export$fd42f52fd3ae1109,$c512c27ab02ef895$var$composeContextScopes(createScope,...createContextScopeDeps)]}function $c512c27ab02ef895$var$composeContextScopes(...scopes){let baseScope=scopes[0];if(scopes.length===1)return baseScope;let createScope1=()=>{let scopeHooks=scopes.map(createScope=>({useScope:createScope(),scopeName:createScope.scopeName}));return function(overrideScopes){let nextScopes1=scopeHooks.reduce((nextScopes,{useScope,scopeName})=>{let currentScope=useScope(overrideScopes)[`__scope${scopeName}`];return {...nextScopes,...currentScope}},{});return useMemo(()=>({[`__scope${baseScope.scopeName}`]:nextScopes1}),[nextScopes1])}};return createScope1.scopeName=baseScope.scopeName,createScope1}function $6ed0406888f73fc4$var$setRef(ref,value){typeof ref=="function"?ref(value):ref!=null&&(ref.current=value);}function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs){return node=>refs.forEach(ref=>$6ed0406888f73fc4$var$setRef(ref,node))}function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs){return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs),refs)}var $5e63c961fc1ce211$export$8c6ed5c666ac1360=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props,childrenArray=Children.toArray(children),slottable=childrenArray.find($5e63c961fc1ce211$var$isSlottable);if(slottable){let newElement=slottable.props.children,newChildren=childrenArray.map(child=>child===slottable?Children.count(newElement)>1?Children.only(null):isValidElement(newElement)?newElement.props.children:null:child);return createElement($5e63c961fc1ce211$var$SlotClone,_extends({},slotProps,{ref:forwardedRef}),isValidElement(newElement)?cloneElement(newElement,void 0,newChildren):null)}return createElement($5e63c961fc1ce211$var$SlotClone,_extends({},slotProps,{ref:forwardedRef}),children)});$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName="Slot";var $5e63c961fc1ce211$var$SlotClone=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props;return isValidElement(children)?cloneElement(children,{...$5e63c961fc1ce211$var$mergeProps(slotProps,children.props),ref:forwardedRef?$6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef,children.ref):children.ref}):Children.count(children)>1?Children.only(null):null});$5e63c961fc1ce211$var$SlotClone.displayName="SlotClone";var $5e63c961fc1ce211$export$d9f1ccf0bdb05d45=({children})=>createElement(Fragment,null,children);function $5e63c961fc1ce211$var$isSlottable(child){return isValidElement(child)&&child.type===$5e63c961fc1ce211$export$d9f1ccf0bdb05d45}function $5e63c961fc1ce211$var$mergeProps(slotProps,childProps){let overrideProps={...childProps};for(let propName in childProps){let slotPropValue=slotProps[propName],childPropValue=childProps[propName];/^on[A-Z]/.test(propName)?slotPropValue&&childPropValue?overrideProps[propName]=(...args)=>{childPropValue(...args),slotPropValue(...args);}:slotPropValue&&(overrideProps[propName]=slotPropValue):propName==="style"?overrideProps[propName]={...slotPropValue,...childPropValue}:propName==="className"&&(overrideProps[propName]=[slotPropValue,childPropValue].filter(Boolean).join(" "));}return {...slotProps,...overrideProps}}function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name){let PROVIDER_NAME=name+"CollectionProvider",[createCollectionContext,createCollectionScope]=$c512c27ab02ef895$export$50c7b4e9d9f19c1(PROVIDER_NAME),[CollectionProviderImpl,useCollectionContext]=createCollectionContext(PROVIDER_NAME,{collectionRef:{current:null},itemMap:new Map}),CollectionProvider=props=>{let{scope,children}=props,ref=React7__default.useRef(null),itemMap=React7__default.useRef(new Map).current;return React7__default.createElement(CollectionProviderImpl,{scope,itemMap,collectionRef:ref},children)},COLLECTION_SLOT_NAME=name+"CollectionSlot",CollectionSlot=React7__default.forwardRef((props,forwardedRef)=>{let{scope,children}=props,context=useCollectionContext(COLLECTION_SLOT_NAME,scope),composedRefs=$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef,context.collectionRef);return React7__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360,{ref:composedRefs},children)}),ITEM_SLOT_NAME=name+"CollectionItemSlot",ITEM_DATA_ATTR="data-radix-collection-item",CollectionItemSlot=React7__default.forwardRef((props,forwardedRef)=>{let{scope,children,...itemData}=props,ref=React7__default.useRef(null),composedRefs=$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef,ref),context=useCollectionContext(ITEM_SLOT_NAME,scope);return React7__default.useEffect(()=>(context.itemMap.set(ref,{ref,...itemData}),()=>void context.itemMap.delete(ref))),React7__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360,{[ITEM_DATA_ATTR]:"",ref:composedRefs},children)});function useCollection(scope){let context=useCollectionContext(name+"CollectionConsumer",scope);return React7__default.useCallback(()=>{let collectionNode=context.collectionRef.current;if(!collectionNode)return [];let orderedNodes=Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));return Array.from(context.itemMap.values()).sort((a,b)=>orderedNodes.indexOf(a.ref.current)-orderedNodes.indexOf(b.ref.current))},[context.collectionRef,context.itemMap])}return [{Provider:CollectionProvider,Slot:CollectionSlot,ItemSlot:CollectionItemSlot},useCollection,createCollectionScope]}function $6ed0406888f73fc4$var$setRef2(ref,value){typeof ref=="function"?ref(value):ref!=null&&(ref.current=value);}function $6ed0406888f73fc4$export$43e446d32b3d21af2(...refs){return node=>refs.forEach(ref=>$6ed0406888f73fc4$var$setRef2(ref,node))}function $6ed0406888f73fc4$export$c7b2cbe3552a0d052(...refs){return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af2(...refs),refs)}var $9f79659886946c16$export$e5c5a5f917a5871c=globalThis?.document?useLayoutEffect:()=>{};var $1746a345f3d73bb7$var$useReactId=React7.useId||(()=>{}),$1746a345f3d73bb7$var$count=0;function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId){let[id,setId]=React7.useState($1746a345f3d73bb7$var$useReactId());return $9f79659886946c16$export$e5c5a5f917a5871c(()=>{deterministicId||setId(reactId=>reactId??String($1746a345f3d73bb7$var$count++));},[deterministicId]),deterministicId||(id?`radix-${id}`:"")}var $5e63c961fc1ce211$export$8c6ed5c666ac13602=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props,childrenArray=Children.toArray(children),slottable=childrenArray.find($5e63c961fc1ce211$var$isSlottable2);if(slottable){let newElement=slottable.props.children,newChildren=childrenArray.map(child=>child===slottable?Children.count(newElement)>1?Children.only(null):isValidElement(newElement)?newElement.props.children:null:child);return createElement($5e63c961fc1ce211$var$SlotClone2,_extends({},slotProps,{ref:forwardedRef}),isValidElement(newElement)?cloneElement(newElement,void 0,newChildren):null)}return createElement($5e63c961fc1ce211$var$SlotClone2,_extends({},slotProps,{ref:forwardedRef}),children)});$5e63c961fc1ce211$export$8c6ed5c666ac13602.displayName="Slot";var $5e63c961fc1ce211$var$SlotClone2=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props;return isValidElement(children)?cloneElement(children,{...$5e63c961fc1ce211$var$mergeProps2(slotProps,children.props),ref:forwardedRef?$6ed0406888f73fc4$export$43e446d32b3d21af2(forwardedRef,children.ref):children.ref}):Children.count(children)>1?Children.only(null):null});$5e63c961fc1ce211$var$SlotClone2.displayName="SlotClone";var $5e63c961fc1ce211$export$d9f1ccf0bdb05d452=({children})=>createElement(Fragment,null,children);function $5e63c961fc1ce211$var$isSlottable2(child){return isValidElement(child)&&child.type===$5e63c961fc1ce211$export$d9f1ccf0bdb05d452}function $5e63c961fc1ce211$var$mergeProps2(slotProps,childProps){let overrideProps={...childProps};for(let propName in childProps){let slotPropValue=slotProps[propName],childPropValue=childProps[propName];/^on[A-Z]/.test(propName)?slotPropValue&&childPropValue?overrideProps[propName]=(...args)=>{childPropValue(...args),slotPropValue(...args);}:slotPropValue&&(overrideProps[propName]=slotPropValue):propName==="style"?overrideProps[propName]={...slotPropValue,...childPropValue}:propName==="className"&&(overrideProps[propName]=[slotPropValue,childPropValue].filter(Boolean).join(" "));}return {...slotProps,...overrideProps}}var $8927f6f2acc4f386$var$NODES=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],$8927f6f2acc4f386$export$250ffa63cdc0d034=$8927f6f2acc4f386$var$NODES.reduce((primitive,node)=>{let Node=forwardRef((props,forwardedRef)=>{let{asChild,...primitiveProps}=props,Comp=asChild?$5e63c961fc1ce211$export$8c6ed5c666ac13602:node;return useEffect(()=>{window[Symbol.for("radix-ui")]=!0;},[]),createElement(Comp,_extends({},primitiveProps,{ref:forwardedRef}))});return Node.displayName=`Primitive.${node}`,{...primitive,[node]:Node}},{});function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback){let callbackRef=useRef(callback);return useEffect(()=>{callbackRef.current=callback;}),useMemo(()=>(...args)=>{var _callbackRef$current;return (_callbackRef$current=callbackRef.current)===null||_callbackRef$current===void 0?void 0:_callbackRef$current.call(callbackRef,...args)},[])}function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(callback){let callbackRef=useRef(callback);return useEffect(()=>{callbackRef.current=callback;}),useMemo(()=>(...args)=>{var _callbackRef$current;return (_callbackRef$current=callbackRef.current)===null||_callbackRef$current===void 0?void 0:_callbackRef$current.call(callbackRef,...args)},[])}function $71cd76cc60e0454e$export$6f32135080cb4c3({prop,defaultProp,onChange=()=>{}}){let[uncontrolledProp,setUncontrolledProp]=$71cd76cc60e0454e$var$useUncontrolledState({defaultProp,onChange}),isControlled=prop!==void 0,value1=isControlled?prop:uncontrolledProp,handleChange=$b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange),setValue=useCallback(nextValue=>{if(isControlled){let value=typeof nextValue=="function"?nextValue(prop):nextValue;value!==prop&&handleChange(value);}else setUncontrolledProp(nextValue);},[isControlled,prop,setUncontrolledProp,handleChange]);return [value1,setValue]}function $71cd76cc60e0454e$var$useUncontrolledState({defaultProp,onChange}){let uncontrolledState=useState(defaultProp),[value]=uncontrolledState,prevValueRef=useRef(value),handleChange=$b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange);return useEffect(()=>{prevValueRef.current!==value&&(handleChange(value),prevValueRef.current=value);},[value,prevValueRef,handleChange]),uncontrolledState}var $f631663db3294ace$var$DirectionContext=createContext(void 0);function $f631663db3294ace$export$b39126d51d94e6f3(localDir){let globalDir=useContext($f631663db3294ace$var$DirectionContext);return localDir||globalDir||"ltr"}var $d7bdfb9eb0fdf311$var$ENTRY_FOCUS="rovingFocusGroup.onEntryFocus",$d7bdfb9eb0fdf311$var$EVENT_OPTIONS={bubbles:!1,cancelable:!0},$d7bdfb9eb0fdf311$var$GROUP_NAME="RovingFocusGroup",[$d7bdfb9eb0fdf311$var$Collection,$d7bdfb9eb0fdf311$var$useCollection,$d7bdfb9eb0fdf311$var$createCollectionScope]=$e02a7d9cb1dc128c$export$c74125a8e3af6bb2($d7bdfb9eb0fdf311$var$GROUP_NAME),[$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext,$d7bdfb9eb0fdf311$export$c7109489551a4f4]=$c512c27ab02ef895$export$50c7b4e9d9f19c1($d7bdfb9eb0fdf311$var$GROUP_NAME,[$d7bdfb9eb0fdf311$var$createCollectionScope]),[$d7bdfb9eb0fdf311$var$RovingFocusProvider,$d7bdfb9eb0fdf311$var$useRovingFocusContext]=$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME),$d7bdfb9eb0fdf311$export$8699f7c8af148338=forwardRef((props,forwardedRef)=>createElement($d7bdfb9eb0fdf311$var$Collection.Provider,{scope:props.__scopeRovingFocusGroup},createElement($d7bdfb9eb0fdf311$var$Collection.Slot,{scope:props.__scopeRovingFocusGroup},createElement($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl,_extends({},props,{ref:forwardedRef}))))),$d7bdfb9eb0fdf311$var$RovingFocusGroupImpl=forwardRef((props,forwardedRef)=>{let{__scopeRovingFocusGroup,orientation,loop=!1,dir,currentTabStopId:currentTabStopIdProp,defaultCurrentTabStopId,onCurrentTabStopIdChange,onEntryFocus,...groupProps}=props,ref=useRef(null),composedRefs=$6ed0406888f73fc4$export$c7b2cbe3552a0d052(forwardedRef,ref),direction=$f631663db3294ace$export$b39126d51d94e6f3(dir),[currentTabStopId=null,setCurrentTabStopId]=$71cd76cc60e0454e$export$6f32135080cb4c3({prop:currentTabStopIdProp,defaultProp:defaultCurrentTabStopId,onChange:onCurrentTabStopIdChange}),[isTabbingBackOut,setIsTabbingBackOut]=useState(!1),handleEntryFocus=$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEntryFocus),getItems=$d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup),isClickFocusRef=useRef(!1),[focusableItemsCount,setFocusableItemsCount]=useState(0);return useEffect(()=>{let node=ref.current;if(node)return node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS,handleEntryFocus),()=>node.removeEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS,handleEntryFocus)},[handleEntryFocus]),createElement($d7bdfb9eb0fdf311$var$RovingFocusProvider,{scope:__scopeRovingFocusGroup,orientation,dir:direction,loop,currentTabStopId,onItemFocus:useCallback(tabStopId=>setCurrentTabStopId(tabStopId),[setCurrentTabStopId]),onItemShiftTab:useCallback(()=>setIsTabbingBackOut(!0),[]),onFocusableItemAdd:useCallback(()=>setFocusableItemsCount(prevCount=>prevCount+1),[]),onFocusableItemRemove:useCallback(()=>setFocusableItemsCount(prevCount=>prevCount-1),[])},createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div,_extends({tabIndex:isTabbingBackOut||focusableItemsCount===0?-1:0,"data-orientation":orientation},groupProps,{ref:composedRefs,style:{outline:"none",...props.style},onMouseDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown,()=>{isClickFocusRef.current=!0;}),onFocus:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus,event=>{let isKeyboardFocus=!isClickFocusRef.current;if(event.target===event.currentTarget&&isKeyboardFocus&&!isTabbingBackOut){let entryFocusEvent=new CustomEvent($d7bdfb9eb0fdf311$var$ENTRY_FOCUS,$d7bdfb9eb0fdf311$var$EVENT_OPTIONS);if(event.currentTarget.dispatchEvent(entryFocusEvent),!entryFocusEvent.defaultPrevented){let items=getItems().filter(item=>item.focusable),activeItem=items.find(item=>item.active),currentItem=items.find(item=>item.id===currentTabStopId),candidateNodes=[activeItem,currentItem,...items].filter(Boolean).map(item=>item.ref.current);$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes);}}isClickFocusRef.current=!1;}),onBlur:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur,()=>setIsTabbingBackOut(!1))})))}),$d7bdfb9eb0fdf311$var$ITEM_NAME="RovingFocusGroupItem",$d7bdfb9eb0fdf311$export$ab9df7c53fe8454=forwardRef((props,forwardedRef)=>{let{__scopeRovingFocusGroup,focusable=!0,active=!1,tabStopId,...itemProps}=props,autoId=$1746a345f3d73bb7$export$f680877a34711e37(),id=tabStopId||autoId,context=$d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME,__scopeRovingFocusGroup),isCurrentTabStop=context.currentTabStopId===id,getItems=$d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup),{onFocusableItemAdd,onFocusableItemRemove}=context;return useEffect(()=>{if(focusable)return onFocusableItemAdd(),()=>onFocusableItemRemove()},[focusable,onFocusableItemAdd,onFocusableItemRemove]),createElement($d7bdfb9eb0fdf311$var$Collection.ItemSlot,{scope:__scopeRovingFocusGroup,id,focusable,active},createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span,_extends({tabIndex:isCurrentTabStop?0:-1,"data-orientation":context.orientation},itemProps,{ref:forwardedRef,onMouseDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown,event=>{focusable?context.onItemFocus(id):event.preventDefault();}),onFocus:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus,()=>context.onItemFocus(id)),onKeyDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown,event=>{if(event.key==="Tab"&&event.shiftKey){context.onItemShiftTab();return}if(event.target!==event.currentTarget)return;let focusIntent=$d7bdfb9eb0fdf311$var$getFocusIntent(event,context.orientation,context.dir);if(focusIntent!==void 0){event.preventDefault();let candidateNodes=getItems().filter(item=>item.focusable).map(item=>item.ref.current);if(focusIntent==="last")candidateNodes.reverse();else if(focusIntent==="prev"||focusIntent==="next"){focusIntent==="prev"&&candidateNodes.reverse();let currentIndex=candidateNodes.indexOf(event.currentTarget);candidateNodes=context.loop?$d7bdfb9eb0fdf311$var$wrapArray(candidateNodes,currentIndex+1):candidateNodes.slice(currentIndex+1);}setTimeout(()=>$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes));}})})))}),$d7bdfb9eb0fdf311$var$MAP_KEY_