[@uifabric/example-app-base] Focus indicator is not visible on "Accordion" button which is appearing in left pane buttons in high contrast white mode

[tyveille]

Environment Information

Test Environments:
Version: 2004 (OS Build: 20236.1005)
Browser: Edge chromium
Tool: Settings

Describe the issue:

When navigating to a site using example-app-base, low visible user using high contrast mode will not able to find the location of the focus indicator and can not access the application efficiently if focus indicator is not visible on any control in high contrast mode

Please provide a reproduction of the issue in a codepen:

Unable to use codepen as the issue is located in @uifabric/example-app-base

Set high contrast white mode through Settings of the system.
Navigate on "Accordion" button appearing in the left pane
Verify the issue

Actual behavior:

Focus indicator is not visible on "Accordion" button which is appearing in left pane buttons in high contrast white mode.

Expected behavior:

Focus indicator should be clearly visible on "Accordion" button which is appearing in left pane buttons in high contrast white mode.

Documentation describing expected behavior

N/A

[gouttierre]

@tyveille - Thank you for the feedback into the issue you are experiencing

@khmakoto - Would you be able to confirm if this is getting tended too with #16926? Thank you
cc @bsunderhus

[bsunderhus]

Acessibility features haven't been implemented yet in the Accordion Convergence component due discussions on the manner @gouttierre

[ecraig12345]

I don't think this is an issue about the Accordion control; it appears to be a generic issue about nav items in demo apps created with the @uifabric/example-app-base package (now @fluentui/react-docsite-components). But it looks like it might have been fixed in the latest version:

@tyveille Can you please check our demo site and confirm whether the issue still repros there or not? If it doesn't repro, the fix will be to update to version 8, including switching from using @uifabric/example-app-base v7 to @fluentui/react-docsite-components v8 (should be just a find/replace of the package name).

[ecraig12345]

I'm also seeing a focus indicator on the section header. I think it's intended to be activated with enter or space while focus is on the whole item, so having a focus indicator around the whole item (as opposed to just around the chevron) should be fine.

[tyveille]

I have also verified the same results as you @ecraig12345. I am unable to repro this issue now. The GIF provided to me did not show a focus indicator but I am now seeing one. I agree this behavior from your screenshot is acceptable.