elastic / elastic/eui

[EuiToolTip] Fix NVDA/Jaws not announcing in browse mode

Open
#9,753 3 comments 0 reactions 0 assignees View on GitHub
accessibility help wanted
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Reported by**

@mgadewoll

**Describe the bug**

Raised on https://github.com/elastic/eui/pull/9689#pullrequestreview-4435749666

> There is one thing I noticed, which seems to not be a regression in this PR but rather from before:
When using the screen reader navigation (arrowUp/Down, not TAB key) in NVDA and JAWS and then pressing Enter to focus the element, the tooltip is not announced. That used to be the case before the tooltip refactor. In JAWS the tooltip is not shown anymore.

**Impact and severity**

It's an a11y violation. It's not severe. There's no workaround.

**Environment and versions**

- EUI version: latest
- React version: -
- Kibana version (if applicable): -
- Browser: -
- Operating System: Windows

**Minimum reproducible sandbox**

N/A

**To Reproduce**

Using JAWS/NVDA:

1. Use arrow keys to navigate to the tooltip trigger.
2. Press Enter to focus the trigger.
3. Notice the tooltip is not announced after the trigger is focused.

**Expected behavior**

When using browse mode, tooltip is correctly announced.

**Screenshots (Optional)**

**NVDA**

| before | after |
|---|---|
| | |

**JAWS**

| before | after |
|---|---|
| | |

**Additional context (Optional)**

@weronikaolejniczak https://github.com/elastic/eui/pull/9689#issuecomment-4632788089:

> so I looked into it and you're right, this is the result of the :focus-visible gate. The browse mode/virtual cursor is treated like non-keyboard focus. Really nice find 🙏🏻
>
> Probably the best solution here would be always linking aria-describedby regardless of isVisible (?) but I'd need to think it through and actually test it out with several combos. So I'll handle that separately.

Contributor guide

Open the contributing guide

Research direction

Start with the EuiToolTip behavior and the focus-visible gate discussed in pull request 9689, including how aria-describedby is linked. Reproduce the issue with NVDA and JAWS in browse mode, then verify that focusing the tooltip trigger announces the tooltip in both screen readers.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.