Repository: streamlit/streamlit
File: frontend/lib/src/components/elements/Metric/Metric.tsx (TypeScript)

Code before:
            <WidgetLabelHelpIconInline
              content={help}
              placement={Placement.TOP_RIGHT}
              label={label}
            />
          )}
        </StyledMetricLabelText>
        <StyledMetricValueText data-testid="stMetricValue">
          <StreamlitMarkdown
            source={formattedMetricValue}
            allowHTML={false}
            isLabel // Treat the metric value with the label limitations.
            inheritFont
            truncate
          />
        </StyledMetricValueText>
        {(deltaExists || deltaDescription) && (
          <StyledDeltaContainer>
            {deltaExists && (
              <StyledMetricDeltaText
                data-testid="stMetricDelta"
                metricColor={color}
                showArrow={metricDirection !== null}
                aria-describedby={
                  deltaDescription
                    ? `${deltaA11yId}-delta-description`
                    : undefined
                }
              >
                {metricDirection && (
                  <Icon
                    testid={
                      metricDirection === ArrowUpward
                        ? "stMetricDeltaIcon-Up"
                        : "stMetricDeltaIcon-Down"
                    }
                    content={metricDirection}
                    size="md"
                    margin={arrowMargin}
                  />
                )}
                <StreamlitMarkdown
                  source={formattedDelta}
                  allowHTML={false}
                  isLabel // Treat the metric delta with the label limitations.
                  inheritFont
                  truncate
                />
              </StyledMetricDeltaText>
            )}
            {deltaDescription && (

Review comment (suggestion):
**suggestion (non-blocking):** It is not necessary to add anything extra to the returned string from `useId`. For simplicity, just using `deltaDescription ? deltaA11yId : undefined` is sufficient. 

Code after:
            <WidgetLabelHelpIconInline
              content={help}
              placement={Placement.TOP_RIGHT}
              label={label}
            />
          )}
        </StyledMetricLabelText>
        <StyledMetricValueText data-testid="stMetricValue">
          <StreamlitMarkdown
            source={formattedMetricValue}
            allowHTML={false}
            isLabel // Treat the metric value with the label limitations.
            inheritFont
            truncate
          />
        </StyledMetricValueText>
        {(deltaExists || deltaDescription) && (
          <StyledDeltaContainer>
            {deltaExists && (
              <StyledMetricDeltaText
                data-testid="stMetricDelta"
                metricColor={color}
                showArrow={metricDirection !== null}
                aria-describedby={deltaDescription ? deltaA11yId : undefined}
              >
                {metricDirection && (
                  <Icon
                    testid={
                      metricDirection === ArrowUpward
                        ? "stMetricDeltaIcon-Up"
                        : "stMetricDeltaIcon-Down"
                    }
                    content={metricDirection}
                    size="md"
                    margin={arrowMargin}
                  />
                )}
                <StreamlitMarkdown
                  source={formattedDelta}
                  allowHTML={false}
                  isLabel // Treat the metric delta with the label limitations.
                  inheritFont
                  truncate
                />
              </StyledMetricDeltaText>
            )}
            {deltaDescription && (
              <StyledDeltaDescription
                data-testid="stMetricDeltaDescription"
                id={deltaA11yId}
                title={deltaDescription}