Updates needed for button example page

[mcking65]

The button example page
needs the following changes.

• Update to use the current example template
• Make the toggle button with anchor instead of span.
• Drop the 3rd "show alert" button example.
• Remove the "non-compliant" example or change it to follow the pattern; the task force has agreed to not include anti-patterns.
• Change the title to "Button Examples"
• Fix misspellings.
• Task force decision on whether a note discouraging use of role button in favor of html buttons is warranted. If yes, agree on a wording.

[annabbott]

If the task force has agreed to not include anti-patterns, then the non-compliant pattern "a element with href="#"" should be deleted including the code example at the bottom of the page.

[mcking65]

I am not comfortable with the wording of the following note so I am removing it for now, and I am adding a task to the above checklist to address this point.

Note: When using HTML, use the button element.
It is recommended that authors not re-purpose other elements to create buttons.

If we are going to have a note like this, the note should either include a crisp statement of rationale or link to an explanation.

[jongund]

Does the mute button need to change the accessible when it toggles from pressed to unpressed (e.g. mute to unmute)?

[mcking65]

@jongund wrote:

Does the mute button need to change the accessible when it toggles from pressed to unpressed (e.g. mute to unmute)?

No, in fact, the design pattern explicitly warns people not to do that. We may want to remind of them of that on the example page in the properties table.

[mdahamiwal]

The first button example "Print Page" doesn't specify tabindex and is not part of tab order.

[mdahamiwal]

@mcking65, can you review the fix?

[jnurthen]

@mdahamiwal thanks.

[mcking65]

Per today's discussion in APG task force meeting, adding the following two items to the checklist of required updates:

1. Make the toggle button with anchor instead of span.
2. Drop the 3rd "show alert" button example.

[jnurthen]

Resolved in 3/13/2017 meeting not to add a note discouraging button role

Minutes of March 13, 2017 teleconference:
https://www.w3.org/2017/03/13-aria-apg-minutes.html

[mcking65]

@jongund, while working on editorial clean up, I noticed that the svg for the toggle is inline but not part of the example div. Since it is a part of the example, it should either be inside that div, which might be distracting to people reading the html, or in an svg file. I sort of prefer the latter for both clarity and consistency with other examples.

[jongund]

Fixed

[annabbott]

Under Toggle Button, the following statement is present:
Mute button uses a a element.
Suggested edit:
Mute button uses an a element.

Copied forward to issue #316

[jongund]

I moved the SVG to an external file

[mcking65]

All updates are now complete and being reviewed in issue 316. Closing.