[Home] Content underneath sheet is available

[svinkle]

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

[AbubakarSambo]

Hi @svinkle , please let me know your thoughts on this: #172

[timarney]

Believe this is the same issue:
cds-snc/covid-alert-app#292

[AbubakarSambo]

yes it is, i believe. I have a somewhat "hacky" solution that hides the background elements when they're not in view and that way the screen reader doesn't read them

[timarney]

@svinkle it would be great if we can coordinate our efforts on this. I can make someone from my team available but looking to avoid overlap on these fixes. I've been working with @henrytao-me for getting other bug fixes back and forth between the repos.

[AbubakarSambo]

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

[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]

cds-snc/covid-alert-app#391