Buttons don't have tab focus in WHCM

[aradhikaIbm]

Environment

Operating system

Browser
IE v11

Automated testing tool and ruleset

Assistive technology used to verify
AVT 2 testing with keyboard tabbing or mouse clicking.

Detailed description

When in WHCM in windows on IE, we cannot see any focus indicator on the buttons to determine where in the page we are.

As you can see with https://www.carbondesignsystem.com/components/button/code/.

What version of the Carbon Design System are you using?
"carbon-components": "10.4.1",
"carbon-components-angular": "3.13.2",

What did you expect to happen?
Some sort of highlighting or background fill.

What happened instead?

What WCAG 2.1 checkpoint does the issue violate?

"For any keyboard operable UI, the keyboard focus indicator should be visible"
https://w3-connections.ibm.com/wikis/home?lang=en#!/wiki/Wa7b684534a33_4971_b961_4529f9ad4a2e/page/AVT-2%20Manual%20tests%20for%20Windows-based%20Software%20Applications?section=Operable

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[dakahn]

I don't have access to IE11, but testing WHCM on Edge will usually be analogous. That said, I can confirm the focus styling on these buttons is missing with Windows High Contrast Mode enabled.

[dakahn]

@snidersd should this be added to our current backlog for Carbon Copy in the A11y Project?

[snidersd]

@dakahn if the failure is also present using Firefox on Win 10 or Safari on iOS it should be included in the CC milestone. Thanks!
Update: Tested in FireFox and Chrome and I can not reproduce the issue.

[dakahn]

Seeing this bug in latest Edge as well.

[spgill]

Leaving my two cents here;

I'm also experiencing this issue with the latest carbon-components; running Firefox (latest) on macOS with high contrast theme turned on. Received a defect filed by my product's testing team (they use Windows iirc), and verified it myself.

[joshblack]

@dakahn what are the steps to fix this? Happy to help but unsure how to move forward with a fix.