Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Home] Content underneath sheet is available

See original GitHub issue

Issue summary

When the status Sheet is expanded, content underneath the Sheet is still available/focusable via swipe/touch navigation. Mobile screen readers announce this content as if it were a part of the visible Sheet content. This could lead to a confusing user experience.

Screen Shot 2020-05-25 at 2 59 12 PM

Current code


// BottomSheet.tsx

return (

Steps to reproduce

  1. Load the app into the iOS simulator
  2. Expand the Sheet content
  3. Enable VoiceOver screen reader on macOS
  4. Use the Virtual Cursor to navigate through the Sheet control



  • Content underneath to not be available via touch/swipe.


  • Content underneath is available.


A recommendation is not certain at this point. Some experimentation has been conducted on various content containers using the accessibilityViewIsModal prop without success.

Basically, if the isExpanded prop is true, content other than the Sheet should not be available on touch/swipe.


  • Component: CovidShield [Home]
  • WCAG Principle: Operable
  • WCAG SC: 2.4.3 Focus Order
  • Severity: Medium
  • Effort: Unknown

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

timarneycommented, Jun 30, 2020

oh, i didn’t know someone was working on it already, my bad.

We’re not yet 😃 just dropped this here to see if anyone else was. Ideally we can coordinate with our repo downstream. Avoiding two solutions to the same issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Hide or Unhide worksheets - Microsoft Support
Right-click a sheet tab, and then click Select All Sheets on the shortcut menu. On the Home tab, click Format > under Visibility...
Read more >
What is a Flat Sheet and What is it Used for? | Peacock Alley
A flat sheet, also commonly referred to as a top sheet, was originally designed to be placed between you and the blankets and...
Read more >
The Great Bedding Debate: Do You Really Need a Top Sheet?
Traditionally, a duvet is the preferred topper when only a fitted sheet is used, because the cover can be easily washed. You can...
Read more >
content - CSS: Cascading Style Sheets - MDN Web Docs
The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced ...
Read more >
COVID-19 Vaccine EUA Recipient/Caregiver Fact Sheets - CDC
The Fact Sheet is similar in purpose and content to vaccine information statements (VISs) ... There is no VIS for COVID-19 vaccines authorized...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found