Enable highlights by default when following a deeplink

This commit is contained in:
Gert Hengeveld 2025-03-26 16:48:48 +01:00
parent 7ce5598bb2
commit ee47d66738

View File

@ -107,6 +107,7 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
}); });
const [globals] = useGlobals() ?? []; const [globals] = useGlobals() ?? [];
const api = useStorybookApi();
const getInitialStatus = useCallback((manual = false) => (manual ? 'manual' : 'initial'), []); const getInitialStatus = useCallback((manual = false) => (manual ? 'manual' : 'initial'), []);
@ -115,11 +116,13 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
[globals?.a11y?.manual, parameters.manual] [globals?.a11y?.manual, parameters.manual]
); );
const api = useStorybookApi(); const a11ySelection = useMemo(() => {
const a11ySelection = api.getQueryParam('a11ySelection'); const value = api.getQueryParam('a11ySelection');
if (a11ySelection) { if (value) {
api.setQueryParams({ a11ySelection: '' }); api.setQueryParams({ a11ySelection: '' });
} }
return value;
}, [api]);
const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult); const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
const [tab, setTab] = useState(() => { const [tab, setTab] = useState(() => {
@ -130,7 +133,7 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
}); });
const [error, setError] = useState<unknown>(undefined); const [error, setError] = useState<unknown>(undefined);
const [status, setStatus] = useState<Status>(getInitialStatus(manual)); const [status, setStatus] = useState<Status>(getInitialStatus(manual));
const [highlighted, setHighlighted] = useState(false); const [highlighted, setHighlighted] = useState(!!a11ySelection);
const { storyId } = useStorybookState(); const { storyId } = useStorybookState();
const currentStoryA11yStatusValue = experimental_useStatusStore( const currentStoryA11yStatusValue = experimental_useStatusStore(