CSS examples: tabbing through the examples doesn't move the blue border+arrow

[wbamberg]

If I've selected an example in the CSS editor and tab, I should move to the next example. I do (in that the next example is applied), but the blue border and arrow that's used to indicate the current example isn't updated.

[diablero13]

I reviewed this issue and notice that bug have another causal relationship. Switching between examples via tab button occurs because of an improperly setuped event listener:

  exampleChoiceList.addEventListener('keyup', function(event) {
        var exampleChoiceParent = event.target.parentElement;

        cssEditorUtils.applyCode(
            exampleChoiceParent.textContent,
            exampleChoiceParent
        );

        if (!localStorage.getItem('firstCSSEditRecorded')) {
            mceAnalytics.trackFirstEdit('css');
        }
  })

The handler is called after each keystroke of any key (with focus on the list of examples) and applies the current code snippet. The problem is that this handler is also called when tab key is pressed; default behavior of tab is to switch focus between interactive HTML elements, including the <code /> element that containing code examples. This means that bug is related to unacceptable/incorrect behavior of focus switching between examples. Since acceptable keyboard control functionality is not implemented yet, so IMHO, good solution will be force disable tab navigation for <code /> element in code examples. @schalkneethling @wbamberg what do you think?

[schalkneethling]

@diablero13 That sounds like a great analysis. You want to grab this one?

[diablero13]

Yes. Actually I already fixed it. I'll make PR soon.

[schalkneethling]

Awesome, thanks so mcuh

[schalkneethling]

Moved to mdn/bob#548