search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.3k stars 305 forks source link

Accessibility issue in Fluent AutoComplete #1292

Closed PraleshGitHub closed 4 months ago

PraleshGitHub commented 4 months ago

🐛 Bug Report

Accessibility compliance issues in fluent autocomplete.

💻 Repro or Code Sample

  1. go to below url https://www.fluentui-blazor.net/Autocomplete
  2. click on search icon of autocomplete fluent control
  3. open NVDA
  4. on keyboard press CAPS+n and go to speech viewer
  5. open the autocomplete and go through the populated list

    🤔 Expected Behavior

Screen reader NVDA should pronounce the correct role should pronounce whether the autocomplete is expand or collapsed should go to the list box appear on search on tab click should pronounce the list items

😯 Current Behavior

Roles not getting pronounce in NVDA, does not pronounce whether the autocomplete is expand or collapsed does not go to the list box appear on search on tab click does not pronounce the list items

💁 Possible Solution

Search field should have aria label and roles defined. List options should be accessible by keyboard and should screen reader should narrate the list items

🔦 Context

NA

🌍 Your Environment

vnbaaij commented 4 months ago

I'm not familiar with NVDA. Is it this? https://www.nvaccess.org/download/

dvoituron commented 4 months ago

Yes, the common tools used for Accessibility are:

But, sorry, at the moment, some of our components (including FluentAutocomplete) are not fully compatible with Accessiblity rules.

PraleshGitHub commented 4 months ago

I'm not familiar with NVDA. Is it this? https://www.nvaccess.org/download/

yes this is NVDA tool, the given link can be used for NVDA download. However this issue is in general we see, you can use any narrator tool to check.

PraleshGitHub commented 4 months ago

Yes, the common tools used for Accessibility are:

But, sorry, at the moment, some of our components (including FluentAutocomplete) are not fully compatible with Accessiblity rules.

is this in your pipeline?, when can we expect FluentAutocomplete control compliant with accessibility as other controls.

vnbaaij commented 4 months ago

Yes, we want to do this but we are a small team with a lot to do. Might take some time. We do take PR's so if you want to contribute that would be very much appreciated.

PraleshGitHub commented 4 months ago

@vnbaaij downloaded code locally. Checked the autocomplete component, it has been observed that the role combobox is getting assigned to fluent-text-field however its not getting passed to the input field generated when autocomplete is getting used. if the role to input field is passed then narrator will pronounce correctly.

Since It looks like fluent-text-field is coming from some other library we may not be able to make changes.

Need your help to take it further for making this improvement.

We are also investigating the list part of autocomplete. We will come back with more details.

Thanks for looking into this.

dvoituron commented 4 months ago

Could you tell me which attributes we should add and I'll update the code. If possible, with a final HTML example of the added attributes.

Example:

PraleshGitHub commented 4 months ago

Hi @dvoituron, please add below attributes to input element

aria-controls here pointing to FluentAnchoredRegion whereas it should point to div where role="listbox" is given. You need to give the div an id="listbox-1" and use this to set input aria-controls value when popup of autocomplete is open.

We have seen that the focus is not shifting in the listbox when popup has opened and on click of down arrow, narrator just keep pronouncing blank.

Tried to give tabindex=0 to FluentOption field in listbox, then narrator pronounce the option on hitting tab from keyboard however that may not be good practice.

Could you please check that part also.

Thanks for all your support.

PraleshGitHub commented 4 months ago

Hi @dvoituron, please add below attributes to input element aria-controls here pointing to FluentAnchoredRegion whereas it should point to div where role="listbox" is given. You need to give the div an id="listbox-1" and use this to set input aria-controls value when popup of autocomplete is open.

We have seen that the focus is not shifting in the listbox when popup has opened and on click of down arrow, narrator just keep pronouncing blank.

Tried to give tabindex=0 to FluentOption field in listbox, then narrator pronounce the option on hitting tab from keyboard however that may not be good practice.

Could you please check that part also.

Thanks for all your support.

@dvoituron please add both role="combobox" and aria-controls attribute is also needed on input element, in my previous comment I have added but it's not visbible somehow.

dvoituron commented 4 months ago

Will be fixed in next release: #1374

dvoituron commented 4 months ago

Just after our quick call with Pralesh (thanks to you). We discovered another problem, related to the "position" of the pressed keys ⁠ Pressing the "separate" arrows is fine, but not using the NumPad arrows. The code used in C# is different. we aregoing to change this today and it will be included in the next update.

image

dvoituron commented 4 months ago

Fix included in the PR #1383... Will be included in the next release.