microsoft/fluentui

[Bug]: attribute "hidden" on Tooltip prevents its content being read by narrator, it does not get removed when tooltip shows

Closed this issue · 2 comments

flora8984461 commented

Package

react

Package version

8.122.0

React version

18

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz
    Memory: 42.18 GB / 63.57 GB
  Browsers:
    Edge: Chromium (129.0.2792.52)
    Internet Explorer: 11.0.26100.1882

Current Behavior

Hi team, I am using Fluent UI - Controls - React - Tooltip (v8). There is "hidden" attribute and it is not removed when Tooltip shows. This prevents tooltip content being read by screen reader / narrator.

Image

I have seem some other closed issue that might have discussion over whether tooltip should be read, for example, #900.
But in our design cases, it would be nice we could have it read, it provides additional information.

Expected Behavior

It should remove "hidden" when Tooltip shows to allow screen reader / narrator to announce it. I tried removing "hidden", the screen reader can read the content.

Reproduction

https://codepen.io/FloraLiu234/pen/yyBaWWx

Steps to reproduce

  1. Go to the codepen, or simply use "Default Tooltip" example from https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
  2. Open inspector
  3. Turn on Narrator
  4. Use keyboard to focus on the button
  5. Note that the narrator can't read tooltip content and the "hidden" attribute is still there even the tooltip is shown.

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.
flora8984461 commented

I also tried in v9 with "aria-describedby" option, and it works with Narrator and I don't see "hidden" attribute for it. https://stackblitz.com/run?file=src%2Fexample.tsx

flora8984461 commented

Discussed internally, this is expected behavior.