Fluentui: Details List: Group header doesn't announce number of children

Created on 28 Jan 2020  路  4Comments  路  Source: microsoft/fluentui

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out)

Describe the issue:

When a Narrator user navigates to a group header, the item doesn't announce how many children it has.

Please provide a reproduction of the issue in a codepen:

  1. Navigate to this page.
  2. Turn Narrator on.
  3. Using keyboard navigation go to the group header.

Actual behavior:

Expected behavior:

Documentation describing expected behavior

Accessibility Narrator GroupedList Type

All 4 comments

One solution, if there are no aria properties to support this would be to append the number at the end of the label. e.g. ", #"

I don't think there would be any localization issues with this and I believe this is what is done in win32.

Another suggestion would be to follow the TreeView example here when marking up items in the details list. I'm not sure appending the number at the end of the label is the best idea, we really should be using aria properties to expose this information https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role

@jspurlin as FYI

I think there's another bug that is/was tracking that. Can't remember if that was already addressed but @khmakoto can speak to that.

Your suggestion should definitely be applied here, I just recall there being an issue where Narrator still isn't reading out the number of children in that case so I was giving an alternative suggestion.

To summarize we should:

  1. Do what @SavannahBourgeois suggests.
  2. If the above doesn't give us the desired behavior, we can consider my suggestion.

Aggregated into #15355.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

luisrudge picture luisrudge  路  3Comments

justinwilaby picture justinwilaby  路  3Comments

VincentBailly picture VincentBailly  路  3Comments

nekoya picture nekoya  路  3Comments

rickyp-ms picture rickyp-ms  路  3Comments