Mobile device accessibility

[TeunHuijben]

This PR implements accessibility functionalities for mobile devices. The app detects what kind of device is used (desktop/tablet/phone) and changes the layout and functionalities accordingly.

Implemented:

• desktop: full functionalities
• tablet: only the third selector (configurable sphere) is enabled, because the others require shift/control+functionality.
  • added a physical select cells button for selection (since shift+click does not work
  • shift+click would still work if the tablet had a keyboard connected
  • implemented scale slider to adjust the size of the selector sphere. This will work especially nice in combination with PR Preview the point within cursor before selecting them #119
  • user gets warning when selecting a disabled selector
  • I added the option that you can deselect all selectors, to remove the orbit controls from the Scene (works on all three platforms though)
• phone: only visualize the scene and the time-slider, the entire left-bar with functionalities is hidden (because screen is too small to work properly)

iPad video:

app_iPad_Oct2_v2.MP4

iPhone video:

app_iPhone_Oct1.mp4

(Sorry for the overload of pushes to this PR. The build-in Vercel preview was the easiest way to quickly check the compatibility with iPhone/iPad :) )

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
points-web-viewer	✅ Ready (Inspect)	Visit Preview	Oct 8, 2024 10:56pm

[kyleawayan]

Works well on my iPhone and iPad!

Maybe a suggestion for iPhone, can we add a note somewhere that signifies there are more features on the desktop version?

Another suggestion for iPhone, can we run like a demo of the tracks? Just something that could show something cool or a general overview? That way we can show some tracks even if we don't have space for explicitly selecting them?

[TeunHuijben]

Thanks @kyleawayan! I added a pop-up window when opening the viewer on a phone, and will make an issue for the other suggestion

[aganders3]

Looks good! Pretty neat to see this work on mobile even in a limited capacity. Is there a way to disable (gray out) the unavailable selection modes as well?

[TeunHuijben]

Hi @aganders3, yes I tried to disable the first two selection modes (when using a tablet), but this was not possible, to my knowledge. The problem is that SegmentedControl from czi-sds has a SingleButtonDefinition that doesn't include disable (https://github.com/chanzuckerberg/sci-components/blob/d7be2ca33b7d785330ed7423e941cc1892921290/packages/components/src/core/SegmentedControl/index.tsx). And its supergroup ToggleButtonGroupProps from mui/materials, doesn't have it either. So this was the solution that works for now