[Home] Content underneath sheet is available

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.

Current code

TSX

// BottomSheet.tsx

return (
  <SheetContentsContainer
    isExpanded={isExpanded}
    toggleExpanded={toggleExpanded}
  >
    <>
      {collapsedContentWrapper}
      {expandedContentWrapper}
    </>
  </SheetContentsContainer>
);

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

Behavior

Expected

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

Actual

• Content underneath is available.

Recommendation

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.

Specifications

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

[timarney]

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.

[JuliannaR]

https://github.com/cds-snc/covid-shield-mobile/issues/391