Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
JonathanGuberman opened this issue Jan 17, 2021 · 4 comments · Fixed by #6371
Closed

Comments

@JonathanGuberman
Copy link
Contributor

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

Boostrap vue bug

Showing the sr-only span in the DOM:
sr-only span

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

@JonathanGuberman
Copy link
Contributor Author

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 jacobmllr95 added this to To do in v2.22.0 via automation Jan 18, 2021
@jacobmllr95
Copy link
Member

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
Copy link
Contributor

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).

v2.22.0 automation moved this from To do to Done Jan 28, 2021
jacobmllr95 added a commit that referenced this issue Jan 31, 2021
…otherwise (#6383)

* fixes #6326

* w.i.p.

* use provided role on table or default to role=grid

* default table role to table when not selectable, grid when selectable

* removed unnecessary default

* moved defaulting table role from selectable into renderer

* reverted change on test

* Update mixin-selectable.js

* Update mixin-table-renderer.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
@rslvn
Copy link

rslvn commented Mar 19, 2022

workaround till the release

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment