search

alinebee / Boxer

The DOS game emulator that's fit for your Mac.
http://boxerapp.com/
770 stars 139 forks source link

Proper keyboard navigation on the welcome window #15

Closed Kentzo closed 11 years ago

Kentzo commented 11 years ago

Hey, here is the first approach to allow navigation across all buttons on the welcome window.

But as you can see focus ring masks are not very smooth. I'm going to create proper masks from the images in the image editor. But if you have sources of that images, I would very appreciate if you share them.

Kentzo commented 11 years ago

A few images: Screen Shot 2013-03-05 at 1 10 51 Screen Shot 2013-03-05 at 1 10 53 Screen Shot 2013-03-05 at 1 10 54

alinebee commented 11 years ago

Yeah, the standard blue highlight glow doesn't look good on images that already have their own shadows. I think the best way to highlight the target of keyboard navigation would be using the same spotlight effect that's already used when hovering over an option with the mouse.

To be consistent though, this would need to stay in sync with the mouse highlight effect: when you hover an item it changes the keyboard focus to that item, and if you switch focus with the keyboard then it clears the highlight from the moused-over icon.

alinebee commented 11 years ago

By the way, the source files for all of Boxer's UI graphics can be found in the sibling repo here: https://github.com/alunbestor/Boxer-Artwork. However, like I say above, I don't think custom highlight images are the right way when there's already the spotlight effect ready to go.

Kentzo commented 11 years ago

Focus rings and spotlights represents different states. While I would agree that spotlight looks better, focus ring is something more consistent across whole system. I don't think mixing mouse hovered and keyboard selected views would be a wise idea from the framework perspective.

I'll play with that anyway.

alinebee commented 11 years ago

Fair point, though that could be solved by using a brighter (or perhaps hollow?) spotlight when the item has keyboard focus, rather than a different highlight style altogether.

On consideration, causing mouse movement to change the keyboard focus would go against user expectations, and you're right that it's probably awkward at the framework level too.

alinebee commented 11 years ago

OK, b4340f555c89943a0e9de49cb4aeb1a8e06b843d sets up the responder loop as you had in your fork and draws custom focus ring graphics that fit thematically with the spotlight effect. (In the end I couldn't get the drawing to work through the 10.7 drawFocusRingMask API so the alternative involved a bit of a kludge for recording the first-responder state, but this approach has the advantage of being 10.6-compatible too.)

Check it out and tell me what you think - if this implementation feels like it's suitable I'll close the issue.

Kentzo commented 11 years ago

I love it! Feel free to close the issue.

Do you have any open issues on your mind I could help with?

alinebee commented 11 years ago

None of the open issues at the moment are outsourceable really, but thanks for the offer!

alinebee commented 11 years ago

One thing you could do though, if you're interested in this kind of thing, is a keyboard accessibility audit across the rest of Boxer. Prompted by your original issue I made a bunch of fixes recently to make e.g. the Inspector responsive to keyboard input: but I'm sure there's still plenty of locations (like the preferences window and import wizard) where certain functions are not keyboard-accessible.

If you do find areas that need to be addressed, please continue opening new tracking issues for them rather than reopening this one.