[BUG] MUI slider double handle focus

[jolevesq]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When we use the MUI slider with dual handle, the focus goes to the first handle when we move the second handle. This was a fix for the focus going to the body element. Because state is lost and the activeThumb returns the good value the first loop but -1 the second and third time, there is no way to know which handle is use.

A better fix need to be implemented to keep value of the activeThumb without using the store because slider.tsx is part of UI folder and suppose to have no access to the store.

Both vertical and horizontal slider works great in chart. So there is something going on with how the time slider is dealing with the viewer state... May need to investigate the React Hooks in time-slider.tsx. There is moveFoward and moveBackward functions that may creates a problem with focus.

Expected Behavior

The focus should stay on the handle after moving it with keyboard

Steps To Reproduce

1. https://canadian-geospatial-platform.github.io/geoview/public/demos-navigator.html?config=./configs/navigator/10-package-time-slider.json
2. Go to time slider panel and select historical flood
3. Tab to second handle and move with the keyboard
4. See focus goes to first handle

Anything else?

No response