[Bug] [a11y]: Keyboard focus not visible for table in Windows High contrast mode settings

[vdevarapally]

Library

React Northstar / v0 (@fluentui/react-northstar)

System Info

"fluentui/react-northstar": "^0.65.0",

Are you reporting Accessibility issue?

None

Reproduction

https://fluentsite.z22.web.core.windows.net/0.66.2/maximize/table-example-navigable-shorthand/false

Bug Description

Prerequisites - Windows Settings -> Accessibility -> Contrast Themes -> Select Aquatic High Contrast Theme

Using tab key , trying to focus on the table. But the focus is not visible.

Actual Behavior

Keyboard focus is not visible to the user when the focus is on the table row/column with no borders.

Expected Behavior

Keyboard focus should be visible to the user even with Windows High contrast theme.

Logs

No logs

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

It looks like this is caused by having transparent borders on all the cells, which are then rendered as visible in HCM. The focus should be visible if the rest state borders are removed -- IMO they're not any more necessary in high contrast mode than they are outside of it.

[vdevarapally]

@smhigley Got it. Shouldn't this be handled by Fluent UI ?

[vdevarapally]

@smhigley Any update on this please ?

[smhigley]

@vdevarapally since this is a Fluent Northstar component, I'll let that team comment on whether there will be a change to the component itself. Looks like @jurokapsiar was just assigned, he'd know whether there's any background to the table border styles.

[kippllo]

This is also an issue with drop-down when in a Windows high-contrast theme.

Without focus:

With focus:

[kippllo]

Also, buttons inside of table cells have bad focus too.