code4romania / covid-19-date-la-zi

Vizualization App to track the COVID-19 epidemic
https://covid19.datelazi.ro
Mozilla Public License 2.0
39 stars 27 forks source link

Fix horizontal scroll when not on sr. #443

Closed sylar closed 3 years ago

sylar commented 3 years ago

What does it fix?

https://user-images.githubusercontent.com/2974519/127166464-b44101c3-fab5-4c5e-a35f-e960ec31b3cc.MOV

When going on the homepage from a mobile device and is not a screen reader, you are able to scroll horizontally which is not great.

Wrapping the <AccessibilityTable /> in a div with the same class name fixes the problem.

How has it been tested?

Accessing the website from my iPhone and Chrome.

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/code4romania/date-la-zi/DYqEzsLvpNfHNavShC1gRkSsSXzb
✅ Preview: https://date-la-zi-git-fork-sylar-bugfix-accessibil-9490cb-code4romania.vercel.app

tvararu commented 3 years ago

This is a weird one. The hidden table isn't correctly being set to a 0.01em width. I think it's because a table has display: table and the is-sr-only class from Bulma is designed to work with elements that have display: block. But I'm not sure.

Edit: It's not related to display: table vs display: block. I'm not sure what it is. Minimal repro: https://codepen.io/tvararu/pen/jOmZGqZ

catileptic commented 3 years ago

Thank you for the fix, @sylar! Would you be interested in sticking around and contributing to other Code for Romania projects? If so, drop me an email at alexandra.stefanescu@code4ro.ro