Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separator role not going to forms (focus) mode automatically #861

Open
george-cz opened this issue Aug 21, 2024 · 2 comments
Open

Separator role not going to forms (focus) mode automatically #861

george-cz opened this issue Aug 21, 2024 · 2 comments

Comments

@george-cz
Copy link

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
Copy link
Contributor

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: #489 (comment)

@BrettLewisVispero
Copy link
Collaborator

Imported into ADO as bug 96663

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants