Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hidden <button> inside role="button" adds extra navigation node. #258

Closed
erikkroes opened this issue Aug 28, 2019 · 2 comments
Closed

Hidden <button> inside role="button" adds extra navigation node. #258

erikkroes opened this issue Aug 28, 2019 · 2 comments
Labels
IE11 triaged wontfix

Comments

@erikkroes
Copy link

Summary

When an element with role="button" contains a hidden <button>, JAWS announces an extra singular "button" when browsing.

  1. Open IE11
  2. Browse to https://lion-web-components.netlify.com/iframe.html?id=buttons-button--used-on-its-own
  3. Use browse mode to navigate the buttons.

Expected result

You hear "button1name, button", when you press the arrow key, you hear "button2name, button".

Actual result

You hear "button1name, button", when you press the arrow key, you hear "button", you press the arrow key again and then hear "button2name, button".

Additional Information

  • JAWS version: 2018.1808.10
  • Windows version: 10.0.10240
  • IE version: 11.0.10240.17443
  • Running windows in Parallels Desktop on Mac

Notes

I've tried many ways to hide the <button>: tabindex="-1", display: none, aria-hidden, role="presentation", etc. Nothing changed the outcome.
Turning the <button> into an <a> doesn't change the outcome. Changing it into a <span> does, it removes the superfluous button announcement.
Adding an aria-label to the parent element also fixes things.
My impression is that things go wrong when it's trying to calculate an accessible name from the contents of the parent element, and by adding an aria-label you prevent that step from happening.
@erikkroes erikkroes mentioned this issue Aug 28, 2019
Closed
@JAWS-test
Copy link

I can confirm the problem - even with the latest version of JAWS 2019. It only occurs in IE 11 and not in Firefox and Chrome. It is an error of implicit role=presentation within role=button. This does not work in IE 11. This has the consequence that in the following examples with Tab, with linear reading and in the element overview (INS+F5, INS+Ctrl+B) also the inner button is output as unlabeled button.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>button</title>
	</head>
	<body>
		<button>1
			<div role=button></div>
		</button>

		<div role=button tabindex=0>2
			<button tabindex=-1></button>
		</div>

		<div role=button tabindex=0>3
			<div role=button></div>
		</div>
	</body>
</html>

Further problems with role=presentation:

@JAWS-test
Copy link

JAWS-test commented Aug 29, 2019 •
edited
Loading

On the other hand, the question would be why a native HTML element has to be designed so cumbersome. button can be styled well with CSS. There is no obvious reason to use so much source code for a button. The more complex simple HTML elements are designed, the more error-prone it becomes for everybody and the more difficult it becomes for assistive technology to output the content correctly. Keep it simple! And never forget the first rule: https://www.w3.org/TR/using-aria/#rule1

@stevefaulkner stevefaulkner closed this as not planned Won't fix, can't repro, duplicate, stale Jan 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
IE11 triaged wontfix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@stevefaulkner @erikkroes @JAWS-test