search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.44k stars 2.72k forks source link

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

Closed tyveille closed 3 years ago

tyveille commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

ecraig12345 commented 3 years ago

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: image

@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 commented 3 years ago

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. image

tyveille commented 3 years ago

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.