[Bug]: [Package: charting] [Accessibility] NVDA is narrating incorrect state for selected legend check box.

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 9.80 GB / 31.69 GB
  Browsers:
    Edge: Chromium (119.0.2151.72)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

yes

Reproduction

https://codepen.io/Saidev-Mohapatra/pen/gOqjabB

Bug Description

Actual Behavior

When focus is on the selected 'Legend1', NVDA is narrating as 'Legend1 not selected 1 of 3'.

Expected Behavior

Screen reader (NVDA) should narrate correct state for selected legend checkbox.

codepen example

https://codepen.io/Saidev-Mohapatra/pen/gOqjabB
Fluent UI - Controls - React - VerticalBarChart (microsoft.com)

More Details:

Pre-requisites:

Enable NVDA, EDGE Browser

Issue:

Screen reader (NVDA) is narrating incorrect state for selected legend checkbox.
e.g. When focus is on the selected 'Legend1', NVDA is narrating as 'Legend1 not selected 1 of 3'.

Expected Result:

Screen reader (NVDA) should narrate correct state for selected legend checkbox.

Suggestive Fix:

aria-selected="true" should be used for selected legend

References:

MAS 4.1.2 – Name, Role, Value

WCAG Reference:

https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Internal Tracker BugId:

BUG 18438

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

Start with the linked CodePen reproduction using NVDA and Edge, then inspect the React charting legend implementation for how the selected checkbox state is exposed. Done means the selected legend is announced as selected by NVDA while preserving the expected position information.