You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 thetabIndexproperty 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.
The text was updated successfully, but these errors were encountered:
Library
React / v8 (@fluentui/react)
System Info
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:
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
The text was updated successfully, but these errors were encountered: