.visually-hidden class conflicts with bootstrap 5

[elgordino]

Describe the bug
Both bootstrap 5 and ember-sortable use a .visually-hidden class. This results in styles being applied to an ember-sortable element that can cause layout issues. Particularly because the bootstrap class makes the element absolutely positioned.

To Reproduce
Add ember-bootstrap and ember-sortable to a project. Configure ember-bootstrap to use boostrap 5 and add a sortable-group

This span is added by ember-sortable

<span aria-live="polite" class="visually-hidden"></span>

Styles for .visually-hidden on the span element are (these all come from bootstrap)

.visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important;
}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

Expected behavior
The span does not have additional styles applied from bootstrap

Proposal

I've worked around this in my project by applying more specific styles, however it took me quite some time to track down what was causing a weird behavior in my application so I thought it would help others if this style could be updated to avoid the issue.

I propose renaming .visually-hidden to .ember-sortable-visually-hidden, The class name does not appear to form any part of an external interface so I think it would be a non-breaking change?

Happy to raise a PR for this if the proposal sounds good?