Label with required prop creates extra vertical scroll

[dairdr]

Description

Description:
When the Label component is used with the required prop as true (<Label required />), an child element in the Label, like the red dot creates an extra element as child that it seems to be for screen readers and push extra space to the bottom of the parent so a scroll is created.

Before scroll:

After scroll:

Link to Reproduction

https://codesandbox.io/p/sandbox/upbeat-hill-l6jjwy

Steps to reproduce

1. Go to the Code Sandbox link.
2. Open the Preview in a separated window so you can control all the viewport.
3. Resize the viewport to the size of an iPad Air or use 1180x820
4. Try to scroll/swipe down in the footer container.

Paste Core Version

latest

Browser

Google Chrome Version 135.0.7049.42 (Official Build) (arm64)

Operating System

• macOS
• Windows
• Linux

Additional Information

• This is the link provided by Code Sandbox to the Preview Only option https://l6jjwy.csb.app
• If you remove the width or height CSS rule from the Culprit element, the issue is gone.
• Possible solution is to add the top: 0; CSS rule to the Culprit element and add position: relative; to its parent.

[serifluous]

Hey @dairdr! Thank you for creating a CodeSandbox repro—we're looking into this now!

[krisantrobus]

Hi @dairdr I took a look into it and you are correct. The ScreenReaderOnly is what is causing the issue. It's used for visually impaired users so when they focus on an element where it is contained it is announced.

This element has a position absolute which, in all our stories is being placed correctly on the dot. I am not sure exactly what may be causing the issue, it could be having alrge content inside a FormControl possibility of nested scrollable content or something I am not seeing immediately.

I will create a ticket in our backlog to add the position attribute to relative on the dot itself so it is contained. A workaround for you in the meantime can be to wrap the required labels in a box with position="relative".