Repository: storybookjs/storybook
File: code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx (TypeScript)

Code before:
    if (cannotBeSafelySplitted) {
      return <ArgText text={summaryAsString} />;
    }

    const summaryItems = getSummaryItems(summaryAsString);
    const itemsCount = summaryItems.length;
    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;

    return hasManyItems ? (
      <Summary isExpanded={isExpanded}>
        {renderSummaryItems(summaryItems)}
        <DetailsContainer open={isExpanded} onToggle={(e) => setIsExpanded(e.currentTarget.open)}>
          <AlignedDetails>{renderExpandedItems(summaryItems)}</AlignedDetails>
          <ExpandButton role="button">
            {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
          </ExpandButton>
        </DetailsContainer>
      </Summary>
    ) : (
      <Summary>{renderSummaryItems(summaryItems)}</Summary>
    );
  }

  return (
    <PopoverProvider
      ariaLabel="Argument value details"
      placement="bottom"
      visible={isOpen}
      onVisibleChange={(isVisible) => {
        setIsOpen(isVisible);
      }}
      hasCloseButton
      popover={
        <Detail>
          <SyntaxHighlighter language="jsx" format={false}>
            {detail}
          </SyntaxHighlighter>
        </Detail>
      }
    >
      <Expandable className="sbdocs-expandable">
        <span>{summaryAsString}</span>
        {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
      </Expandable>
    </PopoverProvider>
  );
};

export const ArgValue: FC<ArgValueProps> = ({ value, initialExpandedArgs }) => {
  return value == null ? (
    <EmptyArg />

Review comment (suggestion):
```suggestion
      ariaLabel="Arg value details"
```

We use the 'arg' wording in the documentation and product throughout.

Code after:
    if (cannotBeSafelySplitted) {
      return <ArgText text={summaryAsString} />;
    }

    const summaryItems = getSummaryItems(summaryAsString);
    const itemsCount = summaryItems.length;
    const hasManyItems = itemsCount > ITEMS_BEFORE_EXPANSION;

    return hasManyItems ? (
      <Summary isExpanded={isExpanded}>
        {renderSummaryItems(summaryItems)}
        <DetailsContainer open={isExpanded} onToggle={(e) => setIsExpanded(e.currentTarget.open)}>
          <AlignedDetails>{renderExpandedItems(summaryItems)}</AlignedDetails>
          <ExpandButton role="button">
            {isExpanded ? 'Show less...' : `Show ${itemsCount - ITEMS_BEFORE_EXPANSION} more...`}
          </ExpandButton>
        </DetailsContainer>
      </Summary>
    ) : (
      <Summary>{renderSummaryItems(summaryItems)}</Summary>
    );
  }

  return (
    <PopoverProvider
      ariaLabel="Arg value details"
      placement="bottom"
      visible={isOpen}
      onVisibleChange={(isVisible) => {
        setIsOpen(isVisible);
      }}
      hasCloseButton
      popover={
        <Detail>
          <SyntaxHighlighter language="jsx" format={false}>
            {detail}
          </SyntaxHighlighter>
        </Detail>
      }
    >
      <Expandable className="sbdocs-expandable">
        <span>{summaryAsString}</span>
        {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
      </Expandable>
    </PopoverProvider>
  );
};

export const ArgValue: FC<ArgValueProps> = ({ value, initialExpandedArgs }) => {
  return value == null ? (
    <EmptyArg />