You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
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:
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.
The text was updated successfully, but these errors were encountered: