fix: controlled input forms accessibility violations

[abdulbasithqb]

What does this PR do?

controlled input forms storybook

Where should the reviewer start?

storybook

What testing has been done on this PR?

yarn test

How should this be manually tested?

Check the accessibility tab in the Forms/ControlledInput storybook

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

#6124

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No

Should this PR be mentioned in the release notes?

No

Is this change backwards compatible or is it a breaking change?

No

[jcfilben]

I am still seeing an accessibility issue on the Form/ControlledInput story. I believe the 'interactive controls must not be nested' is part of a larger issue originating in the Select component.

[abdulbasithqb]

I am still seeing an accessibility issue on the Form/ControlledInput story. I believe the 'interactive controls must not be nested' is part of a larger issue originating in the Select component.

Thanks for the review,
Encountering the same problem after restarting Metro. Not sure why it didn't show earlier. It seems the Select component might be the culprit, as it's nested inside the input. Probably need to update existing Select components since they have a button nested inside.