bug: Input overlaps Label in MD mode causing a11y WCAG warning

[kensodemann]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
In MD mode, the IonInput slightly overlaps the IonLabel which results in the following WCAG warning:

Element's background color could not be determined because it is overlapped by another element

Expected behavior:
No overlap

Steps to reproduce:

• ionic start test-list blank --type=react
• modify Home.tsx to contain an IonList with a couple of labeled inputs

If you run the app in MD mode you can highlight the input and see the slight overlap with the label

In ios mode the spacing is proper without overlap.

Related code:

I just added the following list to Home.tsx in place of the <ExploreContainer />

        <IonList>
          <div>
            <IonLabel position="stacked">Label One</IonLabel>
            <IonInput placeholder="one"></IonInput>
          </div>
          <IonItem>
            <IonLabel position="stacked">Label Two</IonLabel>
            <IonInput placeholder="two"></IonInput>
          </IonItem>
        </IonList>

Ionic info:

Ionic:

   Ionic CLI       : 6.13.1 (/Users/kensodemann/.nvm/versions/node/v14.15.4/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.5.4

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.3.0) : 1.0.0

System:

   NodeJS : v14.15.4 (/Users/kensodemann/.nvm/versions/node/v14.15.4/bin/node)
   npm    : 6.14.10
   OS     : macOS Big Sur

[BerkeAras]

At the moment, the design of inputs in Material Design gets changed: #22958. Maybe this could be fixed too.

[willmartian]

This will be fixed in Framework v6, thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.