In High Contrast mode, Modal primary and secondary buttons do not show focus indicator

[mbgower]

In High Contrast mode, Modal primary and secondary buttons do not show focus indicator

Environment

OS: Windows, using high contrast (HC) mode
Browser: Firefox (adopts HC)
Carbon version": v10 React http://react.carbondesignsystem.com/iframe.html?id=modal--default

Detailed description

The 'normal' presentation of the modal shows the focus indicator for each of the three tab stops when a user tabs through the modal dialog. In High Contrast mode, only the Close button ('X') has a focus indicator, and only after the focus returns to the Close button.

What did you expect to happen?

Each of the three buttons should have a focus indicator that appears as the user tabs between them. The non-HC mode on Chrome can be used to illustrate.

When the modal first appears there is a blue line around the close button as a focus indicator (as shown in the below screenshot).

Tabbbing to the Secondary button causes the focus indicator to appear there (in this case, through the slightly unusual method of both a blue and white stroke replacing the outer edge of the black button background).

Tabbing to the Primary button causes the focus indicator to appear there (in this case, a white stroke is added around a few pixels inside the outer edge of the blue background)

What happened instead?

In HC mode, only the Close button has a focus indicator (and only noticeably when the focus wraps around).

When the dialog launches, there is no obvious indicator of focus. On VERY close scrutiny, when the user tabs once,

there is a slight decrease in the thickness of the outline around the invisible close icon, as shown in the following two screen details. (Note: the X is invisible in HC mode. Already opened as issue #3881).

There is no visible change to either the primary and secondary buttons when they receive focus

When the user tabs a third time and the focus wraps around to the (missing) Close icon, the focus indicator is not only the very hard to perceive difference in thickness, but now shows up with a more visible dotted (dashed, actually) focus rectangle inside the button outline for the X.

Note that this dashed focus rectangle also appears in Firefox without HC mode.

What WCAG 2.1 checkpoint does the issue violate?

Not clearly a violation, but obviously a DESIGN consideration.

Steps to reproduce the issue

1. From the Start menu, type High Contrast mode, and press Enter
2. Choose High Contrast temp file-uploader imgs #1
3. Launch the react carbon modal component in Firefox
4. Press F5 to refresh the browser (if it didn't adopt high contrast colours automatically)
5. Press Tab to move the focus between the buttons.

Other Comments

Note that on Firefox in non-HC mode, when the focus wraps around to the Close icon, it shows an additional dashed line focus indicator. Although a designer might consider this an error, it is the only thing that works in HC mode. Without it, the user would never see a focus indicator.

Another oddity is that if a Windows change event happens (i.e., the user switches tasks and puts another application window into the foreground on their system), when the browser page with the Carbon component is brought back to the foreground, the focus indicator around the close button disappears. Just pointing out as odd behaviour; not something I'm concerned with.

[abbeyhrt]

Due to FireFox not supporting Microsoft's CSS extension for targeting elements in HCM, we officially do not support Windows & Firefox HCM. You can read about that decision here. I opened up a different issue to address the dashed outline in firefox #3971