[Bug]: Accessibility issue while using @fluentui/react/lib/GroupedList

[AdityaShankarMishra]

Library

React / v8 (@fluentui/react)

System Info

We are currently using
@fluentui/react/lib/GroupedList, which includes an expand-collapse button in the group header, as depicted in the screenshot below. However, we've encountered an issue where the
tabIndex
property for the expand-collapse button is automatically set to -1. This is causing the following accessibility issue during keyboard navigation. 

"By invoking enter/space/alt + down/arrows keys Expand/collapse button is not accessible due to which table present under "Protected Item details" is not displayed".  
 
However in narrator when scan mode is on, it is accessible with down arrow key. As I think the "down-arrow" key is compensating for the tabindex="-1" we are seeing in the DOM. However with NVDA it is not working.

Are you reporting Accessibility issue?

Yes

Reproduction

Repro 1. Open #URL: https://aka.ms/AzureBusinessContinuity/release 2. Search "Business Continuity Center" on the home page and select it. 3. The "Overview" page opens, Select the "Protected items "option from left navigation bar. 4. Navigate the "Protected items" page. 5. Navigate the "Protected Items" page and navigate to the table. 6. Under the "Protected Items" table columns select one of the items. 7. Navigate the selected "Protected Items preview" page. 8. Navigate to "Protected Item details" expand/collapse button. 9. Now, check whether expand/collapse button is accessible by keyboard or not.

Bug Description

Actual Behavior

Expand/collapse button present for 'Protected item details" tree grid is not keyboard accessible.
###Observation:

• By invoking enter/space/alt + down/arrows keys Expand/collapse button is not accessible due to which table present under "Protected Item details" is not displayed.
• However, the Expand/collapse button is accessible on mouse click.

Expected Behavior

Expand/collapse button present for 'Protected item details" tree grid should be keyboard accessible.

Logs

No response

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.