Date picker spin button example broken in Safari

[backwardok]

The example for the spinbutton role works well in Chrome, but has a javascript error in Safari.

On load, there's a SyntaxError: The string did not match the expected pattern. on this line in spinbutton-date.js:
domNode.querySelector('[role="spinbutton');

My guess is that Chrome is being generous with the selector here and Safari is breaking because it's technically an invalid selector. It should be domNode.querySelector('[role="spinbutton]'); (it was missing the closing right bracket)

[JAWS-test]

Further problems at https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html and http://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html:

• When increasing the number for the day over 31, "NaN" is displayed.
• When decreasing number for the day below 1, the top number freezes at 31 and the two bottom numbers become negative.
• If you press End or Home for the year, "NaN" is also displayed.

(tested with Chrome and Firefox, Windows 8)

[JAWS-test]

JAWS outputs: "To set the value use the Arrow keys or type the value", because normally free text input in spin button fields is possible. But not here. Maybe readonly has to be used? Or should text input be made possible?

[backwardok]

Verified that the issue was not happening in Chrome, Firefox, and Edge, but is also happening in IE11. Working on a fix for this specific issue

@JAWS-test can you file separate issues for the other things you're finding?

[backwardok]

@JAWS-test made a fix for the issue with the NaN: #1154

[JAWS-test]

@backwardok

can you file separate issues for the other things you're finding?

#1155

Thank you so much for fixing the other problems so quickly!

[mcking65]

Thanks to @backwardok, this is fixed with commit e451c93!