Fixes #1489 - Adds keyboard navigation to the label editor.

[brizental]

Still need to add the functionality for when the user clicks Enter inside the text input and need to do some testing in other browsers, so far, I have only tested in Firefox.

Will do that in the next couple of days.

Anyways, r @zoepage?

[zoepage]

@brizental Thanks for the PR! :)
I'm having issues with my setup atm. Will review as soon as it's fixed. Sorry! :(
Feel free to add the Enter feature when you have time.

Thanks!

[zoepage]

@brizental Fixed my setup and everything looks great :)))
Happy to review the Enter feature and merge!

[brizental]

@zoepage Nice, thanks!
The Enter feature I have already finished, but everything is behaving differently in Chrome :/
I'll send in a commit for that, but I'll have to work on Chrome before merging. What do you think?

[brizental]

@zoepage Now it seems like everything is working and ready to merge. Let me know if there is anything to change.

[zoepage]

I checked Safari and it looks like it has issues with tabindex (http://caniuse.com/#feat=tabindex-attr). So the labels don't get selected.

(Sorry for not thinking about checking that feature earlier in Safari.)

Chrome and Firefox have the border highlight, which is cool. But looks a little bit weird as the first label gets a border-bottom, but the following bottom and top. I'd suggest to either highlight the bottom, if it is easier or the whole box?

There is also the issue with the "gear icon" as it disappears from time to time after saving & closing. If you can reproduce, cool. If not, I'll open a new issue for it.

Thanks :)

[brizental]

@zoepage thanks for reviewing!

I'll check safari today then :)

[brizental]

@zoepage sorry for the delay!

I fixed the border problem and the Safari problem.

About the border problem, I had to switch from outline to border, but border increases the size of the element a bit. This created a kind of "pop" that I thought looked nice, let me know if you also think it's cool.

About Safari, apparently tabindex does work on Safari, but for some elements it only works if you press opt+tab. Anyways, I just made a workaround so that it always works.

Finally, this problem with the gear icon disappearing is not happening for me... I think it would be best to open a new issue.

[miketaylr]

what's the status of this PR? (I see it has some merge conflicts that need to be fixed, but beyond that?

[brizental]

So, me and @magsout worked at the All-Hands to rebase and make this pull request ready to merge. I just tested everything again just to make sure and everything seems right. Let me know if there are any other changes still @zoepage :)

[zoepage]

Sorry it took me so long :/

So, it looks like the tab feature is not working in Safari(10.1.1) (probably again the same issue we had in the beginning?) and the Enter feature is not working in Nightly (56.0.0a1).

Tab feature:

The tab is not jumping into the list.

Enter feature:

I can tab though the list, but when hitting Enter nothing happens.

--- edit ---
It also does not work in FF54.

[zoepage]

As we spoke about it, it looks like I had caching issues. Sorry!

I'd say, we have one tiny thing left and then we can ship! 🎉

As you can see below, the outline works, but the focus behaves differently in all 3 browsers. FF has none, Chrome does, but it disappears when checking off the checkbox. Safari keeps it all the time.
Suggestion here would be to remove the focus. What do you think?

[brizental]

Cool! I'm glad everything is working now :)

About that focus issue, that's weird. I was having that problem, but I added this line https://github.com/webcompat/webcompat.com/pull/1541/files#diff-d4646a9030e33cda244b11a534c258b5R132 to fix it.

I'll try and see if I can reproduce. For me everything in Chrome, Firefox and Safari are looking the same right now and focus is not showing in any of them.

[zoepage]

Hm... That's weird. LMK if you can reproduce... Otherwise I'll check again.

[brizental]

I tried @zoepage, but really couldn't reproduce. Maybe this is still some cache problem?
I even tried in different computers and nothing. Let me know :)

[miketaylr]

Maybe this is still some cache problem?

@zoepage if you re-run grunt does the problem still happen?

[zoepage]

The grunt task re-runs automatically, when we start the application. So, this was okay.
But I've cleared all caches and now it works. :)