day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
798 stars 147 forks source link

Focus Management #122

Closed curiohoiho closed 7 years ago

curiohoiho commented 7 years ago

On your readme, you mentioned you're open to ideas on how to handle focus management, tabbing from control to control. I've been going through the code for the new Angular 2 Material Design components (https://github.com/angular/material2) and saw how they are doing it.

Basically, if you have 5 input boxes you'd like to tab through, they are automatically wrapping 2 div's around those inputs. So, if your focus is on the last input box of the group and you hit tab, you hit the "focus" event of the 2nd div, which automatically wraps the focus back to the first input box in the group.

If you are on the first input box of the group and hit "SHIFT-TAB" to go "backwards", you will immediately land on the first div, which will swing you back to the last input box in the group.

The code is very short, and can be seen in these 2 files:

https://github.com/angular/material2/blob/master/src/lib/core/a11y/focus-trap.ts https://github.com/angular/material2/blob/master/src/lib/core/a11y/focus-trap.html

They consider this a naive approach for now, but perhaps it can give you ideas. I haven't looked at the Dart version yet.

Gregg8 commented 7 years ago

Thanks for your thoughts on this and example code. As you said, the developers have tagged that as a naive approach. I also see they said "This will be replaced with a more intelligent solution before the library is considered stable".

Closing this for now, but will monitor Angular 2 Material Design for when they create their final solution.