Navigation List component: Inconsistent focus styling

[jshields]

All other JET components use this mixin for component focus:

@mixin oj-browser-focus-outline-approximation($outlineColor)
{
  outline: dotted 1px $outlineColor;       // used on most browsers
  outline: -webkit-focus-ring-color auto;  // used on chrome
}

(File: utilities/_oj.utilities.focus.scss)

However, the Navigation List is not consistent with this pattern:

/*Focus ring around  focused list item*/
.oj-navigationlist .oj-navigationlist-item.oj-focus-highlight {
    outline: dotted 1px $navigationListItemOutlineColorFocus; // Using dotted line for all browsers
    outline-offset: -1px;
}

(File: common/widgets/_oj.common.navigationlist.scss)

In order to maintain consistency, the Navigation List should be changed to follow the pattern of the other components.

[crmouli]

when outline is set to
outline: -webkit-focus-ring-color auto;
There used to be a focus ring truncation issue on chrome so used dotted line for chrome too. Need to find a solution for this.