diff --git a/README.md b/README.md
index 6713512..faebe93 100644
--- a/README.md
+++ b/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 aria-busy="true"
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 menu
role.
+* Added the optional aria-controls
attribute to button element to reference the id
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 aria-describedby
from button, since screen readers read the accesskey
information.
+
### Version 4.1
* Added feature for the escape key to hide tooltip when focus is on button.
* Added new properties to set font family and font size.
diff --git a/bower.json b/bower.json
index 4d553d8..b9b6be4 100644
--- a/bower.json
+++ b/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"
diff --git a/package.json b/package.json
index 6c2076a..b16f5c9 100644
--- a/package.json
+++ b/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",
diff --git a/src/js/skipto.js b/src/js/skipto.js
index 325f257..a1c0e15 100644
--- a/src/js/skipto.js
+++ b/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');
},