Repository: storybookjs/storybook
File: code/core/src/manager/components/sidebar/RefIndicator.tsx (TypeScript)

Code before:
export const RefIndicator = React.memo(
  forwardRef<HTMLDivElement, RefType & { state: ReturnType<typeof getStateType> }>(
    ({ state, ...ref }, forwardedRef) => {
      const api = useStorybookApi();
      const { isMobile } = useLayout();
      const list = useMemo(() => Object.values(ref.index || {}), [ref.index]);
      const componentCount = useMemo(
        () => list.filter((v) => v.type === 'component').length,
        [list]
      );
      const leafCount = useMemo(
        () => list.filter((v) => v.type === 'docs' || v.type === 'story').length,
        [list]
      );

      const currentVersion = useMemo(() => {
        if (ref.versions) {
          return Object.entries(ref.versions).find(([, v]) => v === ref.url)?.[0];
        }
        return undefined;
      }, [ref.versions, ref.url]);

      return (
        <IndicatorPlacement ref={forwardedRef}>
          <PopoverProvider
            ariaLabel="Storybook status"
            placement={isMobile ? 'bottom' : 'bottom-start'}
            padding={0}
            popover={() => (
              <MessageWrapper isMobile={isMobile}>
                <Spaced row={0}>
                  {state === 'loading' && <LoadingMessage url={ref.url} />}
                  {(state === 'error' || state === 'empty') && (
                    <ErrorOccurredMessage url={ref.url} />
                  )}
                  {state === 'ready' && (
                    <>
                      <ReadyMessage {...{ url: ref.url, componentCount, leafCount }} />
                      {ref.sourceUrl && <SourceCodeMessage url={ref.sourceUrl} />}
                    </>
                  )}
                  {state === 'auth' && <LoginRequiredMessage {...ref} />}
                  {ref.type === 'auto-inject' && state !== 'error' && (
                    <PerformanceDegradedMessage />
                  )}
                  {state !== 'loading' && <ReadDocsMessage />}
                </Spaced>
              </MessageWrapper>
            )}
          >
            <IndicatorClickTarget

Review comment (suggestion):
```suggestion
            ariaLabel="Composed Storybook status"
```

Code after:
export const RefIndicator = React.memo(
  forwardRef<HTMLDivElement, RefType & { state: ReturnType<typeof getStateType> }>(
    ({ state, ...ref }, forwardedRef) => {
      const api = useStorybookApi();
      const { isMobile } = useLayout();
      const list = useMemo(() => Object.values(ref.index || {}), [ref.index]);
      const componentCount = useMemo(
        () => list.filter((v) => v.type === 'component').length,
        [list]
      );
      const leafCount = useMemo(
        () => list.filter((v) => v.type === 'docs' || v.type === 'story').length,
        [list]
      );

      const currentVersion = useMemo(() => {
        if (ref.versions) {
          return Object.entries(ref.versions).find(([, v]) => v === ref.url)?.[0];
        }
        return undefined;
      }, [ref.versions, ref.url]);

      return (
        <IndicatorPlacement ref={forwardedRef}>
          <PopoverProvider
            ariaLabel="Composed Storybook status"
            placement={isMobile ? 'bottom' : 'bottom-start'}
            padding={0}
            popover={() => (
              <MessageWrapper isMobile={isMobile}>
                <Spaced row={0}>
                  {state === 'loading' && <LoadingMessage url={ref.url} />}
                  {(state === 'error' || state === 'empty') && (
                    <ErrorOccurredMessage url={ref.url} />
                  )}
                  {state === 'ready' && (
                    <>
                      <ReadyMessage {...{ url: ref.url, componentCount, leafCount }} />
                      {ref.sourceUrl && <SourceCodeMessage url={ref.sourceUrl} />}
                    </>
                  )}
                  {state === 'auth' && <LoginRequiredMessage {...ref} />}
                  {ref.type === 'auto-inject' && state !== 'error' && (
                    <PerformanceDegradedMessage />
                  )}
                  {state !== 'loading' && <ReadDocsMessage />}
                </Spaced>
              </MessageWrapper>
            )}
          >
            <IndicatorClickTarget