Prevent .visually-hidden overflowing children to become focusable

[ffoodd]

Description

Prevent .visually-hidden overflow.

Motivation & Context

@keltroth demonstrated that .visually-hidden children become focusable when overflowing, but remains hidden—conducting to a focus loss. Here's a reduced test case on CodePen using Bootstrap.

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-41286--twbs-bootstrap.netlify.app/docs/5.3/helpers/visually-hidden/

[mdo]

Ayyy good to see you @ffoodd! Before I merge, any idea if we can make this a more focused selector or should we just not care about the new universal selector?

[ffoodd]

The only thing I can see is direct children combinator, but honestly I don't think we should care. Complex DOM in a visually hidden element is a really bad idea.

[julien-deramond]

I've run several manual tests and didn't encounter any issues with this modification, except in some extremely rare edge cases that shouldn't realistically occur (as @ffoodd noted in this comment).

Overall, I believe it's safe to move forward with merging this. If any unexpected breaking cases arise from the community, we could still address them with a patch.