Form Validation: Increase $form-feedback-font-size to make .invalid-feedback larger

[ThomasLandauer]

Description

Increase the font-size of .invalid-feedback to the regular body font size (which I guess is $font-size-base).

Motivation & Context

Although common, it's actually weird to display error messages in smaller font size, cause:

• When an error message is present, this is the most important text on the entire page In this case, visual appeal is less important than a legible message informing the user what actually is wrong with their input.
• Most of the time the error message isn't shown at all (especially when initially loading the page), so it doesn't hinder the page's overall appeal.

I'm aware that this also affects .valid-feedback. This is OK for me (positive feedback should be legible as well), but maybe it would be better to introduce separate font size variables for .valid and .invalid.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

https://deploy-preview-41488--twbs-bootstrap.netlify.app/docs/5.3/forms/validation/#server-side

[julien-deramond]

I don't have a strong opinion on the default size of this element, but any change here would need to wait until the next minor version in terms of impacts for projects.

That said, with our current implementation, there are maybe some accessibility concerns. Addressing them might require additional changes.

While our current styling isn't ideal in some cases like the following, the slightly different font size at least provides a visual distinction beyond color, helping users understand that this is an error message, separate from the label and form control:

With the proposed change in this PR, we're relying in this case almost entirely on color, which makes it even harder to recognize this as an error message IMHO:

Let's have some feedback in terms of design from @mdo and accessibility from @patrickhlauke :)

[ThomasLandauer]

While our current styling isn't ideal in some cases like the following, the slightly different font size at least provides a visual distinction beyond color, helping users understand that this is an error message, separate from the label and form control:

Indeed, that's right. Maybe set the -feedback classes in italics?

[patrickhlauke]

have to admit that personally i prefer the smaller ones we currently have. i don't think they're so massively small that they are difficult to spot/read

[mdo]

Agreed with Patrick, going to close out for now.