Menu button Examples Updated

[jongund]

Updated the documentation to use the new format
Updated code and CSS to better coding practices

[mcking65]

Jon, please clean up the jscs errors.

[mcking65]

@jongund,

The code changes have introduced some bugs with focus management. To reproduce:

1. When running JAWS, load the menubutton-1 page.
2. With the virtual cursor active, press the F key to move the vc to the menubutton.
3. Press enter to activate. Menu opens and focus is set corr3ectly.
4. press escape to close the menu.
5. Press enter again. The menu expands, but focus is not set on the first item.

Both examples have this bug.

In master, menubutton-2 has this bug, but 1 does not.

[mcking65]

@jongund,

Please compare the menu-button-1.html and menu-button-2.html files to
examples/coding-template/Example-Template.html and resolve the following differences:

• Difference in title tag format: I recommend a shorter title for both so that the complete title can include the title of the main document after the "|" and not be too long. For example, title tag content for example 1 could be "Actions Menubutton Example | WAI-ARIA Authoring Practices 1.1"
• Eliminate the aria-labelledby attributes on sections that are adding landmark regions to sections inside main.
• Implement the screen reader separators that are on lines 52, 73, 189, and 191 in the template.
• Make the heading structure and format match the template.
• Organize the information in the same way as the template so keyboard info is grouped under one heading and all roles/states info is grouped under one heading.
• Add the nav element that is on line 203 of the template.

Many thanks!!

[jongund]

I have made the changes to menu button examples, so it should be ready to merge. Jon From: Matt King <notifications@github.com<mailto:notifications@github.com>> Reply-To: w3c/aria-practices <reply@reply.github.com<mailto:reply@reply.github.com>> Date: Tuesday, December 6, 2016 at 3:01 AM To: w3c/aria-practices <aria-practices@noreply.github.com<mailto:aria-practices@noreply.github.com>> Cc: Jon Gunderson <jongund@illinois.edu<mailto:jongund@illinois.edu>>, Mention <mention@noreply.github.com<mailto:mention@noreply.github.com>> Subject: Re: [w3c/aria-practices] Menu button Examples Updated (#163) @jongund<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jongund&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=7hKHuU9tXi7qipux8O9J9Z4vnFZ-kqlkj8-gcYWcIUI&s=ZfKQVd3ZELzD9u0jUfK0Y6ED8ZaDGhztnH99U_rFHME&e=>, Please compare the menu-button-1.html and menu-button-2.html files to examples/coding-template/Example-Template.html <https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_blob_master_examples_coding-2Dtemplate_Example-2DTemplate.html&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=7hKHuU9tXi7qipux8O9J9Z4vnFZ-kqlkj8-gcYWcIUI&s=ifk8xh72HPsBohcOkpHC7ZpiTwR8UoKQV77khQU0Ric&e=> and resolve the following differences: * Difference in title tag format: I recommend a shorter title for both so that the complete title can include the title of the main document after the "|" and not be too long. For example, title tag content for example 1 could be "Actions Menubutton Example | WAI-ARIA Authoring Practices 1.1" * Eliminate the aria-labelledby attributes on sections that are adding landmark regions to sections inside main. * Implement the screen reader separators that are on lines 52, 73, 189, and 191 in the template. * Make the heading structure and format match the template. * Organize the information in the same way as the template so keyboard info is grouped under one heading and all roles/states info is grouped under one heading. * Add the nav element that is on line 203 of the template. Many thanks!! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_pull_163-23issuecomment-2D265096439&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=7hKHuU9tXi7qipux8O9J9Z4vnFZ-kqlkj8-gcYWcIUI&s=R7DmTmynoUq3_4A-I3sShcQgtZz8GpC2Chi1gFfeEyk&e=>, or mute the thread<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABcE7C-2D32n38Xn-5Fwbwg9VzFbL5IDew0qks5rFSSDgaJpZM4K7GtH&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=7hKHuU9tXi7qipux8O9J9Z4vnFZ-kqlkj8-gcYWcIUI&s=I7OEJFET-Nnt2-Amo_3-u4EtpIvsHQS1d17LHJx8eGg&e=>.

[mcking65]

@jongund

Enter and space are still not focusing on the first menu item after pressed when the button has focus.

The rest of the changes look good. I will merge this, and we can address the bug separately.

Thank you for all this excellent work!!!

[jongund]

Matt, I thought I fixed the focus on first item issue, just a few lines of code to make it work right. I will check again tomorrow morning. Thank you for all your work too!

…

Sent from my iPad On Dec 6, 2016, at 6:20 PM, Matt King <notifications@github.com<mailto:notifications@github.com>> wrote: @jongund<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jongund&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=FZ7nhD2MGbo5ce-wxgfHdpLQQnzrTHS6TgMXbLIzKIk&s=jJnbGYFBEPp-VwvUrP0xFIeCV_txIsyfnTpqsi-NUHY&e=> Enter and space are still not focusing on the first menu item after pressed when the button has focus. The rest of the changes look good. I will merge this, and we can address the bug separately. Thank you for all this excellent work!!! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_pull_163-23issuecomment-2D265316627&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=FZ7nhD2MGbo5ce-wxgfHdpLQQnzrTHS6TgMXbLIzKIk&s=vBhzcpkZ0wqReowZ_qjZRdDmXVb-p_qz8SM72qEluBU&e=>, or mute the thread<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABcE7JrvbRRhGQWDL7Rd-2DQtCTDDszPecks5rFfvIgaJpZM4K7GtH&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=FZ7nhD2MGbo5ce-wxgfHdpLQQnzrTHS6TgMXbLIzKIk&s=L8YLzNZA6vng5_idB6-BZ8nDVSD9zj2-b2HrDLdsqWY&e=>.