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).
diff --git a/compiled/js/skipto.js b/compiled/js/skipto.js
index 3b9bc61..17147f1 100644
--- a/compiled/js/skipto.js
+++ b/compiled/js/skipto.js
@@ -1,4 +1,4 @@
-/*! skipto - v4.1.2 - 2021-09-17
+/*! skipto - v4.1.3 - 2021-10-08
* https://github.com/paypal/skipto
* Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD */
/*@cc_on @*/
@@ -67,9 +67,9 @@
searchLabel: 'search',
navLabel: 'navigation',
regionLabel: 'region',
- asideLabel: 'aside',
- footerLabel: 'footer',
- headerLabel: 'header',
+ asideLabel: 'complementary',
+ footerLabel: 'contentinfo',
+ headerLabel: 'banner',
formLabel: 'form',
msgNoLandmarksFound: 'No landmarks found',
msgNoHeadingsFound: 'No headings found',
@@ -1324,6 +1324,7 @@
case 'nav':
n = this.config.navLabel;
break;
+ case 'section':
case 'region':
n = this.config.regionLabel;
break;
@@ -1410,8 +1411,8 @@
case 'navigation':
tagName = 'nav';
break;
- case 'section':
- tagName = 'region';
+ case 'region':
+ tagName = 'section';
break;
case 'search':
tagName = 'search';
@@ -1420,7 +1421,7 @@
break;
}
// if using ID for selectQuery give tagName as main
- if (['aside', 'footer', 'form', 'header', 'main', 'nav', 'region', 'search'].indexOf(tagName) < 0) {
+ if (['aside', 'footer', 'form', 'header', 'main', 'nav', 'section', 'search'].indexOf(tagName) < 0) {
tagName = 'main';
}
if (landmark.hasAttribute('aria-roledescription')) {
@@ -1435,6 +1436,7 @@
var landmarkItem = {};
landmarkItem.dataId = dataId.toString();
landmarkItem.class = 'landmark';
+ landmarkItem.hasName = name.length > 0;
landmarkItem.name = this.getLocalizedLandmarkName(tagName, name);
landmarkItem.tagName = tagName;
landmarkItem.nestingLevel = 0;
@@ -1443,6 +1445,7 @@
}
this.skipToIdIndex += 1;
allLandmarks.push(landmarkItem);
+
// For sorting landmarks into groups
switch (tagName) {
case 'main':
@@ -1460,8 +1463,11 @@
case 'footer':
footerElements.push(landmarkItem);
break;
- case 'region':
- regionElements.push(landmarkItem);
+ case 'section':
+ // Regions must have accessible name to be included
+ if (landmarkItem.hasName) {
+ regionElements.push(landmarkItem);
+ }
break;
default:
otherElements.push(landmarkItem);
@@ -1472,7 +1478,7 @@
if (allFlag) {
return allLandmarks;
}
- return [].concat(mainElements, regionElements, searchElements, navElements, asideElements, footerElements, otherElements);
+ return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements);
}
};
// Initialize skipto menu button with onload event
diff --git a/compiled/js/skipto.min.js b/compiled/js/skipto.min.js
index cb6b386..3a24af9 100644
--- a/compiled/js/skipto.min.js
+++ b/compiled/js/skipto.min.js
@@ -1,8 +1,8 @@
-/*! skipto - v4.1.2 - 2021-09-17
+/*! skipto - v4.1.3 - 2021-10-08
* https://github.com/paypal/skipto
* Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD */
/*@cc_on @*/
/*@if (@_jscript_version >= 5.8) @*/
-!function(){"use strict";var SkipTo={skipToId:"id-skip-to-js-4",skipToMenuId:"id-skip-to-menu-4",domNode:null,buttonNode:null,menuNode:null,tooltipNode:null,menuitemNodes:[],firstMenuitem:!1,lastMenuitem:!1,firstChars:[],headingLevels:[],skipToIdIndex:1,showAllLandmarksSelector:"main, [role=main], [role=search], nav, [role=navigation], section[aria-label], section[aria-labelledby], section[title], [role=region][aria-label], [role=region][aria-labelledby], [role=region][title], form[aria-label], form[aria-labelledby], aside, [role=complementary], body > header, [role=banner], body > footer, [role=contentinfo]",showAllHeadingsSelector:"h1, h2, h3, h4, h5, h6",showTooltipFocus:!1,showTooltipHover:!1,tooltipTimerDelay:500,config:{enableActions:!1,enableMofN:!0,enableHeadingLevelShortcuts:!0,enableHelp:!0,enableTooltip:!0,accesskey:"0",attachElement:"header",displayOption:"static",containerElement:"div",containerRole:"",customClass:"",buttonTitle:"",buttonTitleWithAccesskey:"",buttonTooltip:"",buttonTooltipAccesskey:"Shortcut Key: $key",buttonLabel:"Skip To Content",menuLabel:"Landmarks and Headings",landmarkGroupLabel:"Landmarks",headingGroupLabel:"Headings",mofnGroupLabel:" ($m of $n)",headingLevelLabel:"Heading level",mainLabel:"main",searchLabel:"search",navLabel:"navigation",regionLabel:"region",asideLabel:"aside",footerLabel:"footer",headerLabel:"header",formLabel:"form",msgNoLandmarksFound:"No landmarks found",msgNoHeadingsFound:"No headings found",actionGroupLabel:"Actions",actionShowHeadingsHelp:'Toggles between showing "All" and "Selected" Headings.',actionShowSelectedHeadingsLabel:"Show Selected Headings ($num)",actionShowAllHeadingsLabel:"Show All Headings ($num)",actionShowLandmarksHelp:'Toggles between showing "All" and "Selected" Landmarks.',actionShowSelectedLandmarksLabel:"Show Selected Landmarks ($num)",actionShowAllLandmarksLabel:"Show All Landmarks ($num)",actionShowSelectedHeadingsAriaLabel:"Show $num selected headings",actionShowAllHeadingsAriaLabel:"Show all $num headings",actionShowSelectedLandmarksAriaLabel:"Show $num selected landmarks",actionShowAllLandmarksAriaLabel:"Show all $num landmarks",landmarks:'main, [role="main"], [role="search"], nav, [role="navigation"], aside, [role="complementary"]',headings:'main h1, [role="main"] h1, main h2, [role="main"] h2',colorTheme:"",fontFamily:"",fontSize:"",positionLeft:"",menuTextColor:"",menuBackgroundColor:"",menuitemFocusTextColor:"",menuitemFocusBackgroundColor:"",focusBorderColor:"",buttonTextColor:"",buttonBackgroundColor:""},colorThemes:{default:{fontFamily:"inherit",fontSize:"inherit",positionLeft:"46%",menuTextColor:"#1a1a1a",menuBackgroundColor:"#dcdcdc",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#1a1a1a",focusBorderColor:"#1a1a1a",buttonTextColor:"#1a1a1a",buttonBackgroundColor:"#eeeeee"},illinois:{fontFamily:"inherit",fontSize:"inherit",positionLeft:"46%",menuTextColor:"#00132c",menuBackgroundColor:"#cad9ef",menuitemFocusTextColor:"#eeeeee",menuitemFocusBackgroundColor:"#00132c",focusBorderColor:"#ff552e",buttonTextColor:"#444444",buttonBackgroundColor:"#dddede"},aria:{fontFamily:"sans-serif",fontSize:"10pt",positionLeft:"7%",menuTextColor:"#000",menuBackgroundColor:"#def",menuitemFocusTextColor:"#fff",menuitemFocusBackgroundColor:"#005a9c",focusBorderColor:"#005a9c",buttonTextColor:"#005a9c",buttonBackgroundColor:"#ddd"}},defaultCSS:".skip-to.popup{position:absolute;top:-30em;left:0}.skip-to,.skip-to.popup.focus{position:absolute;top:0;left:$positionLeft;font-family:$fontFamily;font-size:$fontSize}.skip-to.fixed{position:fixed}.skip-to button{position:relative;margin:0;padding:6px 8px 6px 8px;border-width:0 1px 1px 1px;border-style:solid;border-radius:0 0 6px 6px;border-color:$buttonBackgroundColor;color:$menuTextColor;background-color:$buttonBackgroundColor;z-index:200;font-family:$fontFamily;font-size:$fontSize}.skip-to .skip-to-tooltip{position:absolute;top:2.25em;left:8em;margin:1px;padding:4px;border:1px solid #ccc;box-shadow:2px 3px 5px #ddd;background-color:#eee;color:#000;font-family:Helvetica,Arial,Sans-Serif;font-variant-numeric:slashed-zero;font-size:9pt;width:auto;display:none;white-space:nowrap;z-index:201}.skip-to .skip-to-tooltip.skip-to-show-tooltip{display:block}.skip-to [aria-expanded=true]+.skip-to-tooltip.skip-to-show-tooltip{display:none}.skip-to [role=menu]{position:absolute;min-width:17em;display:none;margin:0;padding:.25rem;background-color:$menuBackgroundColor;border-width:2px;border-style:solid;border-color:$focusBorderColor;border-radius:5px;z-index:1000}.skip-to [role=group]{display:grid;grid-auto-rows:min-content;grid-row-gap:1px}.skip-to [role=separator]:first-child{border-radius:5px 5px 0 0}.skip-to [role=menuitem]{padding:3px;width:auto;border-width:0;border-style:solid;color:$menuTextColor;background-color:$menuBackgroundColor;z-index:1000;display:grid;overflow-y:auto;grid-template-columns:repeat(6,1.2rem) 1fr;grid-column-gap:2px;font-size:1em}.skip-to [role=menuitem] .label,.skip-to [role=menuitem] .level{font-size:100%;font-weight:400;color:$menuTextColor;display:inline-block;background-color:$menuBackgroundColor;line-height:inherit;display:inline-block}.skip-to [role=menuitem] .level{text-align:right;padding-right:4px}.skip-to [role=menuitem] .label{text-align:left;margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skip-to [role=menuitem] .label:first-letter,.skip-to [role=menuitem] .level:first-letter{text-decoration:underline;text-transform:uppercase}.skip-to [role=menuitem].skip-to-h1 .level{grid-column:1}.skip-to [role=menuitem].skip-to-h2 .level{grid-column:2}.skip-to [role=menuitem].skip-to-h3 .level{grid-column:3}.skip-to [role=menuitem].skip-to-h4 .level{grid-column:4}.skip-to [role=menuitem].skip-to-h5 .level{grid-column:5}.skip-to [role=menuitem].skip-to-h6 .level{grid-column:8}.skip-to [role=menuitem].skip-to-h1 .label{grid-column:2/8}.skip-to [role=menuitem].skip-to-h2 .label{grid-column:3/8}.skip-to [role=menuitem].skip-to-h3 .label{grid-column:4/8}.skip-to [role=menuitem].skip-to-h4 .label{grid-column:5/8}.skip-to [role=menuitem].skip-to-h5 .label{grid-column:6/8}.skip-to [role=menuitem].skip-to-h6 .label{grid-column:7/8}.skip-to [role=menuitem].skip-to-h1.no-level .label{grid-column:1/8}.skip-to [role=menuitem].skip-to-h2.no-level .label{grid-column:2/8}.skip-to [role=menuitem].skip-to-h3.no-level .label{grid-column:3/8}.skip-to [role=menuitem].skip-to-h4.no-level .label{grid-column:4/8}.skip-to [role=menuitem].skip-to-h5.no-level .label{grid-column:5/8}.skip-to [role=menuitem].skip-to-h6.no-level .label{grid-column:6/8}.skip-to [role=menuitem].skip-to-nesting-level-1 .nesting{grid-column:1}.skip-to [role=menuitem].skip-to-nesting-level-2 .nesting{grid-column:2}.skip-to [role=menuitem].skip-to-nesting-level-3 .nesting{grid-column:3}.skip-to [role=menuitem].skip-to-nesting-level-0 .label{grid-column:1/8}.skip-to [role=menuitem].skip-to-nesting-level-1 .label{grid-column:2/8}.skip-to [role=menuitem].skip-to-nesting-level-2 .label{grid-column:3/8}.skip-to [role=menuitem].skip-to-nesting-level-3 .label{grid-column:4/8}.skip-to [role=menuitem].action .label,.skip-to [role=menuitem].no-items .label{grid-column:1/8}.skip-to [role=separator]{margin:1px 0 1px 0;padding:3px;display:block;width:auto;font-weight:700;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:$menuTextColor;background-color:$menuBackgroundColor;color:$menuTextColor;z-index:1000}.skip-to [role=separator] .mofn{font-weight:400;font-size:85%}.skip-to [role=separator]:first-child{border-radius:5px 5px 0 0}.skip-to [role=menuitem].last{border-radius:0 0 5px 5px}.skip-to.focus{display:block}.skip-to button:focus,.skip-to button:hover{background-color:$menuBackgroundColor;color:$menuTextColor;outline:0}.skip-to button:focus{padding:6px 7px 5px 7px;border-width:0 2px 2px 2px;border-color:$focusBorderColor}.skip-to [role=menuitem]:focus{padding:1px;border-width:2px;border-style:solid;border-color:$focusBorderColor;background-color:$menuitemFocusBackgroundColor;color:$menuitemFocusTextColor;outline:0}.skip-to [role=menuitem]:focus .label,.skip-to [role=menuitem]:focus .level{background-color:$menuitemFocusBackgroundColor;color:$menuitemFocusTextColor}",isNotEmptyString:function(str){return"string"==typeof str&&str.length},isEmptyString:function(str){return"string"!=typeof str||0===str.length},init:function(config){if(!document.querySelector("style#"+this.skipToId)){var attachElement=document.body;config&&this.setUpConfig(config),"string"==typeof this.config.attachElement&&(displayOption=document.querySelector(this.config.attachElement))&&displayOption.nodeType===Node.ELEMENT_NODE&&(attachElement=displayOption),this.addCSSColors(),this.renderStyleElement(this.defaultCSS);var displayOption=this.config.containerElement.toLowerCase().trim();this.isNotEmptyString(displayOption)||(displayOption="div"),this.domNode=document.createElement(displayOption),this.domNode.classList.add("skip-to"),this.isNotEmptyString(this.config.customClass)&&this.domNode.classList.add(this.config.customClass),this.isNotEmptyString(this.config.containerRole)&&this.domNode.setAttribute("role",this.config.containerRole);displayOption=this.config.displayOption;if("string"==typeof displayOption&&(displayOption=displayOption.trim().toLowerCase()).length)switch(this.config.displayOption){case"fixed":this.domNode.classList.add("fixed");break;case"onfocus":case"popup":this.domNode.classList.add("popup")}attachElement.firstElementChild?attachElement.insertBefore(this.domNode,attachElement.firstElementChild):attachElement.appendChild(this.domNode),this.buttonNode=document.createElement("button"),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),this.renderTooltip(this.domNode,this.buttonNode),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)),this.buttonNode.addEventListener("focus",this.handleButtonFocus.bind(this)),this.buttonNode.addEventListener("blur",this.handleButtonBlur.bind(this)),this.buttonNode.addEventListener("pointerenter",this.handleButtonPointerenter.bind(this)),this.buttonNode.addEventListener("pointerout",this.handleButtonPointerout.bind(this)),this.domNode.addEventListener("focusin",this.handleFocusin.bind(this)),this.domNode.addEventListener("focusout",this.handleFocusout.bind(this)),window.addEventListener("pointerdown",this.handleBackgroundPointerdown.bind(this),!0)}},renderTooltip:function(attachNode,buttonNode){var accesskey=this.getBrowserSpecificAccesskey(this.config.accesskey),tooltip=this.config.buttonTooltip;this.isNotEmptyString(this.config.buttonTitle)&&(tooltip=this.config.buttonTitle),this.tooltipLeft=buttonNode.getBoundingClientRect().width,this.tooltipTop=buttonNode.getBoundingClientRect().height,this.tooltipNode=document.createElement("div"),this.tooltipNode.setAttribute("role","tooltip"),this.tooltipNode.id="id-skip-to-tooltip",this.tooltipNode.classList.add("skip-to-tooltip"),this.isNotEmptyString(accesskey)&&(tooltip=this.config.buttonTooltipAccesskey.replace("$key",accesskey),this.isNotEmptyString(this.config.buttonTitleWithAccesskey)&&(tooltip=this.config.buttonTitleWithAccesskey.replace("$key",accesskey))),this.isEmptyString(tooltip)?this.config.enableTooltip=!1:this.tooltipNode.textContent=tooltip,attachNode.appendChild(this.tooltipNode),this.tooltipNode.style.left=this.tooltipLeft+"px",this.tooltipNode.style.top=this.tooltipTop+"px",this.tooltipNode.classList.add("skip-to-show-tooltip"),this.tooltipHeight=this.tooltipNode.getBoundingClientRect().height,this.tooltipNode.classList.remove("skip-to-show-tooltip")},updateStyle:function(stylePlaceholder,value,defaultValue){"string"==typeof value&&0!==value.length||(value=defaultValue);for(var index1=this.defaultCSS.indexOf(stylePlaceholder),index2=index1+stylePlaceholder.length;0<=index1&&index2main
element and hidden headings+ Vel pharetra vel turpis nunc. Velit sed ullamcorper morbi tincidunt ornare. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Malesuada bibendum arcu vitae elementum. At augue eget arcu dictum varius duis at. Convallis a cras semper auctor neque vitae tempus. Nunc scelerisque viverra mauris in. Enim nulla aliquet porttitor lacus luctus. In eu mi bibendum neque egestas congue. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aliquam vestibulum morbi blandit cursus. Sagittis vitae et leo duis ut. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Ut tellus elementum sagittis vitae et leo duis ut. Orci nulla pellentesque dignissim enim sit amet venenatis urna. Netus et malesuada fames ac. Sollicitudin ac orci phasellus egestas. Ut eu sem integer vitae justo eget magna fermentum. +
+Nunc consequat interdum varius sit amet mattis. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ac felis donec et odio pellentesque diam volutpat commodo. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Nunc lobortis mattis aliquam faucibus. Sit amet porttitor eget dolor morbi non arcu risus quis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Molestie ac feugiat sed lectus vestibulum. Viverra vitae congue eu consequat ac felis donec. Tellus cras adipiscing enim eu. Aenean euismod elementum nisi quis eleifend quam. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Quis risus sed vulputate odio. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar.
+