Separator role not going to forms (focus) mode automatically

[george-cz]

We are currently building a feature where the user can focus on a handle and resize part of the application. This can be considered a window splitter pattern.

Based on this pattern, which uses the separator role, the user would expect to be able to press left and right arrow keys to move the splitter (or separator), when the separator if focusable and should act as widget.

The problem is that with the separator role, even when the separator is focusable, JAWS doesn't automatically switch to the "forms" mode, which results in arrow keys not working unless the user switches manually by Enter.

The behavior should be similar to a slider role, which we ended up using in the end. Please bump the dependency in the linked stackblitz example of @fluentui-contrib/react-resize-handle to 0.5.0 to see how it behaves with "slider" role.

Steps to reproduce:

1. Go to https://stackblitz.com/edit/ketu1a?file=src%2Fexample.tsx with JAWS enabled
2. Focus on one of the drag handles
3. Try moving the handle left/right (or up/down) with the arrow keys

Actual behavior:

Observe that the handle is not being moved, as the screen reader is still in browse mode. Enable the "focus" mode manually by Enter, retry and see that it now works as expected.

Expected behavior:

The focus mode should be automatically enabled when the focus lands on a focusable element with "separator" role, allowing the arrow keys to be used for resizing.

[stevefaulkner]

thanks for submitting @george-cz 

@BrettLewisVispero Here is a reduced test case that exhibits the issue and the desired behavior (via wrapping in an element with role="application")

test case: https://cdpn.io/pen/debug/LYKdOrL 

There is also a related (role=separator support) bug that is 3 years old: https://github.com/FreedomScientific/standards-support/issues/489#issuecomment-2301941979

[BrettLewisVispero]

Imported into ADO as bug 96663