I'm evaluating whether I can use a listbox in my web app, which needs to meet 508 accessibility standards for screen reader users. While the demo site says that the control is 508 compliant from an evaluation standpoint, i'm curious as to how I can get it to actually be usable to blind users. I tried running jaws against the keyboard support demo, and while I can use the arrows to navigate the list and select an item with the spacebar, the keystrokes to move the selected option into the right box do not work. Essentially none of the keyboard keys listed in the legend work because Jaws is trapping the key events before it gets to the control.
That being said, I then tried wrapping the demo in a div with a role="application" attribute, and jaws now allows the keyboard events to pass through to the control. However, it now doesn't actually read the items in the list as you are scrolling through them.
So my question is, how can this control be set up to be usable for screen reader users? Meaning it will read the options to the user, and also allow them to navigate within the control with the keyboard.