Review 1.2 IDL(Interface Definition Language) button example

[mcking65]

The APG 1.2 IDL Button Example developed for issue #701 is ready for task force review.

[annabbott]

No text issues noted in APG 1.2 IDL Button Example.

However, with JAWS 2018.1805.33 and NVDA 2018.1.1 in Firefox 60.0.2 and Chrome 67.0.3396.87 on Win10:
Mute button does not function with either Space or Enter. Only NVDA announced Mute button "not pressed".

With JAWS 2018.1805.33 and NVDA 2018.1.1 in IE11 on Win10:
Mute button does not function with either Space or Enter. Pressed/not pressed state not announced. Graphic on button to indicate Mute/Unmute does not appear.

[jnurthen]

In order to test this you need to run Chrome Canary and use the --enable-blink-features=AccessibilityObjectModel flag.

[scottaohara]

Testing this today with Firefox, Safari and Chrome on macOS.

Both buttons work as expected with Safari and Chrome with VoiceOver on or off.

The mute button does not change state when mouse clicked with Firefox.
The SVG changes when using space or enter to toggle the button, though aria-pressed does not change. It doesn't matter if i've turned on the AOM flag in firefox or not.

[carmacleod]

Add more words to the example's description to explain that this is the simplest example of using the IDL and it is just for illustrative purposes. (the example uses element.role and element.ariaPressed in the js)
Also, use createElement instead of having the element already in the DOM.

[carmacleod]

@mcking65
The code for the "Button" and "Button IDL" examples has diverged a fair bit due to updates to the Button example on Sept 13, 2018, which were after the "Button IDL" code was added on June 19, 2018.

Since the IDL example states that:

The JavaScript for the examples on this page uses the IDL interface defined in ARIA 1.2. In all other respects, these examples are identical to the Button Examples.

... the easiest thing for me is to start with a fresh copy of the (updated) button example and just make the IDL-related changes that we discussed (so that the files will only differ by about a dozen lines or so in total).

Sound good?

Also, just curious why aria-hidden was removed from the "Mute" SVG in the toggle button? Seems to me that the icon is redundant (i.e. because the button text is also "Mute") so it would be better if the SVG was aria-hidden, particularly as JAWS only says "Mute" and doesn't differentiate between the 2 forms of the icon (speaker with an X through it vs. speaker with sound waves in front of it).
i.e. I would think that "Mute button Pressed" or "Mute button Not Pressed" would be preferred over "Mute button Pressed Mute" or "Mute button Not Pressed Mute"?

[mcking65]

Resolved with commit 3d83acd.