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'); },