CounterLabel doesn't work for non-string children

[dwilsonactual]

Description

On the search results page (e.g.) we use the <CounterLabel> element, which is rendering "([object Object])":

<span class="_VisuallyHidden__VisuallyHidden-sc-11jhm7a-0 rTZSs">&nbsp;([object Object])</span>

Which is not great.

CounterLabel should render this correctly or be updated to only accept string children.

Steps to reproduce

We use CounterLabel like this

    <CounterLabel data-testid="resolved-count-label" sx={{height: 20, lineHeight: '20px', py: 0, px: 2}}>
      <Count isLowerBound={resultCountIsLowerBound} value={totalResults} />
    </CounterLabel>

But CounterLabel has code that renders this:

<VisuallyHidden>&nbsp;{`(${children})`}</VisuallyHidden>

Which doesn't work for children that aren't simple strings.

Version

35.18.0

Browser

Chrome, Safari, Firefox, Edge, iOS Safari

[mattcosta7]

or be updated to only accept string children

Would number children be better in this case, to avoid arbitrary text that shouldn't be in a CounterLabel?

[dwilsonactual]

I don't think number will work, because we use it to render things like "12k" or "15M" (which is what our Count component is doing)

[broccolinisoup]

Hi @dwilsonactual 👋🏻 Thank you so much for reporting this issue and sorry for the inconvenience! The text around the {children} in

<VisuallyHidden>&nbsp;{`(${children})`}</VisuallyHidden>

is introduced to improve accessibility mainly for allowing screen readers to pause before reading the counter. However I just realised that we don't need to parse the children as string to be able to achieve that.

<VisuallyHidden>&nbsp;({children})</VisuallyHidden>

works just as good as the previous one. I tested with the screen reader. It just generates a different markup but I don't think it would be an issue - will double check with the #accessibility though

update: slack thread link for accessibility check