CSS examples: tab behavior is weird

[wbamberg]

If I load, say, https://developer.mozilla.org/en-US/docs/User:schalkneethling:transform and press Tab, the last item gets a dotted grey border, as if it's selected, and its Reset button appears.

If I press Tab after having selected a few different rows, then their Reset buttons appear: http://imgur.com/a/47YZm.

We should probably think about what we want Tab behavior to be. Ideally it feels like it should:

• focus the Reset button in the current row, if that row has an active reset button
• or select the next row (as if you had clicked to, so you can start typing)

[schalkneethling]

Agreed. I was planning on doing an accessibility review this week as part of the Prism exploration, and the fact that we are essentially waiting on feedback from Brigade before making any other UI changes.

[schalkneethling]

I have added the ability to move through the CSS examples using the cursor keys. With that, do you feel that we can close out this one? @wbamberg

[schalkneethling]

You can test it here for the time being:
https://interactive-examples.mdn.mozilla.net/pages/css/border-style.html

[wbamberg]

This looks very nice: up/down works great to cycle through the choices. But tab is weird: it does cycle through the options, but the "selection indicator" (the blue border and arrow) is not updated.

[schalkneethling]

But tab is weird: it does cycle through the options, but the "selection indicator" (the blue border and arrow) is not updated.

Indeed. I noticed this yesterday as well while testing something else. I am going to fix that today, and will attach it to this bug. Once that is landed, I will go ahead and close out this issue. Thanks @wbamberg

[wbamberg]

Sorry to reopen, but I saw another problem with this: where an item has multiple lines (e.g. https://developer.allizom.org/en-US/docs/Web/CSS/background-color) and the cursor is at line 1, then you down-arrow, then the cursor moves to the next item. It should move to the next line, and only move to the next item if it is on the last line.

[schalkneethling]

Hmmm, yeah, that is a nasty one. I will look into it.

[schalkneethling]

@wbamberg Ok so, I have looked at this from a bunch of different angles but, there just seems to be no way to know that you are at the start, or the end of the text inside the code element. Because this is not actually a textfield but simply a code element with contenteditable set to true, there is also no Selection object so, no way to that to try and figure out the caret position.

Perhaps we should drop the up/down arrow functionality and just keep the tabbing. Thoughts?

[atopal]

As much as I like the feature, I think it's more important that we allow and encourage people to edit the examples and that can mean adding a line, in which case keyboard navigation is not doing what most people would expect. I'd drop it for this first version.

[schalkneethling]

So, I do seem to be able to get a Selection. Let me take another stab at this.

[schalkneethling]

Ok. @wbamberg have made some general interaction improvements to the CSS editor specifically. I removed the up/down arrow interaction because it is driving me up the wall currently, and while I would like to have the functionality, it needs to work as expected to be valuable.

Give this a spin and feel to reopen if you ruin into any problems. Thx

[wbamberg]

Perhaps we should drop the up/down arrow functionality and just keep the tabbing. Thoughts?

I think this is fine :). I mean, we need keyboard access, but tab is totally sufficient IMO.