updates from @jongund

README.md

@@ -97,7 +97,7 @@ The following options are useful for identify where the menu will be in the DOM
 | :------------- | :---------- | :---------- |
 | `displayOption` | 'static' | Values of `static`, `fixed` or `popup` are defined.  The value `static` the button is always visible, the value `fixed` the button is always visible at the top of the page even when the page scrolls, and the value `popup` is used the button is initially not visible, but becomes visible when it receives focus. |
 | `accessKey` | '0' | [Accesskey](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey) provides a way to open the Skip To menu from anywhere on the page, the default is the number zero. |
-| `attachElement` | 'header' | A CSS selector for identifying which element to attach the menu button container. |
+| `attachElement` | 'header' | A CSS selector for identifying which element to attach the menu button container.  If the `header` element is not present, it will use the `body` element as the default.|
 | `containerElement` | 'div' | Element to use as a container for the button and the menu.
 | `customClass` | none | CSS class added to the container element. Can be used for customize styling of the button and menu with author supplied stylesheet. |
 | `containerRole` | none | Optional landmark role added to a container element, if the container element is not within a landmark.  Ideally the menu button is placed within the `banner` landmark (e.g. `header` element. |
@@ -338,11 +338,11 @@ The source code in this section is for developers to understand the HTML, classe
 ### Notes
 
 * Parameters are optional.
-* SkipTo can be attached to any element on the page (see the "attachElement" parameter). if no "attachElement" is found, the script will be attached as the first element after body.
+* SkipTo will be attached to the `header`element as the first child by default.  If the `header`element is not present, it will be attached as the first child of the `body` element on the page.  The attachment can be changed using the "attachElement" parameter.
 * When the custom class is specified (see the customClass parameter), the user can override the style:
 
 ```css
-.skipTo.MyCustomClass {
+.skip-to.MyCustomClass {
   background:  red;
   left: 50px;
   top: 50px;
@@ -412,6 +412,14 @@ Happy skipping!
 
 ## Version History
 
+### Version 4.1.2
+* Added <code>aria-busy="true"</code> attribute to menu element when SkipTo is initialized and being updated with new menu items to support validators looking for required menu items for the <code>menu</code> role.
+* Added the <em>optional</em> <code>aria-controls</code> attribute to button element to reference the <code>id</code> of the menu element as defined in the W3C ARIA Authoring practices for [menu button pattern](https://w3c.github.io/aria-practices/#menubutton).
+
+
+### Version 4.1.1
+* Removed <code>aria-describedby</code> from button, since screen readers read the <code>accesskey</code> information.
+
 ### Version 4.1
 * Added feature for the <kbd>escape</kbd> key to hide tooltip when focus is on button.
 * Added new properties to set font family and font size.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "skipto",
-  "version": "4.1",
+  "version": "4.1.2",
   "homepage": "https://github.com/paypal/skipto",
   "authors": [
     "PayPal Accessibility Team and DRES Accessible IT Group at the University of Illinois"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "skipto",
   "description": "This plugin provides a dynamically-generated drop-down menu that allows keyboard and screen reader users to quickly skip to the most important places on the webpage.",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "keywords": [
     "accessibility",
     "Navigation",

src/js/skipto.js

@@ -11,7 +11,8 @@
 (function() {
   'use strict';
   var SkipTo = {
-    skipToId: 'is-skip-to-js-4',
+    skipToId: 'id-skip-to-js-4',
+    skipToMenuId: 'id-skip-to-menu-4',
     domNode: null,
     buttonNode: null,
     menuNode: null,
@@ -208,6 +209,7 @@
       this.buttonNode.textContent = this.config.buttonLabel;
       this.buttonNode.setAttribute('aria-haspopup', 'true');
       this.buttonNode.setAttribute('aria-expanded', 'false');
+      this.buttonNode.setAttribute('aria-controls', this.skipToMenuId);
       this.buttonNode.setAttribute('accesskey', this.config.accesskey);
 
       this.domNode.appendChild(this.buttonNode);
@@ -216,6 +218,8 @@
 
       this.menuNode = document.createElement('div');
       this.menuNode.setAttribute('role', 'menu');
+      this.menuNode.setAttribute('aria-busy', 'true');
+      this.menuNode.setAttribute('id', this.skipToMenuId);
       this.domNode.appendChild(this.menuNode);
       this.buttonNode.addEventListener('keydown', this.handleButtonKeydown.bind(this));
       this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
@@ -260,7 +264,6 @@
         this.config.enableTooltip = false;
       } else {
         this.tooltipNode.textContent = tooltip;
-        buttonNode.setAttribute('aria-describedby', id);
       }
 
       attachNode.appendChild(this.tooltipNode);
@@ -902,8 +905,10 @@
     },
     // Popup menu methods
     openPopup: function() {
+      this.menuNode.setAttribute('aria-busy', 'true');
       this.renderMenu();
       this.menuNode.style.display = 'block';
+      this.menuNode.removeAttribute('aria-busy');
       this.buttonNode.setAttribute('aria-expanded', 'true');
     },