search

arnog / mathlive

A web component for easy math input
https://cortexjs.io/mathlive
MIT License
1.58k stars 275 forks source link

Examples list causes change of focus, interferes with screen reader #80

Closed mitchellevan closed 6 years ago

mitchellevan commented 6 years ago

Prerequisites

n/a

Description

The Examples options list causes an unexpected change of keyboard focus.

Steps to Reproduce

  1. Use a Windows browser -- seen in Chrome or Firefox. Not reproducible in MacOS Safari.
  2. Tab to the option list control. It has an initial value of "Try an example" and an accessible label of "Menu".
  3. Press the Down Arrow key.

Actual behavior

After Step 3, keyboard focus moves automatically away from the option list control and lands on the math formula textbox control.

For sighted keyboard users, it's more difficult than necessary to read through the list of options. Workarounds: Shift+Tab back to the control repeatedly, or use Alt+DownArrow to open the list.

For screen reader users, this is a major disruption because the value the user switched to is not announced before focus jumps away.

Expected Behavior

After Step 3, keyboard focus should remain on the option list control. Let the user navigate by keyboard to the math input field when they're ready. The off-screen instructions already explain the automatic updating behavior of the contents of the math input field.

Environment

Operating System See above

Browser [Safari, Chrome, IE, Firefox, etc...] See above

URL [URL where the problem can be reproduced, if available] http://mathlive.io/0.24f/index.html

arnog commented 6 years ago

I have fixed this. I need to update mathlive.io with it.

arnog commented 6 years ago

Done.