sudara / melatonin_inspector

A JUCE module that gives you the ability to inspect and visually edit (non-destructively) components in your UI.
MIT License
156 stars 18 forks source link

Accessibility: Follow Keyboard Focus #97

Closed baconpaul closed 7 months ago

baconpaul commented 9 months ago

This relates to #19

Perhaps the most important thing for screen reader users i found was the ability for keyboard focus to do the expected thing. Getting that order correct matters a lot. If you run surge and shift click on the menu you will see "developer options" and theres a focus debugger in there which red highlights and lets you tab/shift-tab with the UI available, and if you have a console attached it shows you the accessible name

So it would be great if instead of 'mouse over' component melatonin could optionally follow 'focused component'

I do this now by having a FocusChangeListener registered which does this: https://github.com/surge-synthesizer/surge/blob/0ca1e207de22407e4c12eb9f228f71c617cb6689/src/surge-xt/gui/SurgeGUIEditor.cpp#L6370

but presumably it would be possible to have melatonin selection optionally driven by a focus change listener as opposed to mouse position tracking. So opening this issue just to document that idea. I may hack it in next fortnight or so as i peek at the code.

sudara commented 8 months ago

This would be great — just to confirm, it would basically be a "mode" like "keyboard focus debug mode" that you would toggle on and the inspector would then only navigate by keyboard vs. mouse?

sudara commented 8 months ago

If you get a PR going, I'll cook up an icon for the header to toggle (this is a figma screenshot, the move toggle and "dog food" aren't yet implemented, unfortunately!).

Figma - 2024-03-09 02@2x

sudara commented 8 months ago

BTW, I added you as a collaborator, feel free to push branches to the main repo vs. a fork. I believe merging takes approval from me (or one of the other collaborators?)

baconpaul commented 8 months ago

This would be great — just to confirm, it would basically be a "mode" like "keyboard focus debug mode" that you would toggle on and the inspector would then only navigate by keyboard vs. mouse?

Exactly

sudara commented 8 months ago

101 was merged, but I noticed when selectionMode changes, it doesn't disable mouse listening. In other words, it's just toggling FOLLOW_FOCUS on or off.

I'm wondering if the mouse listening should be disabled when FOLLOW_FOCUS is set?

I tried it out: It can feel "cleaner" with mouse listening disabled, being forced to navigate with keyboard focus. But maybe it will require a bit of refactoring to "keep the overlay visible but disable mouse events."

If not, then does keyboard focus even need to be toggled in the first place? Maybe it should just always be on? Or at least default ON with the ability to turn OFF?

baconpaul commented 8 months ago

Absolutely yes. I struggled a bit with figuring out what internal state to develop also.

Ideally it would work with mouse mode for most devs. I think that's what they want except when accessibility debugging. I'll add a menu to surge to turn on focus debugging which launches melatonin if not there and then makes it launch in focus mode as well as a menu to just launch regular mouse melatonin.

Thank you for merging the starting point!