1779417 - NVDA only reads visually-hidden button text on hover for certain portions of the button

Status: RESOLVED WONTFIX

(Firefox :: Disability Access, defect)

Description

[Mike Conley (:mconley) (:⚙️)]

Attachment: Test case

STR:

1. Enable NVDA
2. Visit the test case
3. Hover the icon button with the mouse

ER:

I think what's expected here is that upon hover, NVDA reads out the text of the button, no matter where the mouse is positioned on the button.

AR:

NVDA only reads out the text of the button for certain hover positions - for example, in the bottom right of the button. The top-left button, when hovered, doesn't cause NVDA to read out anything.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

tgiles pointed out that the hitbox that causes NVDA to read out the hidden text is the hitbox of the visually hidden span.

Comment 2

[Tim Giles [:tgiles]]

I got nerd sniped a bit here, but yeah if we're able to make the visually hidden span cover the same space as the button, then NVDA will read out the visually hidden text on hover on the icon button.

For example, given the test case in Comment #0 you could use the following styles to make the visually hidden text cover the icon button:

.visually-hidden {
 position: absolute;
 clip: rect(0, 0, 0, 0);
 width: 32px;
 height: 32px;
 left: 9px
 top: 9px
}

which will allow NVDA to read out the "My test button" text on hover.

Comment 3

[James Teh [:Jamie]]

This is a known bug in NVDA that we can't solve on our end apart from the workaround described in comment 2.

As an aside, I want to suggest that we should be preferring aria-label to visually hidden text in most cases, including this one. However, that definitely won't fix the issue at hand here and in fact will make it worse. Even so, I don't think the onus is on us (Mozilla platform/front-end) to fix this; it's an issue NVDA needs to fix.