wai-tutorials icon indicating copy to clipboard operation
wai-tutorials copied to clipboard

Menus, Fly-Out, Approach 2 - NVDA and attributes

Open shawna-slh opened this issue 4 years ago • 2 comments

Ref: Menus, Fly-Out, Approach 2

from e-mail:

Specifically the second keyboard example: "Approach 2: Use button as toggle".

NVDA seems to have trouble with links which have invisible (off-screen) content. SUggest to use the button content to hold the visual symbol / icon / etc, and use aria-label="show menu for space bears".

Also, the "a" element in this example should not get aria-expanded; I believe this is a bit misleading. IMO, should not get the aria-haspopup either. I think these attributes should only be present on the button that actually toggles the submenu.

shawna-slh avatar Jan 26 '21 18:01 shawna-slh

NVDA seems to have trouble with links which have invisible (off-screen) content. SUggest to use the button content to hold the visual symbol / icon / etc, and use aria-label="show menu for space bears".

Tested with Chrome and NVDA: The output is correct

Also, the "a" element in this example should not get aria-expanded; I believe this is a bit misleading. IMO, should not get the aria-haspopup either. I think these attributes should only be present on the button that actually toggles the submenu.

I agree. I think the two attributes at the link are wrong

JAWS-test avatar Jan 27 '21 07:01 JAWS-test

i did not remove the aria-expanded, but this PR #633 removes the incorrect use of aria-haspopup

scottaohara avatar Nov 20 '21 22:11 scottaohara