Unnecessary column markup announced for DetailsList by Narrator screen reader.

[Renuka8796]

Environment Information Package version(s): "@fluentui/react": "^8.18.0", Browser and OS versions: Dev edge and Windows 10

Describe the issue: In DetailsList fabric control, narrator announces first column as column 2 and second column as column 3 and so on. For example : When we navigate to the table the narrator announces ", 6 by 9 group, Column Header, Row 1 of 6 Column 1 of 9" but visually there is only 8 column present with data but narrator announces 9 .

But this issue is with only in dev edge with narrator and working fine in chrome nvda and normal edge narrator.

Please provide a reproduction of the issue in a codepen: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic

Actual behavior: When we navigate to the table the narrator announces ", 6 by 9 group, Column Header, Row 1 of 6 Column 1 of 9" but visually there is only 8 column present with data but narrator announces 9 .

Expected behavior: The narrator should not announce column markup for first column as there is no data in the first column so there should not be any column markup . The column with no content should be removed.

[ecraig12345]

@Renuka8796 Can you please provide a repro of the issue? Either use one of the examples from the website (look in the left nav for more examples), or click "Export to CodePen" on one of the examples and modify it to be more like your scenario.

[msft-fluent-ui-bot]

Thanks for taking the time to enter an issue. However, it seems that there aren't enough details here for this issue to be actionable.

When issues are created, we need details such as:

1. Which Fluent UI component is causing the issue
2. Which package name and version the component is from
3. Specific, complete steps to reproduce the issue
4. What behaviors and attributes are missing or incorrect
5. What you expected and what is actually happening
6. Confirmation that the problem reproduces in isolation

Without a clear understanding of these details, it's not possible to take clear action on issues. We are unable to meet your expectations, properly address the root cause, and make changes without affecting the expectations of other consumers.

Please provide these additional details as you are able. The default issue template provides an outline of these details and is viewable when creating a new issue. Additionally, if this is an accessibility issue, please see Accessibility Troubleshooting in our wiki for more guidance. If these details cannot be provided, please kindly close the issue.

Thank you for your patience.

[Renuka8796]

We observed the same behaviour in fabric ui, Details list control. Please find the below link to repro the issue.

https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic

[msft-fluent-ui-bot]

@miroslavstastny

Gentle ping that this issue needs attention.

[NadRose]

I've also experience similar issue, when using groups, only in Edge browser and only with windows narrator (other browsers and screen readers seems to work fine)

Environment Information Package version(s): "@fluentui/react": "^8.44.0", Browser: Microsoft Edge version 96.0.1054.34 (Official build) (64-bit) OS: Windows 11 Version 21H2 (OS Build 22000.318) but also in windows 10

Describe the issue: When using DetailsList groups prop, and set the "collapseAllVisibility" to hidden, the narrator announce wrong column number. For example: I took the official example from: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped and added "collapseAllVisibility: 0" to groupProps.

CodePen link: https://codepen.io/nadavrosenthal/pen/Exvqoxp

Narrator is announcing that there are 4 columns instead of 3. Name and Color are announced as 2 of 4 and 3 of 4 (instead of 2 of 3 and 3 of 3)

From what I can tell, this could be because wrong "aria-colindex" property is assigned to each column in each table row:

Please provide a reproduction of the issue in a codepen: https://codepen.io/nadavrosenthal/pen/Exvqoxp

Actual behavior: Narrator is announcing that there are 4 columns instead of 3. Name and Color are announced as 2 of 4 and 3 of 4.

Expected behavior: Narrator should announce that there are 3 columns. Name and Color should be announce as 2 of 3 and 3 of 3.

MAS Reference: MAS 1.3.1 – Info and Relationship

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.