Sortable columns in responsive b-table causes horizontal overflow due to sr-only tags

[JonathanGuberman]

Describe the bug

When you have a responsive b-table with sortable columns, sr-only text is added to show that columns can be clicked to sort or remove sorting. However, these columns can cause empty horizontal overflow.

Steps to reproduce the bug

1. Create a responsive table where the final column is sortable; make sure the screen is narrow enough that there is a horizontal scroll bar on the table.
2. Scroll the page (not the table) horizontally; notice that the page width has increased and scrolls.
3. Inspect the DOM and delete the sr-only span in the final column.
4. The overflow on the page goes away.

Expected behavior

The page should not expand because of the presence of the sr-only span

Versions

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.5.3
• Vue: 2.6.12

Environment:

• Device: Mac, iPhone
• OS: macOs Catalina 10.15.7, iOS 14.3
• Browser: Chrome, Safari, Mobile Safari
• Version: Chrome 87, Safari 14, Mobile Safari 14.

Demo link

https://codepen.io/a_sqaure/pen/zYKeBOL
Make sure page is narrow enough for table to overflow, then scroll horizontally outside the table

Showing the sr-only span in the DOM:

Overflow is removed if the sr-only span is deleted:

[JonathanGuberman]

Setting sr-only to have width: 0px seems to fix the problem, but I'm not sure if that has knock-on effects elsewhere (e.g., maybe screen readers don't like 0 width elements?).

[jacobmllr95]

Setting sr-only to have width: 0px seems to fix the problem, but I'm not sure if that has knock-on effects elsewhere (e.g., maybe screen readers don't like 0 width elements?).

The .sr-only class comes from Bootstrap and needs to stay like that:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss

Adding position: relative; to the <th> solves the issue since the .sr-only class is absolute positioned.

[andrei-gheorghiu]

Also adding left: 0 fixes it, since they're absolute. From my experience with accessibility: "screen reader only" elements can have display: none. Readers simply scan and parse the DOM in search for them and read them out. That's the thing: they are not to be rendered.
I'll try to find out more on the normative.

However, the way to go is to open an issue on Bootstrap's repo.

The reason for rendering them might have to do with sketchy browser implementations (read Safari) (browsers which disable a number of events for elements that are not rendered, especially pointer and touch related).

[rslvn]

workaround till the release

<style>
th > span {
  display: none
}
</style>