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.

Sign up for GitHub

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

Jump to bottom

Grid Row is not screen reader friendly #564

Closed
dmitri-suvorov-sumup opened this issue Apr 10, 2020 · 2 comments · Fixed by #565
Closed

Grid Row is not screen reader friendly #564

dmitri-suvorov-sumup opened this issue Apr 10, 2020 · 2 comments · Fixed by #565
Labels
♿ accessibility Improves usability 🐞 bug Something isn't working as it should good first issue A beginner-friendly task

Comments

@dmitri-suvorov-sumup
Copy link
Contributor

dmitri-suvorov-sumup commented Apr 10, 2020 •
edited
Loading

The Row component inserts dots into the DOM before and after the container. These dots are not visible for the user but are being recognized by the screen reader. This results in audio noise.

Sample layout

<StyledRow>
  <StyledCol>Header</StyledCol>
</StyledRow>
<StyledRow>
  <StyledCol>Content</StyledCol>
</StyledRow>
<StyledRow>
  <StyledCol>Footer</StyledCol>
</StyledRow>

row

Screen reader output (VoiceOver on macOS Catalina)

period4
@connor-baer
Copy link
Member

That's...interesting. Thank you for reporting this! I love seeing others using/testing with screen readers! 🙌

Would you be able to contribute a fix for this?

@connor-baer connor-baer added ♿ accessibility Improves usability 🐞 bug Something isn't working as it should good first issue A beginner-friendly task labels Apr 10, 2020
@dmitri-suvorov-sumup
Copy link
Contributor Author

Yes, I'm on it

Merged
5 tasks
@connor-baer connor-baer linked a pull request Apr 10, 2020 that will close this issue
fix(components): update clearfix to improve accessibility #565
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
♿ accessibility Improves usability 🐞 bug Something isn't working as it should good first issue A beginner-friendly task
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(components): update clearfix to improve accessibility sumup-oss/circuit-ui
2 participants
@connor-baer @dmitri-suvorov-sumup