Gen list box cell focus outline under Chrome versus IE Mode

Products

• Gen

Issue/Introduction

Gen Web Generation list box behaviour when tabbing around the cells/fields is different in Chrome/Edge than in IE Mode.

Under Chrome or Edge if I click on data in the list box and arrow around instead of pressing tab, the cell with the current focus is not outlined until I press tab after which I can arrow around and the outline moves.
In the supplied video I am showing the same client in Edge IE mode, Edge native, Chrome and Firefox.
In each browser, I select the name entry on the 3rd row, then press the down arrow twice, the right arrow once and then the tab key.
In IE mode, you will see there is a dashed focus box visible as I arrow down and right.
In Edge and Chrome, the focus box is not visible when arrowing until I press tab which advances to the next cell and puts a focus outline on it. I didn't show this, but when arrowing after pressing tab the focus box is still visible and moves around as it should.
Firefox works like IE.

So IE mode and Firefox show the focused cell when arrowing around, but Chrome and Edge do not show it until you tab to a cell.

Resolution

Gen Support could recreate the same behaviour with a simple Web Generation list box application i.e. in native Edge (no IE Mode) and Chrome, the focus box is not visible when arrowing until press tab which then goes to the next cell and puts a focus outline on it. It also noted that the focus outline in Chrome, Edge and also Firefox is continuous and not dashed like it is in IE Mode.

Gen Engineering provided the following advice:

**********
It sounds like newer browsers handle the list box cell focus outline differently. The following Chromium Blog link provides some very good information: Chromium Blog > Giving users and developers more control over focus

1. Engineering thinks that using the :focus-visible pseudo-class will provide a solution. They added the following to their .css file and the focus seemed to work similarly to IE mode: TD A:focus-visible { outline: 2px dashed black; }
 
2. They also tried the browser's Accessibility settings ("Show a quick highlight on the focused object" in Chrome and "Show a high visibility outline around the area of focus on the page" in Edge). These settings definitely help highlight the focus, but they are not limited to list box cells and they also highlight the focus when clicking a control with the mouse. This approach requires the end-user to choose these settings in their browser, so that likely isn't desirable.
 
3. They also tried adding the :focus pseudo-class to their .css file i.e. TD A:focus { outline: 2px dashed black; }. However, it also highlights the focus when clicking a list box cell with the mouse.
**********

The user tested :focus-visible and found that the following CSS seems to closest represent what they see in IE mode, so they will use that in their own custom .css file:

TD A:focus-visible {
  outline-style: dashed;
  outline-offset: -1px;
  outline-width: 1px;
  outline-color: black;
}

Although "outline-offset: 0px" looks a little better and "outline-style: dashed" could be changed to "outline-style: dotted", IE seems to be a little bit between the two.

Additional Information

The user also added:
Even though Chrome is different to IE, the main problem is that it is a little inconsistent.
":focus-visible" is part of the CSS4 spec and the web page CSS-TRICKS > CSS Almanac > Pseudo-Selectors > F > :focus-visible mentions the CSS4 spec as specifying:

Conversely, if the active element does not match :focus-visible, and a script causes focus to move elsewhere, the newly focused element should not match :focus-visible.

This appears to be something similar to what Chrome is doing. When I click on the element the focus isn't visible. When I tab it becomes visible but when I use the arrow, the arrow navigation is handled in javascript so it doesn't change to visible.
However when specifying an explicit outline style the behaviour changes. Chrome's default outline doesn't match anything you can generate by CSS and looks good in a list box cell.  I found that "outline-style: auto" specifies this kind of focus outline but as soon as you set it to auto it goes back to the default behaviour and the outline isn't visible. So it doesn't look like it is possible to have a combination of the Chrome outline style with the focus visibility required (consistent with Firefox/IE).