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

[saidevmohapatra]

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

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[saidevmohapatra]

@admin pls add tag "Package: charting", I am unable to add

[krkshitij]

@saidevmohapatra We don't consider hovering/focusing on legends as selection. Legend selection happens only when the click event on a legend button is triggered. Currently, both of these states have the same behavior, which can create some confusion.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".