extra spacing due to ScreenReaderOnly in Buttons

[vankhoawin]

Hello team, had a very minor question about using <ScreenReaderOnly /> in a <Button />. In the documentation we see it being used like:

<Button variant="secondary" size="small">
   Buy <ScreenReaderOnly>+1 (903) 603-9469</ScreenReaderOnly>
</Button>

This however creates a small invisible space, it looks like children within a Button get some margin between each other (see screenshots below):

We've gotten around this issue by using this code instead:

<Button variant="secondary" size="small">
  <Text as="span">
    Buy
    <ScreenReaderOnly> +1 (903) 603-9469</ScreenReaderOnly>
  </Text>
</Button>

Do we need to make any revisions to the documentation or the margin in Button children to revise this?

https://paste.twilio.design/components/screen-reader-only#providing-clear-actions-while-still-reducing-visual-repetition

[nkrantz]

Hi @vnguyen94, thanks for bringing this to our attention! We actually have a ticket for this that was sitting deep in the backlog (😬), we're going to talk about prioritizing it at our next backlog refinement. Keep track here: https://issues.corp.twilio.com/browse/DSYS-2188

[vankhoawin]

perfect thank you!

[nkrantz]

Hey @vnguyen94! Just here with an update that this fix was merged in today. Let us know if you have any more issues with it!