microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.33k stars 2.72k forks source link

[Bug]: In DetailsList, GroupHeader's onRenderTitle does not receive id as prop (used as aria-labelledby in row that GroupHeader renders) #32229

Open cabillin opened 1 month ago

cabillin commented 1 month ago

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 10.0.26120
    CPU: (24) x64 AMD Ryzen Threadripper PRO 5945WX 12-Cores
    Memory: 30.93 GB / 63.86 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.26100.1

Are you reporting an Accessibility issue?

yes

Reproduction

https://codepen.io/KnetTravlr/pen/abgwZPb?editors=1010

Bug Description

Actual Behavior

id prop is not available in IGroupHeaderProps (available in GroupHeader's onRenderTitle) As a result, we cannot render our grid cell with the correct id for the parent row's aria-labelledby to be valid. This is acceptable in the repro since the AT is able to infer the row's accessible name from its children's accessible names. However, we have a much more complicated use case where the AT is NOT inferring the row's accessible name (and we need to use the aria-labelledby on a specific sub-element). image

Expected Behavior

id used in parent row's aria-labelledby is passed to GroupHeader's onRenderTitle, so we can achieve the same programmatic mapping as when there is no override. image

Logs

No response

Requested priority

Normal

Products/sites affected

Internal Microsoft website

Are you willing to submit a PR to fix?

no

Validations

spmonahan commented 1 month ago

The header id is generated here with no option for overriding.

Setting ariaLabel for the group may be a temporary workaround: https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/GroupedList/GroupHeader.base.tsx#L130-L131