-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md
index cfa784e6f..8039169d9 100644
--- a/ARIA/apg/patterns/alert/examples/alert.md
+++ b/ARIA/apg/patterns/alert/examples/alert.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -71,10 +71,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
index dd7c6187f..b81bfda00 100644
--- a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
+++ b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-activedescendant/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments. - Before using it for any purpose, read this to understand why. -
+ The code in this example is not intended for production environments. + Before using it for any purpose, read this to understand why.This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -315,6 +313,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -193,6 +191,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+
Assistive Technology Support
+ +JavaScript and CSS Source Code
-
@@ -217,16 +225,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
sourceCode.make();
Assistive Technology Support
- -
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
index 33ce0c3fe..e1f01f7fc 100644
--- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
+++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -67,10 +67,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md
index f8054455c..72348e514 100644
--- a/ARIA/apg/patterns/button/examples/button.md
+++ b/ARIA/apg/patterns/button/examples/button.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -241,6 +239,25 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+
Assistive Technology Support
+Command Button
+ + +Toggle Button
+ +JavaScript and CSS Source Code
@@ -267,24 +284,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');Assistive Technology Support
-Command Button
- - -Toggle Button
- -
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
index e25c41681..13b4cf1df 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -70,10 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
index 626ae7889..f54b6765e 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
index 3dae8f669..85bcf04ba 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md
index 93c127c55..cf0f81225 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/combobox/combobox-pattern.md b/ARIA/apg/patterns/combobox/combobox-pattern.md
index 120c0392c..718a5d967 100644
--- a/ARIA/apg/patterns/combobox/combobox-pattern.md
+++ b/ARIA/apg/patterns/combobox/combobox-pattern.md
@@ -63,9 +63,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
About This Pattern
- A combobox is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values. - In some implementations, the popup presents allowed values, while in other implementations, the popup presents suggested values, and users may either select one of the suggestions or type a value. + A combobox is an input widget that has an associated popup. + The popup enables users to choose a value for the input from a collection. The popup may be a listbox, grid, tree, or dialog. +
+
+ In some implementations, the popup presents allowed values, while in other implementations, the popup presents suggested values.
Many implementations also include a third optional element -- a graphical Open
button adjacent to the combobox, which indicates availability of the popup.
Activating the Open
button displays the popup if suggestions are available.
select element with size="1" is presented to assistive technologies as a combobox.
Alternatively, if a combobox supports text input, it is referred to as editable.
An editable combobox may either allow users to input any arbitrary value, or it may restrict its value to a discrete set of allowed values, in which case typing input serves to filter suggestions presented in the popup.
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
index 449591b9f..073243b0e 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
index 98a90cee9..2167b2a33 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
index 770df0e28..42bffffc0 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
index b47046bf5..21983f1c0 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-datepicker/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -74,10 +74,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
index dc25a2199..d4e3a675f 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md
index 1c728e825..b94bfbcd3 100644
--- a/ARIA/apg/patterns/combobox/examples/grid-combo.md
+++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/grid-combo/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -70,10 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
index f8aef1f54..6f560329b 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -74,10 +74,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
index 077d128d9..45c0dfd3c 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/dialog/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -69,10 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -399,6 +397,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Assistive Technology Support
+ +JavaScript and CSS Source Code
-
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
index 5497e7759..28fc032b1 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-faq/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -70,10 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
index bc6ef18db..f734da388 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
index 2131467d6..e2ee7f972 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
index 01e9e2686..5d32199ec 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md
index a2204fafb..1c9732993 100644
--- a/ARIA/apg/patterns/feed/examples/feed.md
+++ b/ARIA/apg/patterns/feed/examples/feed.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/feed/examples/feed/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -62,10 +62,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
index a7bd57b36..b1c487d31 100644
--- a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
+++ b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/advanced-data-grid/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -75,10 +75,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md
index d07dd53d0..55ae47780 100644
--- a/ARIA/apg/patterns/grid/examples/data-grids.md
+++ b/ARIA/apg/patterns/grid/examples/data-grids.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -75,10 +75,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md
index 7432c6ae6..d639fbf4e 100644
--- a/ARIA/apg/patterns/grid/examples/layout-grids.md
+++ b/ARIA/apg/patterns/grid/examples/layout-grids.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/layout-grids/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -70,10 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/link/examples/link.md b/ARIA/apg/patterns/link/examples/link.md
index 3ee0ddf7f..9b72fd7cc 100644
--- a/ARIA/apg/patterns/link/examples/link.md
+++ b/ARIA/apg/patterns/link/examples/link.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/link/examples/link/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -217,6 +215,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Assistive Technology Support
+ +JavaScript and CSS Source Code
-
@@ -253,16 +261,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Assistive Technology Support
- -
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
index be2529024..f50e10a61 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-grouped/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -70,10 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
index 965a18c6e..b4a861932 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -71,10 +71,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
index 62537d7fe..0b10a7516 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-scrollable/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -70,10 +70,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
index c50ff8903..cbacd1a64 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-de
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
index 73b9abb6d..fb3a66ec2 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
index cb903d69e..ff2c7b18d 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-links/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -406,6 +404,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+
Assistive Technology Support
+ +JavaScript and CSS Source Code
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md index 452fc2984..2d52e848a 100644 --- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md +++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-editor/ sidebar: true -footer: " " +footer: " " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -69,10 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
index 05d600ca7..aeb3ea679 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-navigation/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md
index 6081ed487..75b3a65f7 100644
--- a/ARIA/apg/patterns/meter/examples/meter.md
+++ b/ARIA/apg/patterns/meter/examples/meter.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/meter/examples/meter/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -74,10 +74,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
index 8a1b82432..016248f72 100644
--- a/ARIA/apg/patterns/patterns.md
+++ b/ARIA/apg/patterns/patterns.md
@@ -154,7 +154,7 @@ lang: en
- A combobox is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values.
+ A combobox is an input widget that has an associated popup.
Assistive Technology Support
+ +JavaScript and CSS Source Code
-
@@ -334,16 +342,6 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Assistive Technology Support
- -
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/radio/examples/radio.md b/ARIA/apg/patterns/radio/examples/radio.md
index 0322ab7ea..248203a46 100644
--- a/ARIA/apg/patterns/radio/examples/radio.md
+++ b/ARIA/apg/patterns/radio/examples/radio.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
index e6f81191d..73936cefe 100644
--- a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
+++ b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -71,10 +71,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index f7ba32611..866711104 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -69,10 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -363,6 +361,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+
Assistive Technology Support
+ +JavaScript and CSS Source Code
-
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index bae6a15cb..980963aeb 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -69,10 +69,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index 5213931ae..b61de03bb 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 0dd1740da..951c8367d 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
index 968ab02a5..11ec44cff 100644
--- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
+++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -75,10 +75,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/switch/examples/switch-button.md b/ARIA/apg/patterns/switch/examples/switch-button.md
index 9fb6dd5ab..2693487d4 100644
--- a/ARIA/apg/patterns/switch/examples/switch-button.md
+++ b/ARIA/apg/patterns/switch/examples/switch-button.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-button/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/switch/examples/switch-checkbox.md b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
index 4e4cc7455..549f1860e 100644
--- a/ARIA/apg/patterns/switch/examples/switch-checkbox.md
+++ b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-checkbox/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
@@ -173,7 +171,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels.
- When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
+ When an element loses focus, its border changes from two pixels to zero and padding is increased by two pixels.
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/table/examples/sortable-table.md b/ARIA/apg/patterns/table/examples/sortable-table.md
index fbfb3dcd0..80a76b64e 100644
--- a/ARIA/apg/patterns/table/examples/sortable-table.md
+++ b/ARIA/apg/patterns/table/examples/sortable-table.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/sortable-table/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/table/examples/table.md b/ARIA/apg/patterns/table/examples/table.md
index 4c3694730..b900b45ac 100644
--- a/ARIA/apg/patterns/table/examples/table.md
+++ b/ARIA/apg/patterns/table/examples/table.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/table/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -67,10 +67,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
index de0afdcc8..7ae364a20 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-automatic/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-manual.md b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
index af7a417e9..42362eb55 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-manual.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-manual/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/toolbar/examples/toolbar.md b/ARIA/apg/patterns/toolbar/examples/toolbar.md
index 49d62e41e..ac9f21a14 100644
--- a/ARIA/apg/patterns/toolbar/examples/toolbar.md
+++ b/ARIA/apg/patterns/toolbar/examples/toolbar.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/toolbar/examples/toolbar/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -83,10 +83,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
index 744aefdc2..724960086 100644
--- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
+++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treegrid/examples/treegrid-1/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -92,10 +92,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1a.md b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
index 8f27027ac..0ee26329c 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1a.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1a/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -77,10 +77,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1b.md b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
index 983f2f7ce..3a845bcc3 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1b.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1b/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -77,10 +77,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
index 9281e5c27..7ca3776fc 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-navigation/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -68,10 +68,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/ARIA/apg/shared/templates/example-usage-warning.html b/ARIA/apg/shared/templates/example-usage-warning.html
index e081775b8..3d5b202ab 100644
--- a/ARIA/apg/shared/templates/example-usage-warning.html
+++ b/ARIA/apg/shared/templates/example-usage-warning.html
@@ -5,10 +5,8 @@
-
- The code in this example is not intended for production environments.
- Before using it for any purpose, read this to understand why.
-
+ The code in this example is not intended for production environments.
+ Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
-
diff --git a/_external/aria-practices b/_external/aria-practices
index 3952625fc..d6cf9d8db 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 3952625fc459ac53f735b9395b01fe48de1e381c
+Subproject commit d6cf9d8db772603a456e7d7ef52e409d39124301
diff --git a/_external/data b/_external/data
index 894dca0e8..3e2c9fde3 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 894dca0e8b4f6d90d622fbb87e356b9e6713042f
+Subproject commit 3e2c9fde38da2f50b1613a45a76bb0c03e463020
diff --git a/content-assets/wai-aria-practices/patterns/checkbox/examples/js/checkbox-mixed.js b/content-assets/wai-aria-practices/patterns/checkbox/examples/js/checkbox-mixed.js
index 278c92f1d..bf1cf80af 100644
--- a/content-assets/wai-aria-practices/patterns/checkbox/examples/js/checkbox-mixed.js
+++ b/content-assets/wai-aria-practices/patterns/checkbox/examples/js/checkbox-mixed.js
@@ -16,6 +16,7 @@ class CheckboxMixed {
this.checkboxNodes = domNode.querySelectorAll('input[type="checkbox"]');
this.mixedNode.addEventListener('keydown', this.onMixedKeydown.bind(this));
+ this.mixedNode.addEventListener('keyup', this.onMixedKeyup.bind(this));
this.mixedNode.addEventListener('click', this.onMixedClick.bind(this));
this.mixedNode.addEventListener('focus', this.onMixedFocus.bind(this));
this.mixedNode.addEventListener('blur', this.onMixedBlur.bind(this));
@@ -116,23 +117,23 @@ class CheckboxMixed {
/* EVENT HANDLERS */
+ // Prevent page scrolling on space down
onMixedKeydown(event) {
- var flag = false;
+ if (event.key === ' ') {
+ event.preventDefault();
+ }
+ }
+ onMixedKeyup(event) {
switch (event.key) {
case ' ':
this.toggleMixed();
- flag = true;
+ event.stopPropagation();
break;
default:
break;
}
-
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
}
onMixedClick() {
diff --git a/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css b/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css
index 64a44dfa4..4229c7d03 100644
--- a/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css
+++ b/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css
@@ -79,3 +79,48 @@ body {
padding: 10px;
width: 100%;
}
+
+.restaurant-rating svg g {
+ color: #ffde00;
+}
+
+.restaurant-rating svg .star {
+ stroke-width: 2px;
+ stroke: #f8951d;
+ fill-opacity: 0;
+}
+
+.restaurant-rating[data-rating-value="1"] svg .star-1 .star {
+ fill: currentcolor;
+ fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="2"] svg .star-2 .star {
+ fill: currentcolor;
+ fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="3"] svg .star-3 .star {
+ fill: currentcolor;
+ fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="4"] svg .star-4 .star {
+ fill: currentcolor;
+ fill-opacity: 1;
+}
+
+.restaurant-rating[data-rating-value="5"] svg .star-5 .star {
+ fill: currentcolor;
+ fill-opacity: 1;
+}
+
+@media (forced-colors: active) {
+ .restaurant-rating svg g {
+ color: currentcolor;
+ }
+
+ .restaurant-rating svg .star {
+ stroke: currentcolor;
+ }
+}
diff --git a/content-assets/wai-aria-practices/patterns/feed/examples/js/feedDisplay.js b/content-assets/wai-aria-practices/patterns/feed/examples/js/feedDisplay.js
index 0aad976a7..fa7f90ded 100644
--- a/content-assets/wai-aria-practices/patterns/feed/examples/js/feedDisplay.js
+++ b/content-assets/wai-aria-practices/patterns/feed/examples/js/feedDisplay.js
@@ -207,18 +207,40 @@ aria.FeedDisplay.prototype.renderItemData = function (itemData) {
'';
if (itemData.rating) {
+ const starText = `${itemData.rating} ${
+ itemData.rating === 1 ? 'star' : 'stars'
+ }`;
var ratingID = 'restaurant-rating-' + this.feedSize;
itemContent +=
'
' +
- '![]()
' +
+ '">' +
+ '' +
'
';
describedbyIDs.push(ratingID);
}
diff --git a/content-assets/wai-aria-practices/patterns/landmarks/examples/css/common.css b/content-assets/wai-aria-practices/patterns/landmarks/examples/css/common.css
index 152240bf6..25463cbe7 100644
--- a/content-assets/wai-aria-practices/patterns/landmarks/examples/css/common.css
+++ b/content-assets/wai-aria-practices/patterns/landmarks/examples/css/common.css
@@ -119,10 +119,6 @@ main .code {
padding: 1em;
}
-main .nav-tabs > li > a {
- background-color: #eee;
-}
-
nav {
margin: 0;
margin-bottom: 1em;
@@ -138,7 +134,6 @@ aside {
padding: 0.5em;
margin-top: 0.5em;
margin-bottom: 1em;
- background-color: #f4f4f4;
margin-right: 12em;
width: 100%;
border-radius: 6px;
diff --git a/content-assets/wai-aria-practices/shared/js/skipto.js b/content-assets/wai-aria-practices/shared/js/skipto.js
index 71c3f9892..29134ff41 100644
--- a/content-assets/wai-aria-practices/shared/js/skipto.js
+++ b/content-assets/wai-aria-practices/shared/js/skipto.js
@@ -1,2749 +1,2773 @@
-/* ========================================================================
- * Version: 5.1.3
- * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
- * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
- * All rights reserved.
- * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
- * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors may be used to endorse or promote products derived from this software without specific prior written permission.
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *
- * Documentation: https://skipto-landmarks-headings.github.io/page-script-5
- * Code: https://github.com/skipto-landmarks-headings/page-script-5
- * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
- * ======================================================================== */
-
-(function () {
- 'use strict';
-
- /*
- * debug.js
- *
- * Usage
- * import DebugLogging from './debug.js';
- * const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
- * ...
- * if (debug.flag) debug.log('myMessage');
- *
- * Notes
- * new DebugLogging() - calling the constructor with no arguments results
- * in debug.flag set to false and debug.label set to 'debug';
- * constructor accepts 0, 1 or 2 arguments in any order
- * @param flag [optional] {boolean} - sets debug.flag
- * @param label [optional] {string} - sets debug.label
- * Properties
- * debug.flag {boolean} allows you to switch debug logging on or off;
- * default value is false
- * debug.label {string} rendered as a prefix to each log message;
- * default value is 'debug'
- * Methods
- * debug.log calls console.log with label prefix and message
- * @param message {object} - console.log calls toString()
- * @param spaceAbove [optional] {boolean}
- *
- * debug.tag outputs tagName and textContent of DOM element
- * @param node {DOM node reference} - usually an HTMLElement
- * @param spaceAbove [optional] {boolean}
- *
- * debug.separator outputs only debug.label and a series of hyphens
- * @param spaceAbove [optional] {boolean}
- */
-
- class DebugLogging {
- constructor (...args) {
- // Default values for cases where fewer than two arguments are provided
- this._flag = false;
- this._label = 'debug';
-
- // The constructor may be called with zero, one or two arguments. If two
- // arguments, they can be in any order: one is assumed to be the boolean
- // value for '_flag' and the other one the string value for '_label'.
- for (const [index, arg] of args.entries()) {
- if (index < 2) {
- switch (typeof arg) {
- case 'boolean':
- this._flag = arg;
- break;
- case 'string':
- this._label = arg;
- break;
- }
- }
- }
- }
-
- get flag () { return this._flag; }
-
- set flag (value) {
- if (typeof value === 'boolean') {
- this._flag = value;
- }
- }
-
- get label () { return this._label; }
-
- set label (value) {
- if (typeof value === 'string') {
- this._label = value;
- }
- }
-
- log (message, spaceAbove) {
- const newline = spaceAbove ? '\n' : '';
- console.log(`${newline}[${this._label}] ${message}`);
- }
-
- tag (node, spaceAbove) {
- if (node && node.tagName) {
- const text = node.textContent.trim().replace(/\s+/g, ' ');
- this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
- }
- }
-
- separator (spaceAbove) {
- this.log('-----------------------------', spaceAbove);
- }
-
- }
-
- /* style.js */
-
- /* Constants */
- const debug$5 = new DebugLogging('style', false);
- debug$5.flag = false;
-
- const styleTemplate = document.createElement('template');
- styleTemplate.innerHTML = `
-
-`;
-
- /*
- * @function getTheme
- *
- * @desc Returns
- *
- * @param {Object} colorThemes - Javascript object with keyed color themes
- * @param {String} colorTheme - A string identifying a color theme
- *
- * @returns {Object} see @desc
- */
- function getTheme(colorThemes, colorTheme) {
- if (typeof colorThemes[colorTheme] === 'object') {
- return colorThemes[colorTheme];
- }
- // if no theme defined, use urlSelectors
- let hostnameMatch = '';
- let pathnameMatch = '';
- let hostandpathnameMatch = '';
-
- const locationURL = new URL(location.href);
- const hostname = locationURL.hostname;
- const pathname = location.pathname;
-
- for (let item in colorThemes) {
- const hostnameSelector = colorThemes[item].hostnameSelector;
- const pathnameSelector = colorThemes[item].pathnameSelector;
- let hostnameFlag = false;
- let pathnameFlag = false;
-
-
- if (hostnameSelector) {
- if (hostname.indexOf(hostnameSelector) >= 0) {
- if (!hostnameMatch ||
- (colorThemes[hostnameMatch].hostnameSelector.length < hostnameSelector.length)) {
- hostnameMatch = item;
- hostnameFlag = true;
- pathnameMatch = '';
- }
- else {
- // if the same hostname is used in another theme, set the hostnameFlas in case the pathname
- // matches
- if (colorThemes[hostnameMatch].hostnameSelector.length === hostnameSelector.length) {
- hostnameFlag = true;
- }
- }
- }
- }
-
- if (pathnameSelector) {
- if (pathname.indexOf(pathnameSelector) >= 0) {
- if (!pathnameMatch ||
- (colorThemes[pathnameMatch].pathnameSelector.length < pathnameSelector.length)) {
- pathnameMatch = item;
- pathnameFlag = true;
- }
- }
- }
-
- if (hostnameFlag && pathnameFlag) {
- hostandpathnameMatch = item;
- }
- }
-
- if (hostandpathnameMatch) {
- return colorThemes[hostandpathnameMatch];
- }
- else {
- if (hostnameMatch) {
- return colorThemes[hostnameMatch];
- } else {
- if (pathnameMatch) {
- return colorThemes[pathnameMatch];
- }
- }
- }
-
- // if no other theme is found use default theme
- return colorThemes['default'];
- }
-
- /*
- * @function updateStyle
- *
- * @desc
- *
- * @param
- *
- * @returns
- */
- function updateStyle(stylePlaceholder, configValue, themeValue, defaultValue) {
- let value = defaultValue;
- if (typeof configValue === 'string' && configValue) {
- value = configValue;
- } else {
- if (typeof themeValue === 'string' && themeValue) {
- value = themeValue;
- }
- }
-
- let cssContent = styleTemplate.innerHTML;
- let index1 = cssContent.indexOf(stylePlaceholder);
- let index2 = index1 + stylePlaceholder.length;
- while (index1 >= 0 && index2 < cssContent.length) {
- cssContent = cssContent.substring(0, index1) + value + cssContent.substring(index2);
- index1 = cssContent.indexOf(stylePlaceholder, index2);
- index2 = index1 + stylePlaceholder.length;
- }
- styleTemplate.innerHTML = cssContent;
- }
-
- /*
- * @function addCSSColors
- *
- * @desc Updates the styling information in the attached
- * stylesheet to use the configured or default colors
- *
- * @param {Object} colorThemes - Object with theme information
- * @param {Object} config - Configuration information object
- */
- function addCSSColors (colorThemes, config) {
- const theme = getTheme(colorThemes, config.colorTheme);
- const defaultTheme = getTheme(colorThemes, 'default');
-
- // Check for display option in theme
- if ((typeof theme.displayOption === 'string') &&
- ('fixed popup static'.indexOf(theme.displayOption.toLowerCase())>= 0)) {
- config.displayOption = theme.displayOption;
- }
-
- updateStyle('$fontFamily', config.fontFamily, theme.fontFamily, defaultTheme.fontFamily);
- updateStyle('$fontSize', config.fontSize, theme.fontSize, defaultTheme.fontSize);
-
- updateStyle('$positionLeft', config.positionLeft, theme.positionLeft, defaultTheme.positionLeft);
- updateStyle('$mediaBreakPoint', config.mediaBreakPoint, theme.mediaBreakPoint, defaultTheme.mediaBreakPoint);
-
- updateStyle('$menuTextColor', config.menuTextColor, theme.menuTextColor, defaultTheme.menuTextColor);
- updateStyle('$menuBackgroundColor', config.menuBackgroundColor, theme.menuBackgroundColor, defaultTheme.menuBackgroundColor);
-
- updateStyle('$menuitemFocusTextColor', config.menuitemFocusTextColor, theme.menuitemFocusTextColor, defaultTheme.menuitemFocusTextColor);
- updateStyle('$menuitemFocusBackgroundColor', config.menuitemFocusBackgroundColor, theme.menuitemFocusBackgroundColor, defaultTheme.menuitemFocusBackgroundColor);
-
- updateStyle('$focusBorderColor', config.focusBorderColor, theme.focusBorderColor, defaultTheme.focusBorderColor);
-
- updateStyle('$buttonTextColor', config.buttonTextColor, theme.buttonTextColor, defaultTheme.buttonTextColor);
- updateStyle('$buttonBackgroundColor', config.buttonBackgroundColor, theme.buttonBackgroundColor, defaultTheme.buttonBackgroundColor);
-
- updateStyle('$zIndex', config.zIndex, theme.zIndex, defaultTheme.zIndex);
-
- }
-
- /*
- * @function enderStyleElement
- *
- * @desc Updates the style sheet template and then attaches it to the document
- *
- * @param {Object} colorThemes - Object with theme information
- * @param {Object} config - Configuration information object
- * @param {String} skipYToStyleId - Id used for the skipto container element
- */
- function renderStyleElement (colorThemes, config, skipToId) {
- styleTemplate.innerHTML = styleTemplate.innerHTML.replaceAll('$skipToId', '#' + skipToId);
- addCSSColors(colorThemes, config);
- const styleNode = styleTemplate.content.cloneNode(true);
- const headNode = document.getElementsByTagName('head')[0];
- headNode.appendChild(styleNode);
- }
-
- /* utils.js */
-
- /* Constants */
- const debug$4 = new DebugLogging('Utils', false);
- debug$4.flag = false;
-
-
- /*
- * @function getAttributeValue
- *
- * @desc Return attribute value if present on element,
- * otherwise return empty string.
- *
- * @returns {String} see @desc
- */
- function getAttributeValue (element, attribute) {
- let value = element.getAttribute(attribute);
- return (value === null) ? '' : normalize(value);
- }
-
- /*
- * @function normalize
- *
- * @desc Trim leading and trailing whitespace and condense all
- * internal sequences of whitespace to a single space. Adapted from
- * Mozilla documentation on String.prototype.trim polyfill. Handles
- * BOM and NBSP characters.
- *
- * @return {String} see @desc
- */
- function normalize (s) {
- let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
- return s.replace(rtrim, '').replace(/\s+/g, ' ');
- }
-
- /**
- * @fuction isNotEmptyString
- *
- * @desc Returns true if the string has content, otherwise false
- *
- * @param {Boolean} see @desc
- */
- function isNotEmptyString (str) {
- return (typeof str === 'string') && str.length && str.trim() && str !== " ";
- }
-
- /**
- * @fuction isVisible
- *
- * @desc Returns true if the element is visible in the graphical rendering
- *
- * @param {node} elem - DOM element node of a labelable element
- */
- function isVisible (element) {
-
- function isDisplayNone(el) {
- if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
- return false;
- }
-
- if (el.hasAttribute('hidden')) {
- return true;
- }
-
- const style = window.getComputedStyle(el, null);
- const display = style.getPropertyValue("display");
- if (display === 'none') {
- return true;
- }
-
- // check ancestors for display none
- if (el.parentNode) {
- return isDisplayNone(el.parentNode);
- }
-
- return false;
- }
-
- const computedStyle = window.getComputedStyle(element);
- let visibility = computedStyle.getPropertyValue('visibility');
- if ((visibility === 'hidden') || (visibility === 'collapse')) {
- return false;
- }
-
- return !isDisplayNone(element);
- }
-
- /*
- * namefrom.js
- */
-
- /* constants */
-
- const debug$3 = new DebugLogging('nameFrom', false);
- debug$3.flag = false;
-
- //
- // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
-
- /*
- * @function isDisplayNone
- *
- * @desc Returns true if the element or parent element has set the CSS
- * display property to none or has the hidden attribute,
- * otherwise false
- *
- * @param {Object} node - a DOM node
- *
- * @returns {Boolean} see @desc
- */
-
- function isDisplayNone (node) {
-
- if (!node) {
- return false;
- }
-
- if (node.nodeType === Node.TEXT_NODE) {
- node = node.parentNode;
- }
-
- if (node.nodeType === Node.ELEMENT_NODE) {
-
- if (node.hasAttribute('hidden')) {
- return true;
- }
-
- // aria-hidden attribute with the value "true" is an same as
- // setting the hidden attribute for name calcuation
- if (node.hasAttribute('aria-hidden')) {
- if (node.getAttribute('aria-hidden').toLowerCase() === 'true') {
- return true;
- }
- }
-
- const style = window.getComputedStyle(node, null);
-
- const display = style.getPropertyValue("display");
-
- if (display) {
- return display === 'none';
- }
- }
- return false;
- }
-
- /*
- * @function isVisibilityHidden
- *
- * @desc Returns true if the node (or it's parrent) has the CSS visibility
- * property set to "hidden" or "collapse", otherwise false
- *
- * @param {Object} node - DOM node
- *
- * @return see @desc
- */
-
- function isVisibilityHidden(node) {
-
- if (!node) {
- return false;
- }
-
- if (node.nodeType === Node.TEXT_NODE) {
- node = node.parentNode;
- }
-
- if (node.nodeType === Node.ELEMENT_NODE) {
- const style = window.getComputedStyle(node, null);
-
- const visibility = style.getPropertyValue("visibility");
- if (visibility) {
- return (visibility === 'hidden') || (visibility === 'collapse');
- }
- }
- return false;
- }
-
- /*
- * @function isAriaHiddenFalse
- *
- * @desc Returns true if the node has the aria-hidden property set to
- * "false", otherwise false.
- * NOTE: This function is important in the accessible namce
- * calculation, since content hidden with a CSS technique
- * can be included in the accessible name calculation when
- * aria-hidden is set to false
- *
- * @param {Object} node - DOM node
- *
- * @return see @desc
- */
-
- function isAriaHIddenFalse(node) {
-
- if (!node) {
- return false;
- }
-
- if (node.nodeType === Node.TEXT_NODE) {
- node = node.parentNode;
- }
-
- if (node.nodeType === Node.ELEMENT_NODE) {
- return (node.hasAttribute('aria-hidden') &&
- (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
- }
-
- return false;
- }
-
- /*
- * @function includeContentInName
- *
- * @desc Checks the CSS display and hidden properties, and
- * the aria-hidden property to see if the content
- * should be included in the accessible name
- * calculation. Returns true if it should be
- * included, otherwise false
- *
- * @param {Object} node - DOM node
- *
- * @return see @desc
- */
-
- function includeContentInName(node) {
- const flag = isAriaHIddenFalse(node) ||
- (!isVisibilityHidden(node) &&
- !isDisplayNone(node));
- return flag;
- }
-
- /*
- * @function getNodeContents
- *
- * @desc Recursively process element and text nodes by aggregating
- * their text values for an ARIA accessible name or description
- * calculation.
- *
- * NOTE: This includes special handling of elements with 'alt'
- * text and embedded controls.
- *
- * @param {Object} node - A DOM node
- *
- * @return {String} The text content for an accessible name or description
- */
- function getNodeContents (node) {
- let contents = '';
- let nc;
- let arr = [];
-
- switch (node.nodeType) {
- case Node.ELEMENT_NODE:
- // If aria-label is present, node recursion stops and
- // aria-label value is returned
- if (node.hasAttribute('aria-label')) {
- if (includeContentInName(node)) {
- contents = node.getAttribute('aria-label');
- }
- }
- else {
- if (node instanceof HTMLSlotElement) {
- // if no slotted elements, check for default slotted content
- const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
- assignedNodes.forEach( assignedNode => {
- nc = getNodeContents(assignedNode);
- if (nc.length) arr.push(nc);
- });
- contents = (arr.length) ? arr.join(' ') : '';
- } else {
- if (couldHaveAltText(node) && includeContentInName(node)) {
- contents = getAttributeValue(node, 'alt');
- }
- else {
- if (node.hasChildNodes()) {
- let children = Array.from(node.childNodes);
- children.forEach( child => {
- nc = getNodeContents(child);
- if (nc.length) arr.push(nc);
- });
- contents = (arr.length) ? arr.join(' ') : '';
- }
- }
- // For all branches of the ELEMENT_NODE case...
- }
- }
- contents = addCssGeneratedContent(node, contents);
- break;
-
- case Node.TEXT_NODE:
- if (includeContentInName(node)) {
- contents = normalize(node.textContent);
- }
- break;
- }
-
- return contents;
- }
-
- /*
- * @function couldHaveAltText
- *
- * @desc Based on HTML5 specification, returns true if
- * the element could have an 'alt' attribute,
- * otherwise false.
- *
- * @param {Object} element - DOM eleemnt node
- *
- * @return {Boolean} see @desc
- */
- function couldHaveAltText (element) {
- let tagName = element.tagName.toLowerCase();
-
- switch (tagName) {
- case 'img':
- case 'area':
- return true;
- case 'input':
- return (element.type && element.type === 'image');
- }
-
- return false;
- }
-
- /*
- * @function addCssGeneratedContent
- *
- * @desc Adds CSS-generated content for pseudo-elements
- * :before and :after. According to the CSS spec, test that content
- * value is other than the default computed value of 'none'.
- *
- * Note: Even if an author specifies content: 'none', because browsers
- * add the double-quote character to the beginning and end of
- * computed string values, the result cannot and will not be
- * equal to 'none'.
- *
- * @param {Object} element - DOM node element
- * @param {String} contents - Text content for DOM node
- *
- * @returns {String} see @desc
- *
- */
- function addCssGeneratedContent (element, contents) {
-
- let result = contents,
- prefix = getComputedStyle(element, ':before').content,
- suffix = getComputedStyle(element, ':after').content;
-
- if (prefix !== 'none') {
- result = prefix.replaceAll('"', '') + result;
- }
- if (suffix !== 'none') {
- result = result + suffix.replaceAll('"', '');
- }
-
- return result;
- }
-
- /* accName.js */
-
- /* Constants */
- const debug$2 = new DebugLogging('accName', false);
- debug$2.flag = false;
-
- /**
- * @fuction getAccessibleName
- *
- * @desc Returns the accessible name for an heading or landamrk
- *
- * @paramn {Object} dom - Document of the current element
- * @param {node} element - DOM element node for either a heading or
- * landmark
- * @param {Boolean} fromContent - if true will compute name from content
- *
- * @return {String} The accessible name for the landmark or heading element
- */
-
- function getAccessibleName (doc, element, fromContent=false) {
- let accName = '';
-
- accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
-
- if (accName === '' && element.hasAttribute('aria-label')) {
- accName = element.getAttribute('aria-label').trim();
- }
-
- if (accName === '' && fromContent) {
- accName = getNodeContents(element);
- }
-
- if (accName === '' && element.title.trim() !== '') {
- accName = element.title.trim();
- }
-
- return accName;
- }
-
- /*
- * @function nameFromAttributeIdRefs
- *
- * @desc Get the value of attrName on element (a space-
- * separated list of IDREFs), visit each referenced element in the order it
- * appears in the list and obtain its accessible name (skipping recursive
- * aria-labelledby or aria-describedby calculations), and return an object
- * with name property set to a string that is a space-separated concatena-
- * tion of those results if any, otherwise return empty string.
- *
- * @param {Object} doc - Browser document object
- * @param {Object} element - DOM element node
- * @param {String} attribute - Attribute name (e.g. "aria-labelledby", "aria-describedby",
- * or "aria-errormessage")
- *
- * @returns {String} see @desc
- */
- function nameFromAttributeIdRefs (doc, element, attribute) {
- const value = getAttributeValue(element, attribute);
- const arr = [];
-
- if (value.length) {
- const idRefs = value.split(' ');
-
- for (let i = 0; i < idRefs.length; i++) {
- const refElement = doc.getElementById(idRefs[i]);
- if (refElement) {
- const accName = getNodeContents(refElement);
- if (accName && accName.length) arr.push(accName);
- }
- }
- }
-
- if (arr.length) {
- return arr.join(' ');
- }
-
- return '';
- }
-
- /* landmarksHeadings.js */
-
- /* Constants */
- const debug$1 = new DebugLogging('landmarksHeadings', false);
- debug$1.flag = false;
-
- const skipableElements = [
- 'base',
- 'content',
- 'frame',
- 'iframe',
- 'input[type=hidden]',
- 'link',
- 'meta',
- 'noscript',
- 'script',
- 'style',
- 'template',
- 'shadow',
- 'title'
- ];
-
- const allowedLandmarkSelectors = [
- 'banner',
- 'complementary',
- 'contentinfo',
- 'form',
- 'main',
- 'navigation',
- 'region',
- 'search'
- ];
-
- const higherLevelElements = [
- 'article',
- 'aside',
- 'footer',
- 'header',
- 'main',
- 'nav',
- 'region',
- 'section'
- ];
-
-
- let idIndex = 0;
-
- /*
- * @function getSkipToIdIndex
- *
- * @desc Returns the current skipto index used for generating
- * id for target elements
- *
- * @returns {Number} see @desc
- */
- function getSkipToIdIndex () {
- return idIndex;
- }
-
- /*
- * @function incSkipToIdIndex
- *
- * @desc Adds one to the skipto index
- */
- function incSkipToIdIndex () {
- idIndex += 1;
- }
-
- /*
- * @function isSkipableElement
- *
- * @desc Returns true if the element is skipable, otherwise false
- *
- * @param {Object} element - DOM element node
- *
- * @returns {Boolean} see @desc
- */
- function isSkipableElement(element) {
- const tagName = element.tagName.toLowerCase();
- const type = element.hasAttribute('type') ? element.getAttribute('type') : '';
- const elemSelector = (tagName === 'input') && type.length ?
- `${tagName}[type=${type}]` :
- tagName;
- return skipableElements.includes(elemSelector);
- }
-
- /*
- * @function isCustomElement
- *
- * @desc Reuturns true if the element is a custom element, otherwise
- * false
- *
- * @param {Object} element - DOM element node
- *
- * @returns {Boolean} see @desc
- */
- function isCustomElement(element) {
- return element.tagName.indexOf('-') >= 0;
- }
-
- /*
- * @function sSlotElement
- *
- * @desc Reuturns true if the element is a slot element, otherwise
- * false
- *
- * @param {Object} element - DOM element node
- *
- * @returns {Boolean} see @desc
- */
- function isSlotElement(node) {
- return (node instanceof HTMLSlotElement);
- }
-
- /**
- * @function isTopLevel
- *
- * @desc Tests the node to see if it is in the content of any other
- * elements with default landmark roles or is the descendant
- * of an element with a defined landmark role
- *
- * @param {Object} node - Element node from a berowser DOM
- *
- * @reutrn {Boolean} Returns true if top level landmark, otherwise false
- */
-
- function isTopLevel (node) {
- node = node && node.parentNode;
- while (node && (node.nodeType === Node.ELEMENT_NODE)) {
- const tagName = node.tagName.toLowerCase();
- let role = node.getAttribute('role');
- if (role) {
- role = role.toLowerCase();
- }
-
- if (higherLevelElements.includes(tagName) ||
- allowedLandmarkSelectors.includes(role)) {
- return false;
- }
- node = node.parentNode;
- }
- return true;
- }
-
- /*
- * @function checkForLandmark
- *
- * @desc Re=trns the lamdnark name if a landmark, otherwise an
- * empty string
- *
- * @param {Object} element - DOM element node
- *
- * @returns {String} see @desc
- */
- function checkForLandmark (element) {
- if (element.hasAttribute('role')) {
- const role = element.getAttribute('role').toLowerCase();
- if (allowedLandmarkSelectors.indexOf(role) >= 0) {
- return role;
- }
- } else {
- const tagName = element.tagName.toLowerCase();
-
- switch (tagName) {
- case 'aside':
- return 'complementary';
-
- case 'main':
- return 'main';
-
- case 'nav':
- return 'navigation';
-
- case 'header':
- if (isTopLevel(element)) {
- return 'banner';
- }
- break;
-
- case 'footer':
- if (isTopLevel(element)) {
- return 'contentinfo';
- }
- break;
-
- case 'section':
- // Sections need an accessible name for be considered a "region" landmark
- if (element.hasAttribute('aria-label') || element.hasAttribute('aria-labelledby')) {
- return 'region';
- }
- break;
- }
- }
- return '';
- }
-
-
- /**
- * @function queryDOMForSkipToId
- *
- * @desc Returns DOM node associated with the id, if id not found returns null
- *
- * @param {String} targetId - dom node element to attach button and menu
- *
- * @returns (Object) @desc
- */
- function queryDOMForSkipToId (targetId) {
- function transverseDOMForSkipToId(startingNode) {
- var targetNode = null;
- for (let node = startingNode.firstChild; node !== null; node = node.nextSibling ) {
- if (node.nodeType === Node.ELEMENT_NODE) {
- if (node.getAttribute('data-skip-to-id') === targetId) {
- return node;
- }
- if (!isSkipableElement(node)) {
- // check for slotted content
- if (isSlotElement(node)) {
- // if no slotted elements, check for default slotted content
- const assignedNodes = node.assignedNodes().length ?
- node.assignedNodes() :
- node.assignedNodes({ flatten: true });
- for (let i = 0; i < assignedNodes.length; i += 1) {
- const assignedNode = assignedNodes[i];
- if (assignedNode.nodeType === Node.ELEMENT_NODE) {
- if (assignedNode.getAttribute('data-skip-to-id') === targetId) {
- return assignedNode;
- }
- targetNode = transverseDOMForSkipToId(assignedNode);
- if (targetNode) {
- return targetNode;
- }
- }
- }
- } else {
- // check for custom elements
- if (isCustomElement(node)) {
- if (node.shadowRoot) {
- targetNode = transverseDOMForSkipToId(node.shadowRoot);
- if (targetNode) {
- return targetNode;
- }
- }
- } else {
- targetNode = transverseDOMForSkipToId(node);
- if (targetNode) {
- return targetNode;
- }
- }
- }
- }
- } // end if
- } // end for
- return false;
- } // end function
- return transverseDOMForSkipToId(document.body);
- }
-
- /**
- * @function findVisibleElement
- *
- * @desc Returns the first isible decsendant DOM node that matches a set of element tag names
- *
- * @param {node} startingNode - dom node to start search for element
- * @param {Array} tagNames - Array of tag names
- *
- * @returns (node} Returns first descendmt element, if not found returns false
- */
- function findVisibleElement (startingNode, tagNames) {
-
- function transverseDOMForVisibleElement(startingNode, targetTagName) {
- var targetNode = null;
- for (let node = startingNode.firstChild; node !== null; node = node.nextSibling ) {
- if (node.nodeType === Node.ELEMENT_NODE) {
- if (!isSkipableElement(node)) {
- // check for slotted content
- if (isSlotElement(node)) {
- // if no slotted elements, check for default slotted content
- const assignedNodes = node.assignedNodes().length ?
- node.assignedNodes() :
- node.assignedNodes({ flatten: true });
- for (let i = 0; i < assignedNodes.length; i += 1) {
- const assignedNode = assignedNodes[i];
- if (assignedNode.nodeType === Node.ELEMENT_NODE) {
- const tagName = assignedNode.tagName.toLowerCase();
- if (tagName === targetTagName){
- if (isVisible(assignedNode)) {
- return assignedNode;
- }
- }
- targetNode = transverseDOMForVisibleElement(assignedNode, targetTagName);
- if (targetNode) {
- return targetNode;
- }
- }
- }
- } else {
- // check for custom elements
- if (isCustomElement(node)) {
- if (node.shadowRoot) {
- targetNode = transverseDOMForVisibleElement(node.shadowRoot, targetTagName);
- if (targetNode) {
- return targetNode;
- }
- }
- } else {
- const tagName = node.tagName.toLowerCase();
- if (tagName === targetTagName){
- if (isVisible(node)) {
- return node;
- }
- }
- targetNode = transverseDOMForVisibleElement(node, targetTagName);
- if (targetNode) {
- return targetNode;
- }
- }
- }
- }
- } // end if
- } // end for
- return false;
- } // end function
- let targetNode = false;
-
- // Go through the tag names one at a time
- for (let i = 0; i < tagNames.length; i += 1) {
- targetNode = transverseDOMForVisibleElement(startingNode, tagNames[i]);
- if (targetNode) {
- break;
- }
- }
- return targetNode ? targetNode : startingNode;
- }
-
- /*
- * @function skipToElement
- *
- * @desc Moves focus to the element identified by the memu item
- *
- * @param {Object} menutim - DOM element in the menu identifying the target element.
- */
- function skipToElement(menuitem) {
-
- let focusNode = false;
- let scrollNode = false;
- let elem;
-
- const searchSelectors = ['input', 'button', 'a'];
- const navigationSelectors = ['a', 'input', 'button'];
- const landmarkSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'section', 'article', 'p', 'li', 'a'];
-
- const isLandmark = menuitem.classList.contains('landmark');
- const isSearch = menuitem.classList.contains('skip-to-search');
- const isNav = menuitem.classList.contains('skip-to-nav');
-
- elem = queryDOMForSkipToId(menuitem.getAttribute('data-id'));
-
- if (elem) {
- if (isSearch) {
- focusNode = findVisibleElement(elem, searchSelectors);
- }
- if (isNav) {
- focusNode = findVisibleElement(elem, navigationSelectors);
- }
- if (focusNode && isVisible(focusNode)) {
- if (focusNode.tabIndex >= 0) {
- focusNode.focus();
- } else {
- focusNode.tabIndex = 0;
- focusNode.focus();
- focusNode.tabIndex = -1;
- }
- focusNode.scrollIntoView({block: 'center'});
- }
- else {
- if (isLandmark) {
- scrollNode = findVisibleElement(elem, landmarkSelectors);
- if (scrollNode) {
- elem = scrollNode;
- }
- }
- if (elem.tabIndex >= 0) {
- elem.focus();
- } else {
- elem.tabIndex = 0;
- elem.focus();
- elem.tabIndex = -1;
- }
- elem.scrollIntoView({block: 'center'});
- }
- }
- }
-
- /*
- * @function getHeadingTargets
- *
- * @desc Returns an array of heading tag names to include in menu
- * NOTE: It uses "includes" method to maximimze compatibility with
- * previous versions of SkipTo which used CSS selectors for
- * identifying targets.
- *
- * @param {String} targets - A space with the heading tags to inclucde
- *
- * @returns {Array} Array of heading element tag names to include in menu
- */
- function getHeadingTargets(targets) {
- let targetHeadings = [];
- ['h1','h2','h3','h4','h5','h6'].forEach( h => {
- if (targets.includes(h)) {
- targetHeadings.push(h);
- }
- });
- return targetHeadings;
- }
-
- /*
- * @function isMain
- *
- * @desc Returns true if the element is a main landamrk
- *
- * @param {Object} element - DOM element node
- *
- * @returns {Boolean} see @desc
- */
- function isMain (element) {
- const tagName = element.tagName.toLowerCase();
- const role = element.hasAttribute('role') ? element.getAttribute('role').toLowerCase() : '';
- return (tagName === 'main') || (role === 'main');
- }
-
- /*
- * @function queryDOMForLandmarksAndHeadings
- *
- * @desc Recursive function to return two arrays, one an array of the DOM element nodes for
- * landmarks and the other an array of DOM element ndoes for headings
- *
- * @param {Array} landamrkTargets - An array of strings representing landmark regions
- * @param {Array} headingTargets - An array of strings representing headings
- *
- * @returns {Array} @see @desc
- */
- function queryDOMForLandmarksAndHeadings (landmarkTargets, headingTargets) {
- let headingInfo = [];
- let landmarkInfo = [];
- let targetLandmarks = getLandmarkTargets(landmarkTargets.toLowerCase());
- let targetHeadings = getHeadingTargets(headingTargets.toLowerCase());
- let onlyInMain = headingTargets.includes('main');
-
- function transverseDOM(startingNode, doc, parentDoc=null, inMain = false) {
- for (let node = startingNode.firstChild; node !== null; node = node.nextSibling ) {
- if (node.nodeType === Node.ELEMENT_NODE) {
- const tagName = node.tagName.toLowerCase();
- if (targetLandmarks.indexOf(checkForLandmark(node)) >= 0) {
- landmarkInfo.push({ node: node, name: getAccessibleName(doc, node)});
- }
- if (targetHeadings.indexOf(tagName) >= 0) {
- if (!onlyInMain || inMain) {
- headingInfo.push({ node: node, name: getAccessibleName(doc, node, true)});
- }
- }
-
- if (isMain(node)) {
- inMain = true;
- }
-
- if (!isSkipableElement(node)) {
- // check for slotted content
- if (isSlotElement(node)) {
- // if no slotted elements, check for default slotted content
- const slotContent = node.assignedNodes().length > 0;
- const assignedNodes = slotContent ?
- node.assignedNodes() :
- node.assignedNodes({ flatten: true });
- const nameDoc = slotContent ?
- parentDoc :
- doc;
- for (let i = 0; i < assignedNodes.length; i += 1) {
- const assignedNode = assignedNodes[i];
- if (assignedNode.nodeType === Node.ELEMENT_NODE) {
- const tagName = assignedNodes[i].tagName.toLowerCase();
- if (targetLandmarks.indexOf(checkForLandmark(assignedNode)) >= 0) {
- landmarkInfo.push({ node: assignedNode, name: getAccessibleName(nameDoc, assignedNode)});
- }
-
- if (targetHeadings.indexOf(tagName) >= 0) {
- if (!onlyInMain || inMain) {
- headingInfo.push({ node: assignedNode, name: getAccessibleName(nameDoc, assignedNode, true)});
- }
- }
- if (slotContent) {
- transverseDOM(assignedNode, parentDoc, null, inMain);
- } else {
- transverseDOM(assignedNode, doc, parentDoc, inMain);
- }
- }
- }
- } else {
- // check for custom elements
- if (isCustomElement(node)) {
- if (node.shadowRoot) {
- transverseDOM(node.shadowRoot, node.shadowRoot, doc, inMain);
- }
- } else {
- transverseDOM(node, doc, parentDoc, inMain);
- }
- }
- }
- } // end if
- } // end for
- } // end function
-
- transverseDOM(document.body, document);
-
- // If no elements found when onlyInMain is set, try
- // to find any headings
- if ((headingInfo.length === 0) && onlyInMain) {
- onlyInMain = false;
- transverseDOM(document.body, document);
- }
-
- return [landmarkInfo, headingInfo];
- }
-
- /*
- * @function getLandmarksAndHeadings
- *
- * @desc Returns two arrays of of DOM node elements with, one for landmark regions
- * the other for headings with additional information needed to create
- * menuitems
- *
- * @param {Object} config - Object with configuration information
- *
- * @return see @desc
- */
-
- function getLandmarksAndHeadings (config) {
-
- let landmarkTargets = config.landmarks;
- if (typeof landmarkTargets !== 'string') {
- landmarkTargets = 'main search navigation';
- }
-
- let headingTargets = config.headings;
- // If targets undefined, use default settings
- if (typeof headingTargets !== 'string') {
- headingTargets = 'h1 h2';
- }
-
- const [landmarks, headings] = queryDOMForLandmarksAndHeadings(landmarkTargets, headingTargets);
-
- return [getLandmarks(config, landmarks), getHeadings(config, headings)];
- }
-
- /*
- * @function getHeadings
- *
- * @desc Returns an array of heading menu elements
- *
- * @param {Object} config - Object with configuration information
- * @param {Object} headings - Array of dome node elements that are headings
- *
- * @returns see @desc
- */
- function getHeadings (config, headings) {
- let dataId, level;
- let headingElementsArr = [];
-
- for (let i = 0, len = headings.length; i < len; i += 1) {
- let heading = headings[i];
- let role = heading.node.getAttribute('role');
- if ((typeof role === 'string') && (role === 'presentation')) continue;
- if (isVisible(heading.node) && isNotEmptyString(heading.node.innerHTML)) {
- if (heading.node.hasAttribute('data-skip-to-id')) {
- dataId = heading.node.getAttribute('data-skip-to-id');
- } else {
- dataId = getSkipToIdIndex();
- heading.node.setAttribute('data-skip-to-id', dataId);
- }
- level = heading.node.tagName.substring(1);
- const headingItem = {};
- headingItem.dataId = dataId.toString();
- headingItem.class = 'heading';
- headingItem.name = heading.name;
- headingItem.ariaLabel = headingItem.name + ', ';
- headingItem.ariaLabel += config.headingLevelLabel + ' ' + level;
- headingItem.tagName = heading.node.tagName.toLowerCase();
- headingItem.role = 'heading';
- headingItem.level = level;
- headingElementsArr.push(headingItem);
- incSkipToIdIndex();
- }
- }
- return headingElementsArr;
- }
-
- /*
- * @function getLocalizedLandmarkName
- *
- * @desc Localizes a landmark name and adds accessible name if defined
- *
- * @param {Object} config - Object with configuration information
- * @param {String} tagName - String with landamrk and/or tag names
- * @param {String} AccName - Accessible name for therlandmark, maybe an empty string
- *
- * @returns {String} A localized string for a landmark name
- */
- function getLocalizedLandmarkName (config, tagName, accName) {
- let n;
- switch (tagName) {
- case 'aside':
- n = config.asideLabel;
- break;
- case 'footer':
- n = config.footerLabel;
- break;
- case 'form':
- n = config.formLabel;
- break;
- case 'header':
- n = config.headerLabel;
- break;
- case 'main':
- n = config.mainLabel;
- break;
- case 'nav':
- n = config.navLabel;
- break;
- case 'section':
- case 'region':
- n = config.regionLabel;
- break;
- case 'search':
- n = config.searchLabel;
- break;
- // When an ID is used as a selector, assume for main content
- default:
- n = tagName;
- break;
- }
- if (isNotEmptyString(accName)) {
- n += ': ' + accName;
- }
- return n;
- }
-
- /*
- * @function getLandmarkTargets
- *
- * @desc Analyzes a configuration string for landamrk and tag names
- * NOTE: This function is included to maximize compatibility
- * with confiuguration strings that use CSS selectors
- * in previous versions of SkipTo
- *
- * @param {String} targets - String with landamrk and/or tag names
- *
- * @returns {Array} A normailized array of landmark names based on target configuration
- */
- function getLandmarkTargets (targets) {
- let targetLandmarks = [];
- targets = targets.toLowerCase();
- if (targets.includes('main')) {
- targetLandmarks.push('main');
- }
- if (targets.includes('search')) {
- targetLandmarks.push('search');
- }
- if (targets.includes('nav')) {
- targetLandmarks.push('navigation');
- }
- if (targets.includes('complementary') ||
- targets.includes('aside')) {
- targetLandmarks.push('complementary');
- }
- if (targets.includes('banner') ||
- targets.includes('header')) {
- targetLandmarks.push('banner');
- }
- if (targets.includes('contentinfo') ||
- targets.includes('footer')) {
- targetLandmarks.push('contentinfo');
- }
- if (targets.includes('region') ||
- targets.includes('section')) {
- targetLandmarks.push('region');
- }
- return targetLandmarks;
- }
-
-
- /*
- * @function getLandmarks
- *
- * @desc Returns an array of objects with information to build the
- * the landmarks menu, ordering in the array by the type of landmark
- * region
- *
- * @param {Object} config - Object with configuration information
- * @param {Array} landmarks - Array of objects containing the DOM node and
- * accessible name for landmarks
- *
- * @returns {Array} see @desc
- */
- function getLandmarks(config, landmarks) {
- let mainElements = [];
- let searchElements = [];
- let navElements = [];
- let asideElements = [];
- let footerElements = [];
- let regionElements = [];
- let otherElements = [];
- let dataId = '';
- for (let i = 0, len = landmarks.length; i < len; i += 1) {
- let landmark = landmarks[i];
- if (landmark.node.id === 'id-skip-to') {
- continue;
- }
- let role = landmark.node.getAttribute('role');
- let tagName = landmark.node.tagName.toLowerCase();
- if ((typeof role === 'string') && (role === 'presentation')) continue;
- if (isVisible(landmark.node)) {
- if (!role) role = tagName;
- // normalize tagNames
- switch (role) {
- case 'banner':
- tagName = 'header';
- break;
- case 'complementary':
- tagName = 'aside';
- break;
- case 'contentinfo':
- tagName = 'footer';
- break;
- case 'form':
- tagName = 'form';
- break;
- case 'main':
- tagName = 'main';
- break;
- case 'navigation':
- tagName = 'nav';
- break;
- case 'region':
- tagName = 'section';
- break;
- case 'search':
- tagName = 'search';
- break;
- }
- // if using ID for selectQuery give tagName as main
- if (['aside', 'footer', 'form', 'header', 'main', 'nav', 'section', 'search'].indexOf(tagName) < 0) {
- tagName = 'main';
- }
- if (landmark.node.hasAttribute('aria-roledescription')) {
- tagName = landmark.node.getAttribute('aria-roledescription').trim().replace(' ', '-');
- }
- if (landmark.node.hasAttribute('data-skip-to-id')) {
- dataId = landmark.node.getAttribute('data-skip-to-id');
- } else {
- dataId = getSkipToIdIndex();
- landmark.node.setAttribute('data-skip-to-id', dataId);
- }
- const landmarkItem = {};
- landmarkItem.dataId = dataId.toString();
- landmarkItem.class = 'landmark';
- landmarkItem.hasName = landmark.name.length > 0;
- landmarkItem.name = getLocalizedLandmarkName(config, tagName, landmark.name);
- landmarkItem.tagName = tagName;
- landmarkItem.nestingLevel = 0;
- incSkipToIdIndex();
-
- // For sorting landmarks into groups
- switch (tagName) {
- case 'main':
- mainElements.push(landmarkItem);
- break;
- case 'search':
- searchElements.push(landmarkItem);
- break;
- case 'nav':
- navElements.push(landmarkItem);
- break;
- case 'aside':
- asideElements.push(landmarkItem);
- break;
- case 'footer':
- footerElements.push(landmarkItem);
- break;
- case 'section':
- // Regions must have accessible name to be included
- if (landmarkItem.hasName) {
- regionElements.push(landmarkItem);
- }
- break;
- default:
- otherElements.push(landmarkItem);
- break;
- }
- }
- }
- return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements);
- }
-
- /* skiptoMenuButton.js */
-
- /* Constants */
- const debug = new DebugLogging('SkipToButton', false);
- debug.flag = false;
-
- /**
- * @class SkiptoMenuButton
- *
- * @desc Constructor for creating a button to open a menu of headings and landmarks on
- * a web page
- *
- * @param {Object} attachNode - DOM eleemnt node to attach button and menu container element
- *
- * @returns {Object} DOM element node that is the contatiner for the button and the menu
- */
- class SkiptoMenuButton {
-
- constructor (attachNode, config, id) {
- this.config = config;
-
- this.containerNode = document.createElement(config.containerElement);
- if (config.containerElement === 'nav') {
- this.containerNode.setAttribute('aria-label', config.buttonLabel);
- }
-
- this.containerNode.id = id;
-
- if (isNotEmptyString(config.customClass)) {
- this.containerNode.classList.add(config.customClass);
- }
-
- let displayOption = config.displayOption;
- if (typeof displayOption === 'string') {
- displayOption = displayOption.trim().toLowerCase();
- if (displayOption.length) {
- switch (config.displayOption) {
- case 'fixed':
- this.containerNode.classList.add('fixed');
- break;
- case 'onfocus': // Legacy option
- case 'popup':
- this.containerNode.classList.add('popup');
- break;
- }
- }
- }
-
- // Create button
-
- const [buttonVisibleLabel, buttonAriaLabel] = this.getBrowserSpecificShortcut(config);
-
- this.buttonNode = document.createElement('button');
- this.buttonNode.setAttribute('aria-label', buttonAriaLabel);
- this.buttonNode.addEventListener('keydown', this.handleButtonKeydown.bind(this));
- this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
- this.containerNode.appendChild(this.buttonNode);
-
- this.buttonTextNode = document.createElement('span');
- this.buttonTextNode.classList.add('text');
- this.buttonTextNode.textContent = buttonVisibleLabel;
- this.buttonNode.appendChild(this.buttonTextNode);
-
- const imageNode = document.createElement('img');
- imageNode.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABP5JREFUWAm9V11MXEUUnjN7KbuwKD/L8qOp2kpbWCSFpkZN2qIxjQYWaC2JD/4kxsTE1MQHeedBY6K+mPSpJsakhcSgFaQk+qCh1DZRQmioSypVa0q1IKC1bFlw753jN5e9txfobmkBJ1nm3DPnb87fHEhkWGWVBx9QYqFCkSxk4nuFYMpA7jkilkIsMHNCGnI8m9VPl8/3/e0hcMEVAosjTc+wsl5iomcFc75LuTYA4ug7IajDZ+Qfnxw5dsMR5xoQqm0qF/OqgwXXO4cbscOQCwb5npuI9Yxq+bYBJTUHwqaZHMSNN99USjNE4jQoxuD5KeBnBSm+eZ4BYglWsQkhCzKLLWB6DHC1wwEj4j6DaiZHei8ZGmklkx+CwFZOgqalT772+qG67vb2duUwrXUPVzfVKMv6GMbsQm4ETVO8D5mHqHxXNLSQUFcFC23MdSmz9k3Fus+tVeGt+IsjrUFWc2MwokyfS5lTZiQTYndKuY5H33LlYCplv+Xmyq0Ep8PRvI+nYl0TzjngeKiqoQP63lrEzT9sIK5hIFKLhh1I76HKxjal5t4Tc17s6mEtNlQVbZse7f3A5SJx0dWn+D5DsbwmhBvqCpcQQDDb+ChuKmTrauvfy61h4qAhz0x70JJ8PYpUm5aZFaBvRElN9KGiyga2f1UN46W1rcUe+g0BkdwSiWiH1f4TqmocAGKP1oYqGPEZfGDyfN+vG6J9mVDbgNKqaMRkHkQTCtjnTBa8960U8hRyZAxljT4g44IsN1uWyVn6SRJ0dEP4xOzh5rqJTOXsZnf4kcbHlcUn0DhKl0pb2xc8mkC8R5nk11lCdE6M9sa8El0DNFLXqVCJN+GJF3GFbV7CdYK1Z45RoTw8febLWS1ziQFeJeHqlq2CrZ2WEBUkuBBt+p5M9F5eJDgJKfwot3xcBnJoB7yAB3JxoRUPEwX26r6Q1gCHeD32+yOthfNi/mVc4m0ke44tk+jIzOjJN/4XA5xLhKuj+y3FvTBkE7ww5zMKwrYBoUj0VSAr/RR450qs6y+HYSN2tOJuJHpzygtPG7oRmUl1FAhaEAndtN51FBdVNp5A/PGU3uXCs5uKtfseoCq+R14sGsBUbiAmuuxsT6Ahl3tV+SR1YAIY8eLuDObZzf6CGT1MOIsFwcOL7QTtwm/PA87h8j2nuKgvPnv97HL8ar+DlkoMDR1NZqLPaED8z+mz8FBtJgGZzvQIVV7d/OAfP/aMp6PLaABmtxdMqbakY749nuOZlGt+tzncXtjGUBiWItNNCko9RildJlvHWd19CJDbK0NAnOsMJKiIpJFNcmLBGUiY6rz3DIZDTyAJC7y4O4F1Ev52rhsDz5L1qPNFQl0lPRwc+XTwCgqjDD3bkpKfnBrtO+0QredeHGnZycocQB/IQ+EnA5RT6uvv7+dAeHsRFO0BUj/kB3NLtsfmpsbG1lN5KNIYFUp9DuW2R0lS50Ssu9NuQBjNc/5N8BBKDq9WahFdRhccQBx/JhbX8MDNI6SLHcShSbdjggFtALEuwA9zJu2DYrfJ4fBSdl7W7t9/+GLGfYz0LGguzH2GPr03ndz1wEP5KZKB551x3TXAEV5UGW0h4lfwOO3HdbMd/Fp2/fLBu1/B7Z9Mx072emWtMMA5rK9vNy5MDW8zhbUVLsxDqebil5be4VvcETQ9ExL9g3/rf3lqh/9iV1cXZpuV6z8QFu9El3GwrAAAAABJRU5ErkJggg==";
- imageNode.setAttribute('alt', '');
- this.buttonNode.appendChild(imageNode);
-
- // Create menu container
-
- this.menuNode = document.createElement('div');
- this.menuNode.id = 'id-skip-to-menu';
- this.menuNode.setAttribute('role', 'menu');
- this.menuNode.setAttribute('aria-label', config.menuLabel);
- this.menuNode.setAttribute('aria-busy', 'true');
- this.containerNode.appendChild(this.menuNode);
-
- const landmarkGroupLabelNode = document.createElement('div');
- landmarkGroupLabelNode.id = 'id-skip-to-menu-landmark-group-label';
- landmarkGroupLabelNode.setAttribute('role', 'separator');
- landmarkGroupLabelNode.textContent = this.config.landmarkGroupLabel;
- this.menuNode.appendChild(landmarkGroupLabelNode);
-
- this.landmarkGroupNode = document.createElement('div');
- this.landmarkGroupNode.setAttribute('role', 'group');
- this.landmarkGroupNode.setAttribute('aria-labelledby', landmarkGroupLabelNode.id);
- this.landmarkGroupNode.id = '#id-skip-to-menu-landmark-group';
- this.menuNode.appendChild(this.landmarkGroupNode);
-
- const headingGroupLabelNode = document.createElement('div');
- headingGroupLabelNode.id = 'id-skip-to-menu-heading-group-label';
- headingGroupLabelNode.setAttribute('role', 'separator');
- headingGroupLabelNode.textContent = this.config.headingGroupLabel;
- this.menuNode.appendChild(headingGroupLabelNode);
-
- this.headingGroupNode = document.createElement('div');
- this.headingGroupNode.setAttribute('role', 'group');
- this.headingGroupNode.setAttribute('aria-labelledby', headingGroupLabelNode.id);
- this.headingGroupNode.id = '#id-skip-to-menu-heading-group';
- this.menuNode.appendChild(this.headingGroupNode);
-
- this.containerNode.addEventListener('focusin', this.handleFocusin.bind(this));
- this.containerNode.addEventListener('focusout', this.handleFocusout.bind(this));
- window.addEventListener('pointerdown', this.handleBackgroundPointerdown.bind(this), true);
-
- if (this.usesAltKey || this.usesOptionKey) {
- document.addEventListener(
- 'keydown',
- this.handleDocumentKeydown.bind(this)
- );
- }
-
- attachNode.insertBefore(this.containerNode, attachNode.firstElementChild);
-
- return this.containerNode;
-
- }
-
- /*
- * @method getBrowserSpecificShortcut
- *
- * @desc Identifies the operating system and updates labels for
- * shortcut key to use either the "alt" or the "option"
- * label
- *
- * @param {Object} - SkipTp configure object
- *
- * @return {Array} - An array of two strings used for the button label
- */
- getBrowserSpecificShortcut (config) {
- const platform = navigator.platform.toLowerCase();
- const userAgent = navigator.userAgent.toLowerCase();
-
- const hasWin = platform.indexOf('win') >= 0;
- const hasMac = platform.indexOf('mac') >= 0;
- const hasLinux = platform.indexOf('linux') >= 0 || platform.indexOf('bsd') >= 0;
- const hasAndroid = userAgent.indexOf('android') >= 0;
-
- this.usesAltKey = hasWin || (hasLinux && !hasAndroid);
- this.usesOptionKey = hasMac;
-
- let label = config.buttonLabel;
- let ariaLabel = config.buttonLabel;
- let buttonShortcut;
-
- // Check to make sure a shortcut key is defined
- if (config.altShortcut && config.optionShortcut) {
- if (this.usesAltKey || this.usesOptionKey) {
- buttonShortcut = config.buttonShortcut.replace(
- '$key',
- config.altShortcut
- );
- }
- if (this.usesAltKey) {
- buttonShortcut = buttonShortcut.replace(
- '$modifier',
- config.altLabel
- );
- label = label + buttonShortcut;
- ariaLabel = config.altButtonAriaLabel.replace('$key', config.altShortcut);
- }
-
- if (this.usesOptionKey) {
- buttonShortcut = buttonShortcut.replace(
- '$modifier',
- config.optionLabel
- );
- label = label + buttonShortcut;
- ariaLabel = config.optionButtonAriaLabel.replace('$key', config.altShortcut);
- }
- }
- return [label, ariaLabel];
- }
-
- /*
- * @method getFirstChar
- *
- * @desc Gets the first character in a menuitem to use as a shortcut key
- *
- * @param {Object} menuitem - DOM element node
- *
- * @returns {String} see @desc
- */
- getFirstChar(menuitem) {
- const label = menuitem.querySelector('.label');
- if (label && isNotEmptyString(label.textContent)) {
- return label.textContent.trim()[0].toLowerCase();
- }
- return '';
- }
-
- /*
- * @method getHeadingLevelFromAttribute
- *
- * @desc Returns the the heading level of the menu item
- *
- * @param {Object} menuitem - DOM element node
- *
- * @returns {String} see @desc
- */
- getHeadingLevelFromAttribute(menuitem) {
- if (menuitem.hasAttribute('data-level')) {
- return menuitem.getAttribute('data-level');
- }
- return '';
- }
-
- /*
- * @method updateKeyboardShortCuts
- *
- * @desc Updates the keyboard short cuts for the curent menu items
- */
- updateKeyboardShortCuts () {
- let mi;
- this.firstChars = [];
- this.headingLevels = [];
-
- for(let i = 0; i < this.menuitemNodes.length; i += 1) {
- mi = this.menuitemNodes[i];
- this.firstChars.push(this.getFirstChar(mi));
- this.headingLevels.push(this.getHeadingLevelFromAttribute(mi));
- }
- }
-
- /*
- * @method updateMenuitems
- *
- * @desc Updates the menu information with the current manu items
- * used for menu navgation commands
- */
- updateMenuitems () {
- let menuitemNodes = this.menuNode.querySelectorAll('[role=menuitem');
-
- this.menuitemNodes = [];
- for(let i = 0; i < menuitemNodes.length; i += 1) {
- this.menuitemNodes.push(menuitemNodes[i]);
- }
-
- this.firstMenuitem = this.menuitemNodes[0];
- this.lastMenuitem = this.menuitemNodes[this.menuitemNodes.length-1];
- this.lastMenuitem.classList.add('last');
- this.updateKeyboardShortCuts();
- }
-
- /*
- * @method renderMenuitemToGroup
- *
- * @desc Renders a menuitem using an information object about the menuitem
- *
- * @param {Object} groupNode - DOM element node for the menu group
- * @param {Object} mi - object with menuitem information
- */
- renderMenuitemToGroup (groupNode, mi) {
- let tagNode, tagNodeChild, labelNode, nestingNode;
-
- let menuitemNode = document.createElement('div');
- menuitemNode.setAttribute('role', 'menuitem');
- menuitemNode.classList.add(mi.class);
- if (isNotEmptyString(mi.tagName)) {
- menuitemNode.classList.add('skip-to-' + mi.tagName.toLowerCase());
- }
- menuitemNode.setAttribute('data-id', mi.dataId);
- menuitemNode.tabIndex = -1;
- if (isNotEmptyString(mi.ariaLabel)) {
- menuitemNode.setAttribute('aria-label', mi.ariaLabel);
- }
-
- // add event handlers
- menuitemNode.addEventListener('keydown', this.handleMenuitemKeydown.bind(this));
- menuitemNode.addEventListener('click', this.handleMenuitemClick.bind(this));
- menuitemNode.addEventListener('pointerenter', this.handleMenuitemPointerenter.bind(this));
-
- groupNode.appendChild(menuitemNode);
-
- // add heading level and label
- if (mi.class.includes('heading')) {
- if (this.config.enableHeadingLevelShortcuts) {
- tagNode = document.createElement('span');
- tagNodeChild = document.createElement('span');
- tagNodeChild.appendChild(document.createTextNode(mi.level));
- tagNode.append(tagNodeChild);
- tagNode.appendChild(document.createTextNode(')'));
- tagNode.classList.add('level');
- menuitemNode.append(tagNode);
- } else {
- menuitemNode.classList.add('no-level');
- }
- menuitemNode.setAttribute('data-level', mi.level);
- if (isNotEmptyString(mi.tagName)) {
- menuitemNode.classList.add('skip-to-' + mi.tagName);
- }
- }
-
- // add nesting level for landmarks
- if (mi.class.includes('landmark')) {
- menuitemNode.setAttribute('data-nesting', mi.nestingLevel);
- menuitemNode.classList.add('skip-to-nesting-level-' + mi.nestingLevel);
-
- if (mi.nestingLevel > 0 && (mi.nestingLevel > this.lastNestingLevel)) {
- nestingNode = document.createElement('span');
- nestingNode.classList.add('nesting');
- menuitemNode.append(nestingNode);
- }
- this.lastNestingLevel = mi.nestingLevel;
- }
-
- labelNode = document.createElement('span');
- labelNode.appendChild(document.createTextNode(mi.name));
- labelNode.classList.add('label');
- menuitemNode.append(labelNode);
-
- return menuitemNode;
- }
-
- /*
- * @method renderMenuitemsToGroup
- *
- * @desc Renders either the landmark region or headings menu group
- *
- * @param {Object} groupNode - DOM element node for the menu group
- * @param {Array} menuitems - Array of objects with menu item information
- * @param {String} msgNoItesmFound - Message to render if there are no menu items
- */
- renderMenuitemsToGroup(groupNode, menuitems, msgNoItemsFound) {
- groupNode.innerHTML = '';
- this.lastNestingLevel = 0;
-
- if (menuitems.length === 0) {
- const item = {};
- item.name = msgNoItemsFound;
- item.tagName = '';
- item.class = 'no-items';
- item.dataId = '';
- this.renderMenuitemToGroup(groupNode, item);
- }
- else {
- for (let i = 0; i < menuitems.length; i += 1) {
- this.renderMenuitemToGroup(groupNode, menuitems[i]);
- }
- }
- }
-
- /*
- * @method renderMenu
- *
- * @desc
- */
- renderMenu() {
- // remove landmark menu items
- while (this.landmarkGroupNode.lastElementChild) {
- this.landmarkGroupNode.removeChild(this.landmarkGroupNode.lastElementChild);
- }
- // remove heading menu items
- while (this.headingGroupNode.lastElementChild) {
- this.headingGroupNode.removeChild(this.headingGroupNode.lastElementChild);
- }
-
- // Create landmarks group
- const [landmarkElements, headingElements] = getLandmarksAndHeadings(this.config);
- this.renderMenuitemsToGroup(this.landmarkGroupNode, landmarkElements, this.config.msgNoLandmarksFound);
- this.renderMenuitemsToGroup(this.headingGroupNode, headingElements, this.config.msgNoHeadingsFound);
-
- // Update list of menuitems
- this.updateMenuitems();
- }
-
- //
- // Menu scripting helper functions and event handlers
- //
-
- /*
- * @method setFocusToMenuitem
- *
- * @desc Moves focus to menu item
- *
- * @param {Object} menuItem - DOM element node used as a menu item
- */
- setFocusToMenuitem(menuitem) {
- if (menuitem) {
- menuitem.focus();
- }
- }
-
- /*
- * @method setFocusToFirstMenuitem
- *
- * @desc Moves focus to first menu item
- */
- setFocusToFirstMenuitem() {
- this.setFocusToMenuitem(this.firstMenuitem);
- }
-
- /*
- * @method setFocusToLastMenuitem
- *
- * @desc Moves focus to last menu item
- */
- setFocusToLastMenuitem() {
- this.setFocusToMenuitem(this.lastMenuitem);
- }
-
- /*
- * @method setFocusToPreviousMenuitem
- *
- * @desc Moves focus to previous menu item
- *
- * @param {Object} menuItem - DOM element node
- */
- setFocusToPreviousMenuitem(menuitem) {
- let newMenuitem, index;
- if (menuitem === this.firstMenuitem) {
- newMenuitem = this.lastMenuitem;
- } else {
- index = this.menuitemNodes.indexOf(menuitem);
- newMenuitem = this.menuitemNodes[index - 1];
- }
- this.setFocusToMenuitem(newMenuitem);
- return newMenuitem;
- }
-
- /*
- * @method setFocusToNextMenuitem
- *
- * @desc Moves focus to next menu item
- *
- * @param {Object} menuItem - DOM element node
- */
- setFocusToNextMenuitem(menuitem) {
- let newMenuitem, index;
- if (menuitem === this.lastMenuitem) {
- newMenuitem = this.firstMenuitem;
- } else {
- index = this.menuitemNodes.indexOf(menuitem);
- newMenuitem = this.menuitemNodes[index + 1];
- }
- this.setFocusToMenuitem(newMenuitem);
- return newMenuitem;
- }
-
- /*
- * @method setFocusByFirstCharacter
- *
- * @desc Moves focus to next menu item based on shortcut key
- *
- * @param {Object} menuItem - Starting DOM element node
- * @param {String} char - Shortcut key to identify the
- * next menu item
- */
- setFocusByFirstCharacter(menuitem, char) {
- let start, index;
- if (char.length > 1) {
- return;
- }
- char = char.toLowerCase();
-
- // Get start index for search based on position of currentItem
- start = this.menuitemNodes.indexOf(menuitem) + 1;
- if (start >= this.menuitemNodes.length) {
- start = 0;
- }
-
- // Check remaining items in the menu
- index = this.firstChars.indexOf(char, start);
-
- // If not found in remaining items, check headings
- if (index === -1) {
- index = this.headingLevels.indexOf(char, start);
- }
-
- // If not found in remaining items, check from beginning
- if (index === -1) {
- index = this.firstChars.indexOf(char, 0);
- }
-
- // If not found in remaining items, check headings from beginning
- if (index === -1) {
- index = this.headingLevels.indexOf(char, 0);
- }
-
- // If match was found...
- if (index > -1) {
- this.setFocusToMenuitem(this.menuitemNodes[index]);
- }
- }
-
- /*
- * @method getIndexFirstChars
- *
- * @desc
- *
- * @returns {Number}
- */
- getIndexFirstChars(startIndex, char) {
- for (let i = startIndex; i < this.firstChars.length; i += 1) {
- if (char === this.firstChars[i]) {
- return i;
- }
- }
- return -1;
- }
-
- /*
- * @method openPopup
- *
- * @desc Opens the memu of landmark regions and headings
- */
- openPopup() {
- this.menuNode.setAttribute('aria-busy', 'true');
- const h = (80 * window.innerHeight) / 100;
- this.menuNode.style.maxHeight = h + 'px';
- this.renderMenu();
- this.menuNode.style.display = 'block';
- const buttonRect = this.buttonNode.getBoundingClientRect();
- const menuRect = this.menuNode.getBoundingClientRect();
- const diff = window.innerWidth - buttonRect.left - menuRect.width - 8;
- if (diff < 0) {
- if (buttonRect.left + diff < 0) {
- this.menuNode.style.left = (8 - buttonRect.left) + 'px';
- } else {
- this.menuNode.style.left = diff + 'px';
- }
- }
- this.menuNode.removeAttribute('aria-busy');
- this.buttonNode.setAttribute('aria-expanded', 'true');
- }
-
- /*
- * @method closePopup
- *
- * @desc Closes the memu of landmark regions and headings
- */
- closePopup() {
- if (this.isOpen()) {
- this.buttonNode.setAttribute('aria-expanded', 'false');
- this.menuNode.style.display = 'none';
- }
- }
-
- /*
- * @method isOpen
- *
- * @desc Returns true if menu is open, otherwise false
- *
- * @returns {Boolean} see @desc
- */
- isOpen() {
- return this.buttonNode.getAttribute('aria-expanded') === 'true';
- }
-
- // Menu event handlers
-
- handleFocusin() {
- this.containerNode.classList.add('focus');
- }
-
- handleFocusout() {
- this.containerNode.classList.remove('focus');
- }
-
- handleButtonKeydown(event) {
- let key = event.key,
- flag = false;
- switch (key) {
- case ' ':
- case 'Enter':
- case 'ArrowDown':
- case 'Down':
- this.openPopup();
- this.setFocusToFirstMenuitem();
- flag = true;
- break;
- case 'Esc':
- case 'Escape':
- this.closePopup();
- this.buttonNode.focus();
- flag = true;
- break;
- case 'Up':
- case 'ArrowUp':
- this.openPopup();
- this.setFocusToLastMenuitem();
- flag = true;
- break;
- }
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
-
- handleButtonClick(event) {
- if (this.isOpen()) {
- this.closePopup();
- this.buttonNode.focus();
- } else {
- this.openPopup();
- this.setFocusToFirstMenuitem();
- }
- event.stopPropagation();
- event.preventDefault();
- }
-
- handleDocumentKeydown (event) {
- let key = event.key,
- flag = false;
-
- let altPressed =
- this.usesAltKey &&
- event.altKey &&
- !event.ctrlKey &&
- !event.shiftKey &&
- !event.metaKey;
-
- let optionPressed =
- this.usesOptionKey &&
- event.altKey &&
- !event.ctrlKey &&
- !event.shiftKey &&
- !event.metaKey;
-
- if (
- (optionPressed && this.config.optionShortcut === key) ||
- (altPressed && this.config.altShortcut === key)
- ) {
- this.openPopup();
- this.setFocusToFirstMenuitem();
- flag = true;
- }
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
-
- handleMenuitemAction(tgt) {
- switch (tgt.getAttribute('data-id')) {
- case '':
- // this means there were no headings or landmarks in the list
- break;
-
- default:
- this.closePopup();
- skipToElement(tgt);
- break;
- }
- }
-
- handleMenuitemKeydown(event) {
- let tgt = event.currentTarget,
- key = event.key,
- flag = false;
-
- function isPrintableCharacter(str) {
- return str.length === 1 && str.match(/\S/);
- }
- if (event.ctrlKey || event.altKey || event.metaKey) {
- return;
- }
- if (event.shiftKey) {
- if (isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(tgt, key);
- flag = true;
- }
- if (event.key === 'Tab') {
- this.buttonNode.focus();
- this.closePopup();
- flag = true;
- }
- } else {
- switch (key) {
- case 'Enter':
- case ' ':
- this.handleMenuitemAction(tgt);
- flag = true;
- break;
- case 'Esc':
- case 'Escape':
- this.closePopup();
- this.buttonNode.focus();
- flag = true;
- break;
- case 'Up':
- case 'ArrowUp':
- this.setFocusToPreviousMenuitem(tgt);
- flag = true;
- break;
- case 'ArrowDown':
- case 'Down':
- this.setFocusToNextMenuitem(tgt);
- flag = true;
- break;
- case 'Home':
- case 'PageUp':
- this.setFocusToFirstMenuitem();
- flag = true;
- break;
- case 'End':
- case 'PageDown':
- this.setFocusToLastMenuitem();
- flag = true;
- break;
- case 'Tab':
- this.closePopup();
- break;
- default:
- if (isPrintableCharacter(key)) {
- this.setFocusByFirstCharacter(tgt, key);
- flag = true;
- }
- break;
- }
- }
- if (flag) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
-
- handleMenuitemClick(event) {
- this.handleMenuitemAction(event.currentTarget);
- event.stopPropagation();
- event.preventDefault();
- }
-
- handleMenuitemPointerenter(event) {
- let tgt = event.currentTarget;
- tgt.focus();
- }
-
- handleBackgroundPointerdown(event) {
- if (!this.containerNode.contains(event.target)) {
- if (this.isOpen()) {
- this.closePopup();
- this.buttonNode.focus();
- }
- }
- }
- }
-
- (function() {
-
- const SkipTo = {
- skipToId: 'id-skip-to',
- domNode: null,
- buttonNode: null,
- menuNode: null,
- menuitemNodes: [],
- firstMenuitem: false,
- lastMenuitem: false,
- firstChars: [],
- headingLevels: [],
- skipToIdIndex: 1,
- // Default configuration values
- config: {
- // Feature switches
- enableHeadingLevelShortcuts: true,
-
- // Customization of button and menu
- altShortcut: '0', // default shortcut key is the number zero
- optionShortcut: 'ยบ', // default shortcut key character associated with option+0 on mac
- attachElement: 'body',
- displayOption: 'popup', // Line edited by pre-build script, fixed
- // container element, use containerClass for custom styling
- containerElement: 'div',
- containerRole: '',
- customClass: '',
-
- // Button labels and messages
- buttonLabel: 'Skip To Content',
- altLabel: 'Alt',
- optionLabel: 'Option',
- buttonShortcut: ' ($modifier+$key)',
- altButtonAriaLabel: 'Skip To Content, shortcut Alt plus $key',
- optionButtonAriaLabel: 'Skip To Content, shortcut Option plus $key',
-
- // Menu labels and messages
- menuLabel: 'Landmarks and Headings',
- landmarkGroupLabel: 'Landmark Regions',
- headingGroupLabel: 'Headings',
- headingLevelLabel: 'Heading level',
- mainLabel: 'main',
- searchLabel: 'search',
- navLabel: 'navigation',
- regionLabel: 'region',
- asideLabel: 'complementary',
- footerLabel: 'contentinfo',
- headerLabel: 'banner',
- formLabel: 'form',
- msgNoLandmarksFound: 'No landmarks found',
- msgNoHeadingsFound: 'No headings found',
-
- // Selectors for landmark and headings sections
- landmarks: 'main search navigation complementary',
- headings: 'main h1 h2',
-
- // Place holders for configuration
- colorTheme: 'aria',
- fontFamily: '',
- fontSize: '',
- positionLeft: '',
- mediaBreakPoint: '',
- menuTextColor: '',
- menuBackgroundColor: '',
- menuitemFocusTextColor: '',
- menuitemFocusBackgroundColor: '',
- focusBorderColor: '',
- buttonTextColor: '',
- buttonBackgroundColor: '',
- zIndex: '',
- },
- colorThemes: {
- 'default': {
- fontFamily: 'inherit',
- fontSize: 'inherit',
- positionLeft: '46%',
- mediaBreakPoint: '540',
- menuTextColor: '#1a1a1a',
- menuBackgroundColor: '#dcdcdc',
- menuitemFocusTextColor: '#eeeeee',
- menuitemFocusBackgroundColor: '#1a1a1a',
- focusBorderColor: '#1a1a1a',
- buttonTextColor: '#1a1a1a',
- buttonBackgroundColor: '#eeeeee',
- zIndex: '100000',
- },
- 'aria': {
- hostnameSelector: 'w3.org',
- pathnameSelector: 'ARIA/apg',
- fontFamily: 'sans-serif',
- fontSize: '10pt',
- positionLeft: '7%',
- menuTextColor: '#000',
- menuBackgroundColor: '#def',
- menuitemFocusTextColor: '#fff',
- menuitemFocusBackgroundColor: '#005a9c',
- focusBorderColor: '#005a9c',
- buttonTextColor: '#005a9c',
- buttonBackgroundColor: '#ddd',
- },
- 'illinois': {
- hostnameSelector: 'illinois.edu',
- menuTextColor: '#00132c',
- menuBackgroundColor: '#cad9ef',
- menuitemFocusTextColor: '#eeeeee',
- menuitemFocusBackgroundColor: '#00132c',
- focusBorderColor: '#ff552e',
- buttonTextColor: '#444444',
- buttonBackgroundColor: '#dddede',
- },
- 'skipto': {
- hostnameSelector: 'skipto-landmarks-headings.github.io',
- fontSize: '14px',
- menuTextColor: '#00132c',
- menuBackgroundColor: '#cad9ef',
- menuitemFocusTextColor: '#eeeeee',
- menuitemFocusBackgroundColor: '#00132c',
- focusBorderColor: '#ff552e',
- buttonTextColor: '#444444',
- buttonBackgroundColor: '#dddede',
- },
- 'uic': {
- hostnameSelector: 'uic.edu',
- menuTextColor: '#001e62',
- menuBackgroundColor: '#f8f8f8',
- menuitemFocusTextColor: '#ffffff',
- menuitemFocusBackgroundColor: '#001e62',
- focusBorderColor: '#d50032',
- buttonTextColor: '#ffffff',
- buttonBackgroundColor: '#001e62',
- },
- 'uillinois': {
- hostnameSelector: 'uillinois.edu',
- menuTextColor: '#001e62',
- menuBackgroundColor: '#e8e9ea',
- menuitemFocusTextColor: '#f8f8f8',
- menuitemFocusBackgroundColor: '#13294b',
- focusBorderColor: '#dd3403',
- buttonTextColor: '#e8e9ea',
- buttonBackgroundColor: '#13294b',
- },
- 'uis': {
- hostnameSelector: 'uis.edu',
- menuTextColor: '#036',
- menuBackgroundColor: '#fff',
- menuitemFocusTextColor: '#fff',
- menuitemFocusBackgroundColor: '#036',
- focusBorderColor: '#dd3444',
- buttonTextColor: '#fff',
- buttonBackgroundColor: '#036',
- }
- },
-
- /*
- * @method init
- *
- * @desc Initializes the skipto button and menu with default and user
- * defined options
- *
- * @param {object} config - Reference to configuration object
- * can be undefined
- */
- init: function(config) {
- let node;
-
- // Check if skipto is already loaded
- if (document.querySelector('style#' + this.skipToId)) {
- return;
- }
-
- let attachElement = document.body;
- if (config) {
- this.setupConfig(config);
- }
- if (typeof this.config.attachElement === 'string') {
- node = document.querySelector(this.config.attachElement);
- if (node && node.nodeType === Node.ELEMENT_NODE) {
- attachElement = node;
- }
- }
- // Add skipto style sheet to document
- renderStyleElement(this.colorThemes, this.config, this.skipToId);
-
- new SkiptoMenuButton(attachElement, this.config, this.skipToId);
- },
-
- /*
- * @method setupConfig
- *
- * @desc Get configuration information from user configuration to change
- * default settings
- *
- * @param {object} appConfig - Javascript object with configuration information
- */
- setupConfig: function(appConfig) {
- let appConfigSettings;
- // Support version 4.1 configuration object structure
- // If found use it
- if ((typeof appConfig.settings === 'object') &&
- (typeof appConfig.settings.skipTo === 'object')) {
- appConfigSettings = appConfig.settings.skipTo;
- }
- else {
- // Version 5.0 removes the requirement for the "settings" and "skipto" properties
- // to reduce the complexity of configuring skipto
- if ((typeof appConfig === 'undefined') ||
- (typeof appConfig !== 'object')) {
- appConfigSettings = {};
- }
- else {
- appConfigSettings = appConfig;
- }
- }
-
- for (const name in appConfigSettings) {
- //overwrite values of our local config, based on the external config
- if ((typeof this.config[name] !== 'undefined') &&
- ((typeof appConfigSettings[name] === 'string') &&
- (appConfigSettings[name].length > 0 ) ||
- typeof appConfigSettings[name] === 'boolean')
- ) {
- this.config[name] = appConfigSettings[name];
- } else {
- console.warn('[SkipTo]: Unsuported or deprecated configuration option "' + name + '".');
- }
- }
- }
- };
-
- // Initialize skipto menu button with onload event
- window.addEventListener('load', function() {
- SkipTo.init(window.SkipToConfig);
- });
- })();
-
-})();
+/* ========================================================================
+ * Version: 5.1.6
+ * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
+ * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
+ * All rights reserved.
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+ * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+ * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Documenation: https://skipto-landmarks-headings.github.io/page-script-5
+ * Code: https://github.com/skipto-landmarks-headings/page-script-5
+ * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
+ * ======================================================================== */
+
+(function () {
+ 'use strict';
+
+ /*
+ * debug.js
+ *
+ * Usage
+ * import DebugLogging from './debug.js';
+ * const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
+ * ...
+ * if (debug.flag) debug.log('myMessage');
+ *
+ * Notes
+ * new DebugLogging() - calling the constructor with no arguments results
+ * in debug.flag set to false and debug.label set to 'debug';
+ * constructor accepts 0, 1 or 2 arguments in any order
+ * @param flag [optional] {boolean} - sets debug.flag
+ * @param label [optional] {string} - sets debug.label
+ * Properties
+ * debug.flag {boolean} allows you to switch debug logging on or off;
+ * default value is false
+ * debug.label {string} rendered as a prefix to each log message;
+ * default value is 'debug'
+ * Methods
+ * debug.log calls console.log with label prefix and message
+ * @param message {object} - console.log calls toString()
+ * @param spaceAbove [optional] {boolean}
+ *
+ * debug.tag outputs tagName and textContent of DOM element
+ * @param node {DOM node reference} - usually an HTMLElement
+ * @param spaceAbove [optional] {boolean}
+ *
+ * debug.separator outputs only debug.label and a series of hyphens
+ * @param spaceAbove [optional] {boolean}
+ */
+
+ class DebugLogging {
+ constructor (...args) {
+ // Default values for cases where fewer than two arguments are provided
+ this._flag = false;
+ this._label = 'debug';
+
+ // The constructor may be called with zero, one or two arguments. If two
+ // arguments, they can be in any order: one is assumed to be the boolean
+ // value for '_flag' and the other one the string value for '_label'.
+ for (const [index, arg] of args.entries()) {
+ if (index < 2) {
+ switch (typeof arg) {
+ case 'boolean':
+ this._flag = arg;
+ break;
+ case 'string':
+ this._label = arg;
+ break;
+ }
+ }
+ }
+ }
+
+ get flag () { return this._flag; }
+
+ set flag (value) {
+ if (typeof value === 'boolean') {
+ this._flag = value;
+ }
+ }
+
+ get label () { return this._label; }
+
+ set label (value) {
+ if (typeof value === 'string') {
+ this._label = value;
+ }
+ }
+
+ log (message, spaceAbove) {
+ const newline = spaceAbove ? '\n' : '';
+ console.log(`${newline}[${this._label}] ${message}`);
+ }
+
+ tag (node, spaceAbove) {
+ if (node && node.tagName) {
+ const text = node.textContent.trim().replace(/\s+/g, ' ');
+ this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
+ }
+ }
+
+ separator (spaceAbove) {
+ this.log('-----------------------------', spaceAbove);
+ }
+
+ }
+
+ /* style.js */
+
+ /* Constants */
+ const debug$5 = new DebugLogging('style', false);
+ debug$5.flag = false;
+
+ const styleTemplate = document.createElement('template');
+ styleTemplate.innerHTML = `
+
+`;
+
+ /*
+ * @function getTheme
+ *
+ * @desc Returns
+ *
+ * @param {Object} colorThemes - Javascript object with keyed color themes
+ * @param {String} colorTheme - A string identifying a color theme
+ *
+ * @returns {Object} see @desc
+ */
+ function getTheme(colorThemes, colorTheme) {
+ if (typeof colorThemes[colorTheme] === 'object') {
+ return colorThemes[colorTheme];
+ }
+ // if no theme defined, use urlSelectors
+ let hostnameMatch = '';
+ let pathnameMatch = '';
+ let hostandpathnameMatch = '';
+
+ const locationURL = new URL(location.href);
+ const hostname = locationURL.hostname;
+ const pathname = location.pathname;
+
+ for (let item in colorThemes) {
+ const hostnameSelector = colorThemes[item].hostnameSelector;
+ const pathnameSelector = colorThemes[item].pathnameSelector;
+ let hostnameFlag = false;
+ let pathnameFlag = false;
+
+
+ if (hostnameSelector) {
+ if (hostname.indexOf(hostnameSelector) >= 0) {
+ if (!hostnameMatch ||
+ (colorThemes[hostnameMatch].hostnameSelector.length < hostnameSelector.length)) {
+ hostnameMatch = item;
+ hostnameFlag = true;
+ pathnameMatch = '';
+ }
+ else {
+ // if the same hostname is used in another theme, set the hostnameFlas in case the pathname
+ // matches
+ if (colorThemes[hostnameMatch].hostnameSelector.length === hostnameSelector.length) {
+ hostnameFlag = true;
+ }
+ }
+ }
+ }
+
+ if (pathnameSelector) {
+ if (pathname.indexOf(pathnameSelector) >= 0) {
+ if (!pathnameMatch ||
+ (colorThemes[pathnameMatch].pathnameSelector.length < pathnameSelector.length)) {
+ pathnameMatch = item;
+ pathnameFlag = true;
+ }
+ }
+ }
+
+ if (hostnameFlag && pathnameFlag) {
+ hostandpathnameMatch = item;
+ }
+ }
+
+ if (hostandpathnameMatch) {
+ return colorThemes[hostandpathnameMatch];
+ }
+ else {
+ if (hostnameMatch) {
+ return colorThemes[hostnameMatch];
+ } else {
+ if (pathnameMatch) {
+ return colorThemes[pathnameMatch];
+ }
+ }
+ }
+
+ // if no other theme is found use default theme
+ return colorThemes['default'];
+ }
+
+ /*
+ * @function updateStyle
+ *
+ * @desc
+ *
+ * @param
+ *
+ * @returns
+ */
+ function updateStyle(stylePlaceholder, configValue, themeValue, defaultValue) {
+ let value = defaultValue;
+ if (typeof configValue === 'string' && configValue) {
+ value = configValue;
+ } else {
+ if (typeof themeValue === 'string' && themeValue) {
+ value = themeValue;
+ }
+ }
+
+ let cssContent = styleTemplate.innerHTML;
+ let index1 = cssContent.indexOf(stylePlaceholder);
+ let index2 = index1 + stylePlaceholder.length;
+ while (index1 >= 0 && index2 < cssContent.length) {
+ cssContent = cssContent.substring(0, index1) + value + cssContent.substring(index2);
+ index1 = cssContent.indexOf(stylePlaceholder, index2);
+ index2 = index1 + stylePlaceholder.length;
+ }
+ styleTemplate.innerHTML = cssContent;
+ }
+
+ /*
+ * @function addCSSColors
+ *
+ * @desc Updates the styling information in the attached
+ * stylesheet to use the configured or default colors
+ *
+ * @param {Object} colorThemes - Object with theme information
+ * @param {Object} config - Configuration information object
+ */
+ function addCSSColors (colorThemes, config) {
+ const theme = getTheme(colorThemes, config.colorTheme);
+ const defaultTheme = getTheme(colorThemes, 'default');
+
+ // Check for display option in theme
+ if ((typeof theme.displayOption === 'string') &&
+ ('fixed popup static'.indexOf(theme.displayOption.toLowerCase())>= 0)) {
+ config.displayOption = theme.displayOption;
+ }
+
+ updateStyle('$fontFamily', config.fontFamily, theme.fontFamily, defaultTheme.fontFamily);
+ updateStyle('$fontSize', config.fontSize, theme.fontSize, defaultTheme.fontSize);
+
+ updateStyle('$positionLeft', config.positionLeft, theme.positionLeft, defaultTheme.positionLeft);
+ updateStyle('$mediaBreakPoint', config.mediaBreakPoint, theme.mediaBreakPoint, defaultTheme.mediaBreakPoint);
+
+ updateStyle('$menuTextColor', config.menuTextColor, theme.menuTextColor, defaultTheme.menuTextColor);
+ updateStyle('$menuBackgroundColor', config.menuBackgroundColor, theme.menuBackgroundColor, defaultTheme.menuBackgroundColor);
+
+ updateStyle('$menuitemFocusTextColor', config.menuitemFocusTextColor, theme.menuitemFocusTextColor, defaultTheme.menuitemFocusTextColor);
+ updateStyle('$menuitemFocusBackgroundColor', config.menuitemFocusBackgroundColor, theme.menuitemFocusBackgroundColor, defaultTheme.menuitemFocusBackgroundColor);
+
+ updateStyle('$focusBorderColor', config.focusBorderColor, theme.focusBorderColor, defaultTheme.focusBorderColor);
+
+ updateStyle('$buttonTextColor', config.buttonTextColor, theme.buttonTextColor, defaultTheme.buttonTextColor);
+ updateStyle('$buttonBackgroundColor', config.buttonBackgroundColor, theme.buttonBackgroundColor, defaultTheme.buttonBackgroundColor);
+
+ updateStyle('$zIndex', config.zIndex, theme.zIndex, defaultTheme.zIndex);
+
+ }
+
+ /*
+ * @function enderStyleElement
+ *
+ * @desc Updates the style sheet template and then attaches it to the document
+ *
+ * @param {Object} colorThemes - Object with theme information
+ * @param {Object} config - Configuration information object
+ * @param {String} skipYToStyleId - Id used for the skipto container element
+ */
+ function renderStyleElement (colorThemes, config, skipToId) {
+ styleTemplate.innerHTML = styleTemplate.innerHTML.replaceAll('$skipToId', '#' + skipToId);
+ addCSSColors(colorThemes, config);
+ const styleNode = styleTemplate.content.cloneNode(true);
+ styleNode.id = `${skipToId}-style`;
+ const headNode = document.getElementsByTagName('head')[0];
+ headNode.appendChild(styleNode);
+ }
+
+ /* utils.js */
+
+ /* Constants */
+ const debug$4 = new DebugLogging('Utils', false);
+ debug$4.flag = false;
+
+
+ /*
+ * @function getAttributeValue
+ *
+ * @desc Return attribute value if present on element,
+ * otherwise return empty string.
+ *
+ * @returns {String} see @desc
+ */
+ function getAttributeValue (element, attribute) {
+ let value = element.getAttribute(attribute);
+ return (value === null) ? '' : normalize(value);
+ }
+
+ /*
+ * @function normalize
+ *
+ * @desc Trim leading and trailing whitespace and condense all
+ * internal sequences of whitespace to a single space. Adapted from
+ * Mozilla documentation on String.prototype.trim polyfill. Handles
+ * BOM and NBSP characters.
+ *
+ * @return {String} see @desc
+ */
+ function normalize (s) {
+ let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+ return s.replace(rtrim, '').replace(/\s+/g, ' ');
+ }
+
+ /**
+ * @fuction isNotEmptyString
+ *
+ * @desc Returns true if the string has content, otherwise false
+ *
+ * @param {Boolean} see @desc
+ */
+ function isNotEmptyString (str) {
+ return (typeof str === 'string') && str.length && str.trim() && str !== " ";
+ }
+
+ /**
+ * @fuction isVisible
+ *
+ * @desc Returns true if the element is visible in the graphical rendering
+ *
+ * @param {node} elem - DOM element node of a labelable element
+ */
+ function isVisible (element) {
+
+ function isDisplayNone(el) {
+ if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
+ return false;
+ }
+
+ if (el.hasAttribute('hidden')) {
+ return true;
+ }
+
+ const style = window.getComputedStyle(el, null);
+ const display = style.getPropertyValue("display");
+ if (display === 'none') {
+ return true;
+ }
+
+ // check ancestors for display none
+ if (el.parentNode) {
+ return isDisplayNone(el.parentNode);
+ }
+
+ return false;
+ }
+
+ const computedStyle = window.getComputedStyle(element);
+ let visibility = computedStyle.getPropertyValue('visibility');
+ if ((visibility === 'hidden') || (visibility === 'collapse')) {
+ return false;
+ }
+
+ return !isDisplayNone(element);
+ }
+
+ /*
+ * namefrom.js
+ */
+
+ /* constants */
+
+ const debug$3 = new DebugLogging('nameFrom', false);
+ debug$3.flag = false;
+
+ //
+ // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
+
+ /*
+ * @function isDisplayNone
+ *
+ * @desc Returns true if the element or parent element has set the CSS
+ * display property to none or has the hidden attribute,
+ * otherwise false
+ *
+ * @param {Object} node - a DOM node
+ *
+ * @returns {Boolean} see @desc
+ */
+
+ function isDisplayNone (node) {
+
+ if (!node) {
+ return false;
+ }
+
+ if (node.nodeType === Node.TEXT_NODE) {
+ node = node.parentNode;
+ }
+
+ if (node.nodeType === Node.ELEMENT_NODE) {
+
+ if (node.hasAttribute('hidden')) {
+ return true;
+ }
+
+ // aria-hidden attribute with the value "true" is an same as
+ // setting the hidden attribute for name calcuation
+ if (node.hasAttribute('aria-hidden')) {
+ if (node.getAttribute('aria-hidden').toLowerCase() === 'true') {
+ return true;
+ }
+ }
+
+ const style = window.getComputedStyle(node, null);
+
+ const display = style.getPropertyValue("display");
+
+ if (display) {
+ return display === 'none';
+ }
+ }
+ return false;
+ }
+
+ /*
+ * @function isVisibilityHidden
+ *
+ * @desc Returns true if the node (or it's parrent) has the CSS visibility
+ * property set to "hidden" or "collapse", otherwise false
+ *
+ * @param {Object} node - DOM node
+ *
+ * @return see @desc
+ */
+
+ function isVisibilityHidden(node) {
+
+ if (!node) {
+ return false;
+ }
+
+ if (node.nodeType === Node.TEXT_NODE) {
+ node = node.parentNode;
+ }
+
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ const style = window.getComputedStyle(node, null);
+
+ const visibility = style.getPropertyValue("visibility");
+ if (visibility) {
+ return (visibility === 'hidden') || (visibility === 'collapse');
+ }
+ }
+ return false;
+ }
+
+ /*
+ * @function isAriaHiddenFalse
+ *
+ * @desc Returns true if the node has the aria-hidden property set to
+ * "false", otherwise false.
+ * NOTE: This function is important in the accessible namce
+ * calculation, since content hidden with a CSS technique
+ * can be included in the accessible name calculation when
+ * aria-hidden is set to false
+ *
+ * @param {Object} node - DOM node
+ *
+ * @return see @desc
+ */
+
+ function isAriaHIddenFalse(node) {
+
+ if (!node) {
+ return false;
+ }
+
+ if (node.nodeType === Node.TEXT_NODE) {
+ node = node.parentNode;
+ }
+
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ return (node.hasAttribute('aria-hidden') &&
+ (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
+ }
+
+ return false;
+ }
+
+ /*
+ * @function includeContentInName
+ *
+ * @desc Checks the CSS display and hidden properties, and
+ * the aria-hidden property to see if the content
+ * should be included in the accessible name
+ * calculation. Returns true if it should be
+ * included, otherwise false
+ *
+ * @param {Object} node - DOM node
+ *
+ * @return see @desc
+ */
+
+ function includeContentInName(node) {
+ const flag = isAriaHIddenFalse(node) ||
+ (!isVisibilityHidden(node) &&
+ !isDisplayNone(node));
+ return flag;
+ }
+
+ /*
+ * @function getNodeContents
+ *
+ * @desc Recursively process element and text nodes by aggregating
+ * their text values for an ARIA accessible name or description
+ * calculation.
+ *
+ * NOTE: This includes special handling of elements with 'alt'
+ * text and embedded controls.
+ *
+ * @param {Object} node - A DOM node
+ *
+ * @return {String} The text content for an accessible name or description
+ */
+ function getNodeContents (node) {
+ let contents = '';
+ let nc;
+ let arr = [];
+
+ switch (node.nodeType) {
+ case Node.ELEMENT_NODE:
+ // If aria-label is present, node recursion stops and
+ // aria-label value is returned
+ if (node.hasAttribute('aria-label')) {
+ if (includeContentInName(node)) {
+ contents = node.getAttribute('aria-label');
+ }
+ }
+ else {
+ if (node instanceof HTMLSlotElement) {
+ // if no slotted elements, check for default slotted content
+ const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
+ assignedNodes.forEach( assignedNode => {
+ nc = getNodeContents(assignedNode);
+ if (nc.length) arr.push(nc);
+ });
+ contents = (arr.length) ? arr.join(' ') : '';
+ } else {
+ if (couldHaveAltText(node) && includeContentInName(node)) {
+ contents = getAttributeValue(node, 'alt');
+ }
+ else {
+ if (node.hasChildNodes()) {
+ let children = Array.from(node.childNodes);
+ children.forEach( child => {
+ nc = getNodeContents(child);
+ if (nc.length) arr.push(nc);
+ });
+ contents = (arr.length) ? arr.join(' ') : '';
+ }
+ }
+ // For all branches of the ELEMENT_NODE case...
+ }
+ }
+ contents = addCssGeneratedContent(node, contents);
+ break;
+
+ case Node.TEXT_NODE:
+ if (includeContentInName(node)) {
+ contents = normalize(node.textContent);
+ }
+ break;
+ }
+
+ return contents;
+ }
+
+ /*
+ * @function couldHaveAltText
+ *
+ * @desc Based on HTML5 specification, returns true if
+ * the element could have an 'alt' attribute,
+ * otherwise false.
+ *
+ * @param {Object} element - DOM eleemnt node
+ *
+ * @return {Boolean} see @desc
+ */
+ function couldHaveAltText (element) {
+ let tagName = element.tagName.toLowerCase();
+
+ switch (tagName) {
+ case 'img':
+ case 'area':
+ return true;
+ case 'input':
+ return (element.type && element.type === 'image');
+ }
+
+ return false;
+ }
+
+ /*
+ * @function addCssGeneratedContent
+ *
+ * @desc Adds CSS-generated content for pseudo-elements
+ * :before and :after. According to the CSS spec, test that content
+ * value is other than the default computed value of 'none'.
+ *
+ * Note: Even if an author specifies content: 'none', because browsers
+ * add the double-quote character to the beginning and end of
+ * computed string values, the result cannot and will not be
+ * equal to 'none'.
+ *
+ *
+ * @param {Object} element - DOM node element
+ * @param {String} contents - Text content for DOM node
+ *
+ * @returns {String} see @desc
+ *
+ */
+ function addCssGeneratedContent (element, contents) {
+
+ let result = contents,
+ prefix = getComputedStyle(element, ':before').content,
+ suffix = getComputedStyle(element, ':after').content;
+
+ if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
+ result = prefix.substring(1, (prefix.length-1)) + result;
+ }
+
+ if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
+ result = result + suffix.substring(1, (suffix.length-1)) ;
+ }
+
+ return result;
+ }
+
+ /* accName.js */
+
+ /* Constants */
+ const debug$2 = new DebugLogging('accName', false);
+ debug$2.flag = false;
+
+ /**
+ * @fuction getAccessibleName
+ *
+ * @desc Returns the accessible name for an heading or landamrk
+ *
+ * @paramn {Object} dom - Document of the current element
+ * @param {node} element - DOM element node for either a heading or
+ * landmark
+ * @param {Boolean} fromContent - if true will compute name from content
+ *
+ * @return {String} The accessible name for the landmark or heading element
+ */
+
+ function getAccessibleName (doc, element, fromContent=false) {
+ let accName = '';
+
+ accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
+
+ if (accName === '' && element.hasAttribute('aria-label')) {
+ accName = element.getAttribute('aria-label').trim();
+ }
+
+ if (accName === '' && fromContent) {
+ accName = getNodeContents(element);
+ }
+
+ if (accName === '' && element.title.trim() !== '') {
+ accName = element.title.trim();
+ }
+
+ return accName;
+ }
+
+ /*
+ * @function nameFromAttributeIdRefs
+ *
+ * @desc Get the value of attrName on element (a space-
+ * separated list of IDREFs), visit each referenced element in the order it
+ * appears in the list and obtain its accessible name (skipping recursive
+ * aria-labelledby or aria-describedby calculations), and return an object
+ * with name property set to a string that is a space-separated concatena-
+ * tion of those results if any, otherwise return empty string.
+ *
+ * @param {Object} doc - Browser document object
+ * @param {Object} element - DOM element node
+ * @param {String} attribute - Attribute name (e.g. "aria-labelledby", "aria-describedby",
+ * or "aria-errormessage")
+ *
+ * @returns {String} see @desc
+ */
+ function nameFromAttributeIdRefs (doc, element, attribute) {
+ const value = getAttributeValue(element, attribute);
+ const arr = [];
+
+ if (value.length) {
+ const idRefs = value.split(' ');
+
+ for (let i = 0; i < idRefs.length; i++) {
+ const refElement = doc.getElementById(idRefs[i]);
+ if (refElement) {
+ const accName = getNodeContents(refElement);
+ if (accName && accName.length) arr.push(accName);
+ }
+ }
+ }
+
+ if (arr.length) {
+ return arr.join(' ');
+ }
+
+ return '';
+ }
+
+ /* landmarksHeadings.js */
+
+ /* Constants */
+ const debug$1 = new DebugLogging('landmarksHeadings', false);
+ debug$1.flag = false;
+
+ const skipableElements = [
+ 'base',
+ 'content',
+ 'frame',
+ 'iframe',
+ 'input[type=hidden]',
+ 'link',
+ 'meta',
+ 'noscript',
+ 'script',
+ 'style',
+ 'template',
+ 'shadow',
+ 'title'
+ ];
+
+ const allowedLandmarkSelectors = [
+ 'banner',
+ 'complementary',
+ 'contentinfo',
+ 'form',
+ 'main',
+ 'navigation',
+ 'region',
+ 'search'
+ ];
+
+ const higherLevelElements = [
+ 'article',
+ 'aside',
+ 'footer',
+ 'header',
+ 'main',
+ 'nav',
+ 'region',
+ 'section'
+ ];
+
+
+ let idIndex = 0;
+
+ /*
+ * @function getSkipToIdIndex
+ *
+ * @desc Returns the current skipto index used for generating
+ * id for target elements
+ *
+ * @returns {Number} see @desc
+ */
+ function getSkipToIdIndex () {
+ return idIndex;
+ }
+
+ /*
+ * @function incSkipToIdIndex
+ *
+ * @desc Adds one to the skipto index
+ */
+ function incSkipToIdIndex () {
+ idIndex += 1;
+ }
+
+ /*
+ * @function isSkipableElement
+ *
+ * @desc Returns true if the element is skipable, otherwise false
+ *
+ * @param {Object} element - DOM element node
+ *
+ * @returns {Boolean} see @desc
+ */
+ function isSkipableElement(element) {
+ const tagName = element.tagName.toLowerCase();
+ const type = element.hasAttribute('type') ? element.getAttribute('type') : '';
+ const elemSelector = (tagName === 'input') && type.length ?
+ `${tagName}[type=${type}]` :
+ tagName;
+ return skipableElements.includes(elemSelector);
+ }
+
+ /*
+ * @function isCustomElement
+ *
+ * @desc Reuturns true if the element is a custom element, otherwise
+ * false
+ *
+ * @param {Object} element - DOM element node
+ *
+ * @returns {Boolean} see @desc
+ */
+ function isCustomElement(element) {
+ return element.tagName.indexOf('-') >= 0;
+ }
+
+ /*
+ * @function sSlotElement
+ *
+ * @desc Reuturns true if the element is a slot element, otherwise
+ * false
+ *
+ * @param {Object} element - DOM element node
+ *
+ * @returns {Boolean} see @desc
+ */
+ function isSlotElement(node) {
+ return (node instanceof HTMLSlotElement);
+ }
+
+ /**
+ * @function isTopLevel
+ *
+ * @desc Tests the node to see if it is in the content of any other
+ * elements with default landmark roles or is the descendant
+ * of an element with a defined landmark role
+ *
+ * @param {Object} node - Element node from a berowser DOM
+ *
+ * @reutrn {Boolean} Returns true if top level landmark, otherwise false
+ */
+
+ function isTopLevel (node) {
+ node = node && node.parentNode;
+ while (node && (node.nodeType === Node.ELEMENT_NODE)) {
+ const tagName = node.tagName.toLowerCase();
+ let role = node.getAttribute('role');
+ if (role) {
+ role = role.toLowerCase();
+ }
+
+ if (higherLevelElements.includes(tagName) ||
+ allowedLandmarkSelectors.includes(role)) {
+ return false;
+ }
+ node = node.parentNode;
+ }
+ return true;
+ }
+
+ /*
+ * @function checkForLandmark
+ *
+ * @desc Re=trns the lamdnark name if a landmark, otherwise an
+ * empty string
+ *
+ * @param {Object} element - DOM element node
+ *
+ * @returns {String} see @desc
+ */
+ function checkForLandmark (element) {
+ if (element.hasAttribute('role')) {
+ const role = element.getAttribute('role').toLowerCase();
+ if (allowedLandmarkSelectors.indexOf(role) >= 0) {
+ return role;
+ }
+ } else {
+ const tagName = element.tagName.toLowerCase();
+
+ switch (tagName) {
+ case 'aside':
+ return 'complementary';
+
+ case 'main':
+ return 'main';
+
+ case 'nav':
+ return 'navigation';
+
+ case 'header':
+ if (isTopLevel(element)) {
+ return 'banner';
+ }
+ break;
+
+ case 'footer':
+ if (isTopLevel(element)) {
+ return 'contentinfo';
+ }
+ break;
+
+ case 'section':
+ // Sections need an accessible name for be considered a "region" landmark
+ if (element.hasAttribute('aria-label') || element.hasAttribute('aria-labelledby')) {
+ return 'region';
+ }
+ break;
+ }
+ }
+ return '';
+ }
+
+
+ /**
+ * @function queryDOMForSkipToId
+ *
+ * @desc Returns DOM node associated with the id, if id not found returns null
+ *
+ * @param {String} targetId - dom node element to attach button and menu
+ *
+ * @returns (Object) @desc
+ */
+ function queryDOMForSkipToId (targetId) {
+ function transverseDOMForSkipToId(startingNode) {
+ var targetNode = null;
+ for (let node = startingNode.firstChild; node !== null; node = node.nextSibling ) {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (node.getAttribute('data-skip-to-id') === targetId) {
+ return node;
+ }
+ if (!isSkipableElement(node)) {
+ // check for slotted content
+ if (isSlotElement(node)) {
+ // if no slotted elements, check for default slotted content
+ const assignedNodes = node.assignedNodes().length ?
+ node.assignedNodes() :
+ node.assignedNodes({ flatten: true });
+ for (let i = 0; i < assignedNodes.length; i += 1) {
+ const assignedNode = assignedNodes[i];
+ if (assignedNode.nodeType === Node.ELEMENT_NODE) {
+ if (assignedNode.getAttribute('data-skip-to-id') === targetId) {
+ return assignedNode;
+ }
+ targetNode = transverseDOMForSkipToId(assignedNode);
+ if (targetNode) {
+ return targetNode;
+ }
+ }
+ }
+ } else {
+ // check for custom elements
+ if (isCustomElement(node)) {
+ if (node.shadowRoot) {
+ targetNode = transverseDOMForSkipToId(node.shadowRoot);
+ if (targetNode) {
+ return targetNode;
+ }
+ }
+ } else {
+ targetNode = transverseDOMForSkipToId(node);
+ if (targetNode) {
+ return targetNode;
+ }
+ }
+ }
+ }
+ } // end if
+ } // end for
+ return false;
+ } // end function
+ return transverseDOMForSkipToId(document.body);
+ }
+
+ /**
+ * @function findVisibleElement
+ *
+ * @desc Returns the first isible decsendant DOM node that matches a set of element tag names
+ *
+ * @param {node} startingNode - dom node to start search for element
+ * @param {Array} tagNames - Array of tag names
+ *
+ * @returns (node} Returns first descendmt element, if not found returns false
+ */
+ function findVisibleElement (startingNode, tagNames) {
+
+ function transverseDOMForVisibleElement(startingNode, targetTagName) {
+ var targetNode = null;
+ for (let node = startingNode.firstChild; node !== null; node = node.nextSibling ) {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ if (!isSkipableElement(node)) {
+ // check for slotted content
+ if (isSlotElement(node)) {
+ // if no slotted elements, check for default slotted content
+ const assignedNodes = node.assignedNodes().length ?
+ node.assignedNodes() :
+ node.assignedNodes({ flatten: true });
+ for (let i = 0; i < assignedNodes.length; i += 1) {
+ const assignedNode = assignedNodes[i];
+ if (assignedNode.nodeType === Node.ELEMENT_NODE) {
+ const tagName = assignedNode.tagName.toLowerCase();
+ if (tagName === targetTagName){
+ if (isVisible(assignedNode)) {
+ return assignedNode;
+ }
+ }
+ targetNode = transverseDOMForVisibleElement(assignedNode, targetTagName);
+ if (targetNode) {
+ return targetNode;
+ }
+ }
+ }
+ } else {
+ // check for custom elements
+ if (isCustomElement(node)) {
+ if (node.shadowRoot) {
+ targetNode = transverseDOMForVisibleElement(node.shadowRoot, targetTagName);
+ if (targetNode) {
+ return targetNode;
+ }
+ }
+ } else {
+ const tagName = node.tagName.toLowerCase();
+ if (tagName === targetTagName){
+ if (isVisible(node)) {
+ return node;
+ }
+ }
+ targetNode = transverseDOMForVisibleElement(node, targetTagName);
+ if (targetNode) {
+ return targetNode;
+ }
+ }
+ }
+ }
+ } // end if
+ } // end for
+ return false;
+ } // end function
+ let targetNode = false;
+
+ // Go through the tag names one at a time
+ for (let i = 0; i < tagNames.length; i += 1) {
+ targetNode = transverseDOMForVisibleElement(startingNode, tagNames[i]);
+ if (targetNode) {
+ break;
+ }
+ }
+ return targetNode ? targetNode : startingNode;
+ }
+
+ /*
+ * @function skipToElement
+ *
+ * @desc Moves focus to the element identified by the memu item
+ *
+ * @param {Object} menutim - DOM element in the menu identifying the target element.
+ */
+ function skipToElement(menuitem) {
+
+ let focusNode = false;
+ let scrollNode = false;
+ let elem;
+
+ const searchSelectors = ['input', 'button', 'a'];
+ const navigationSelectors = ['a', 'input', 'button'];
+ const landmarkSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'section', 'article', 'p', 'li', 'a'];
+
+ const isLandmark = menuitem.classList.contains('landmark');
+ const isSearch = menuitem.classList.contains('skip-to-search');
+ const isNav = menuitem.classList.contains('skip-to-nav');
+
+ elem = queryDOMForSkipToId(menuitem.getAttribute('data-id'));
+
+ if (elem) {
+ if (isSearch) {
+ focusNode = findVisibleElement(elem, searchSelectors);
+ }
+ if (isNav) {
+ focusNode = findVisibleElement(elem, navigationSelectors);
+ }
+ if (focusNode && isVisible(focusNode)) {
+ if (focusNode.tabIndex >= 0) {
+ focusNode.focus();
+ } else {
+ focusNode.tabIndex = 0;
+ focusNode.focus();
+ focusNode.tabIndex = -1;
+ }
+ focusNode.scrollIntoView({block: 'center'});
+ }
+ else {
+ if (isLandmark) {
+ scrollNode = findVisibleElement(elem, landmarkSelectors);
+ if (scrollNode) {
+ elem = scrollNode;
+ }
+ }
+ if (elem.tabIndex >= 0) {
+ elem.focus();
+ } else {
+ elem.tabIndex = 0;
+ elem.focus();
+ elem.tabIndex = -1;
+ }
+ elem.scrollIntoView({block: 'center'});
+ }
+ }
+ }
+
+ /*
+ * @function getHeadingTargets
+ *
+ * @desc Returns an array of heading tag names to include in menu
+ * NOTE: It uses "includes" method to maximimze compatibility with
+ * previous versions of SkipTo which used CSS selectors for
+ * identifying targets.
+ *
+ * @param {String} targets - A space with the heading tags to inclucde
+ *
+ * @returns {Array} Array of heading element tag names to include in menu
+ */
+ function getHeadingTargets(targets) {
+ let targetHeadings = [];
+ ['h1','h2','h3','h4','h5','h6'].forEach( h => {
+ if (targets.includes(h)) {
+ targetHeadings.push(h);
+ }
+ });
+ return targetHeadings;
+ }
+
+ /*
+ * @function isMain
+ *
+ * @desc Returns true if the element is a main landamrk
+ *
+ * @param {Object} element - DOM element node
+ *
+ * @returns {Boolean} see @desc
+ */
+ function isMain (element) {
+ const tagName = element.tagName.toLowerCase();
+ const role = element.hasAttribute('role') ? element.getAttribute('role').toLowerCase() : '';
+ return (tagName === 'main') || (role === 'main');
+ }
+
+ /*
+ * @function queryDOMForLandmarksAndHeadings
+ *
+ * @desc Recursive function to return two arrays, one an array of the DOM element nodes for
+ * landmarks and the other an array of DOM element ndoes for headings
+ *
+ * @param {Array} landamrkTargets - An array of strings representing landmark regions
+ * @param {Array} headingTargets - An array of strings representing headings
+ * @param {String} skiptoId - An array of strings representing headings
+ *
+ * @returns {Array} @see @desc
+ */
+ function queryDOMForLandmarksAndHeadings (landmarkTargets, headingTargets, skiptoId) {
+ let headingInfo = [];
+ let landmarkInfo = [];
+ let targetLandmarks = getLandmarkTargets(landmarkTargets.toLowerCase());
+ let targetHeadings = getHeadingTargets(headingTargets.toLowerCase());
+ let onlyInMain = headingTargets.includes('main');
+
+ function transverseDOM(startingNode, doc, parentDoc=null, inMain = false) {
+ for (let node = startingNode.firstChild; node !== null; node = node.nextSibling ) {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ const tagName = node.tagName.toLowerCase();
+ if ((targetLandmarks.indexOf(checkForLandmark(node)) >= 0) &&
+ (node.id !== skiptoId)) {
+ landmarkInfo.push({ node: node, name: getAccessibleName(doc, node)});
+ }
+ if (targetHeadings.indexOf(tagName) >= 0) {
+ if (!onlyInMain || inMain) {
+ headingInfo.push({ node: node, name: getAccessibleName(doc, node, true)});
+ }
+ }
+
+ if (isMain(node)) {
+ inMain = true;
+ }
+
+ if (!isSkipableElement(node)) {
+ // check for slotted content
+ if (isSlotElement(node)) {
+ // if no slotted elements, check for default slotted content
+ const slotContent = node.assignedNodes().length > 0;
+ const assignedNodes = slotContent ?
+ node.assignedNodes() :
+ node.assignedNodes({ flatten: true });
+ const nameDoc = slotContent ?
+ parentDoc :
+ doc;
+ for (let i = 0; i < assignedNodes.length; i += 1) {
+ const assignedNode = assignedNodes[i];
+ if (assignedNode.nodeType === Node.ELEMENT_NODE) {
+ const tagName = assignedNodes[i].tagName.toLowerCase();
+ if (targetLandmarks.indexOf(checkForLandmark(assignedNode)) >= 0) {
+ landmarkInfo.push({ node: assignedNode, name: getAccessibleName(nameDoc, assignedNode)});
+ }
+
+ if (targetHeadings.indexOf(tagName) >= 0) {
+ if (!onlyInMain || inMain) {
+ headingInfo.push({ node: assignedNode, name: getAccessibleName(nameDoc, assignedNode, true)});
+ }
+ }
+ if (slotContent) {
+ transverseDOM(assignedNode, parentDoc, null, inMain);
+ } else {
+ transverseDOM(assignedNode, doc, parentDoc, inMain);
+ }
+ }
+ }
+ } else {
+ // check for custom elements
+ if (isCustomElement(node)) {
+ if (node.shadowRoot) {
+ transverseDOM(node.shadowRoot, node.shadowRoot, doc, inMain);
+ }
+ } else {
+ transverseDOM(node, doc, parentDoc, inMain);
+ }
+ }
+ }
+ } // end if
+ } // end for
+ } // end function
+
+ transverseDOM(document.body, document);
+
+ // If no elements found when onlyInMain is set, try
+ // to find any headings
+ if ((headingInfo.length === 0) && onlyInMain) {
+ onlyInMain = false;
+ landmarkInfo = [];
+ transverseDOM(document.body, document);
+ if (headingInfo.length === 0) {
+ console.warn(`[skipTo.js]: no headings found on page`);
+ }
+ else {
+ console.warn(`[skipTo.js]: no headings found in main landmark, but ${headingInfo.length} found in page.`);
+ }
+ }
+
+ if (landmarkInfo.length === 0) {
+ console.warn(`[skipTo.js]: no landmarks found on page`);
+ }
+
+
+ return [landmarkInfo, headingInfo];
+ }
+
+ /*
+ * @function getLandmarksAndHeadings
+ *
+ * @desc Returns two arrays of of DOM node elements with, one for landmark regions
+ * the other for headings with additional information needed to create
+ * menuitems
+ *
+ * @param {Object} config - Object with configuration information
+ *
+ * @return see @desc
+ */
+
+ function getLandmarksAndHeadings (config, skiptoId) {
+
+ let landmarkTargets = config.landmarks;
+ if (typeof landmarkTargets !== 'string') {
+ console.warn(`[skipto.js]: Error in landmark configuration`);
+ landmarkTargets = 'main search navigation';
+ }
+
+ let headingTargets = config.headings;
+ // If targets undefined, use default settings
+ if (typeof headingTargets !== 'string') {
+ console.warn(`[skipto.js]: Error in heading configuration`);
+ headingTargets = 'h1 h2';
+ }
+
+ const [landmarks, headings] = queryDOMForLandmarksAndHeadings(landmarkTargets, headingTargets, skiptoId);
+
+ return [getLandmarks(config, landmarks), getHeadings(config, headings)];
+ }
+
+ /*
+ * @function getHeadings
+ *
+ * @desc Returns an array of heading menu elements
+ *
+ * @param {Object} config - Object with configuration information
+ * @param {Object} headings - Array of dome node elements that are headings
+ *
+ * @returns see @desc
+ */
+ function getHeadings (config, headings) {
+ let dataId, level;
+ let headingElementsArr = [];
+
+ for (let i = 0, len = headings.length; i < len; i += 1) {
+ let heading = headings[i];
+ let role = heading.node.getAttribute('role');
+ if ((typeof role === 'string') && (role === 'presentation')) continue;
+ if (isVisible(heading.node) && isNotEmptyString(heading.node.innerHTML)) {
+ if (heading.node.hasAttribute('data-skip-to-id')) {
+ dataId = heading.node.getAttribute('data-skip-to-id');
+ } else {
+ dataId = getSkipToIdIndex();
+ heading.node.setAttribute('data-skip-to-id', dataId);
+ }
+ level = heading.node.tagName.substring(1);
+ const headingItem = {};
+ headingItem.dataId = dataId.toString();
+ headingItem.class = 'heading';
+ headingItem.name = heading.name;
+ headingItem.ariaLabel = headingItem.name + ', ';
+ headingItem.ariaLabel += config.headingLevelLabel + ' ' + level;
+ headingItem.tagName = heading.node.tagName.toLowerCase();
+ headingItem.role = 'heading';
+ headingItem.level = level;
+ headingElementsArr.push(headingItem);
+ incSkipToIdIndex();
+ }
+ }
+ return headingElementsArr;
+ }
+
+ /*
+ * @function getLocalizedLandmarkName
+ *
+ * @desc Localizes a landmark name and adds accessible name if defined
+ *
+ * @param {Object} config - Object with configuration information
+ * @param {String} tagName - String with landamrk and/or tag names
+ * @param {String} AccName - Accessible name for therlandmark, maybe an empty string
+ *
+ * @returns {String} A localized string for a landmark name
+ */
+ function getLocalizedLandmarkName (config, tagName, accName) {
+ let n;
+ switch (tagName) {
+ case 'aside':
+ n = config.asideLabel;
+ break;
+ case 'footer':
+ n = config.footerLabel;
+ break;
+ case 'form':
+ n = config.formLabel;
+ break;
+ case 'header':
+ n = config.headerLabel;
+ break;
+ case 'main':
+ n = config.mainLabel;
+ break;
+ case 'nav':
+ n = config.navLabel;
+ break;
+ case 'section':
+ case 'region':
+ n = config.regionLabel;
+ break;
+ case 'search':
+ n = config.searchLabel;
+ break;
+ // When an ID is used as a selector, assume for main content
+ default:
+ n = tagName;
+ break;
+ }
+ if (isNotEmptyString(accName)) {
+ n += ': ' + accName;
+ }
+ return n;
+ }
+
+ /*
+ * @function getLandmarkTargets
+ *
+ * @desc Analyzes a configuration string for landamrk and tag names
+ * NOTE: This function is included to maximize compatibility
+ * with confiuguration strings that use CSS selectors
+ * in previous versions of SkipTo
+ *
+ * @param {String} targets - String with landamrk and/or tag names
+ *
+ * @returns {Array} A normailized array of landmark names based on target configuration
+ */
+ function getLandmarkTargets (targets) {
+ let targetLandmarks = [];
+ targets = targets.toLowerCase();
+ if (targets.includes('main')) {
+ targetLandmarks.push('main');
+ }
+ if (targets.includes('search')) {
+ targetLandmarks.push('search');
+ }
+ if (targets.includes('nav')) {
+ targetLandmarks.push('navigation');
+ }
+ if (targets.includes('complementary') ||
+ targets.includes('aside')) {
+ targetLandmarks.push('complementary');
+ }
+ if (targets.includes('banner') ||
+ targets.includes('header')) {
+ targetLandmarks.push('banner');
+ }
+ if (targets.includes('contentinfo') ||
+ targets.includes('footer')) {
+ targetLandmarks.push('contentinfo');
+ }
+ if (targets.includes('region') ||
+ targets.includes('section')) {
+ targetLandmarks.push('region');
+ }
+ return targetLandmarks;
+ }
+
+
+ /*
+ * @function getLandmarks
+ *
+ * @desc Returns an array of objects with information to build the
+ * the landmarks menu, ordering in the array by the type of landmark
+ * region
+ *
+ * @param {Object} config - Object with configuration information
+ * @param {Array} landmarks - Array of objects containing the DOM node and
+ * accessible name for landmarks
+ *
+ * @returns {Array} see @desc
+ */
+ function getLandmarks(config, landmarks) {
+ let mainElements = [];
+ let searchElements = [];
+ let navElements = [];
+ let asideElements = [];
+ let footerElements = [];
+ let regionElements = [];
+ let otherElements = [];
+ let dataId = '';
+ for (let i = 0, len = landmarks.length; i < len; i += 1) {
+ let landmark = landmarks[i];
+ if (landmark.node.id === 'id-skip-to') {
+ continue;
+ }
+ let role = landmark.node.getAttribute('role');
+ let tagName = landmark.node.tagName.toLowerCase();
+ if ((typeof role === 'string') && (role === 'presentation')) continue;
+ if (isVisible(landmark.node)) {
+ if (!role) role = tagName;
+ // normalize tagNames
+ switch (role) {
+ case 'banner':
+ tagName = 'header';
+ break;
+ case 'complementary':
+ tagName = 'aside';
+ break;
+ case 'contentinfo':
+ tagName = 'footer';
+ break;
+ case 'form':
+ tagName = 'form';
+ break;
+ case 'main':
+ tagName = 'main';
+ break;
+ case 'navigation':
+ tagName = 'nav';
+ break;
+ case 'region':
+ tagName = 'section';
+ break;
+ case 'search':
+ tagName = 'search';
+ break;
+ }
+ // if using ID for selectQuery give tagName as main
+ if (['aside', 'footer', 'form', 'header', 'main', 'nav', 'section', 'search'].indexOf(tagName) < 0) {
+ tagName = 'main';
+ }
+ if (landmark.node.hasAttribute('aria-roledescription')) {
+ tagName = landmark.node.getAttribute('aria-roledescription').trim().replace(' ', '-');
+ }
+ if (landmark.node.hasAttribute('data-skip-to-id')) {
+ dataId = landmark.node.getAttribute('data-skip-to-id');
+ } else {
+ dataId = getSkipToIdIndex();
+ landmark.node.setAttribute('data-skip-to-id', dataId);
+ }
+ const landmarkItem = {};
+ landmarkItem.dataId = dataId.toString();
+ landmarkItem.class = 'landmark';
+ landmarkItem.hasName = landmark.name.length > 0;
+ landmarkItem.name = getLocalizedLandmarkName(config, tagName, landmark.name);
+ landmarkItem.tagName = tagName;
+ landmarkItem.nestingLevel = 0;
+ incSkipToIdIndex();
+
+ // For sorting landmarks into groups
+ switch (tagName) {
+ case 'main':
+ mainElements.push(landmarkItem);
+ break;
+ case 'search':
+ searchElements.push(landmarkItem);
+ break;
+ case 'nav':
+ navElements.push(landmarkItem);
+ break;
+ case 'aside':
+ asideElements.push(landmarkItem);
+ break;
+ case 'footer':
+ footerElements.push(landmarkItem);
+ break;
+ case 'section':
+ // Regions must have accessible name to be included
+ if (landmarkItem.hasName) {
+ regionElements.push(landmarkItem);
+ }
+ break;
+ default:
+ otherElements.push(landmarkItem);
+ break;
+ }
+ }
+ }
+ return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements);
+ }
+
+ /* skiptoMenuButton.js */
+
+ /* Constants */
+ const debug = new DebugLogging('SkipToButton', false);
+ debug.flag = false;
+
+ /**
+ * @class SkiptoMenuButton
+ *
+ * @desc Constructor for creating a button to open a menu of headings and landmarks on
+ * a web page
+ *
+ * @param {Object} attachNode - DOM eleemnt node to attach button and menu container element
+ *
+ * @returns {Object} DOM element node that is the contatiner for the button and the menu
+ */
+ class SkiptoMenuButton {
+
+ constructor (attachNode, config, id) {
+ this.config = config;
+ this.skiptoId = id;
+
+ this.containerNode = document.createElement(config.containerElement);
+ if (config.containerElement === 'nav') {
+ this.containerNode.setAttribute('aria-label', config.buttonLabel);
+ }
+
+ this.containerNode.id = id;
+
+ if (isNotEmptyString(config.customClass)) {
+ this.containerNode.classList.add(config.customClass);
+ }
+
+ let displayOption = config.displayOption;
+ if (typeof displayOption === 'string') {
+ displayOption = displayOption.trim().toLowerCase();
+ if (displayOption.length) {
+ switch (config.displayOption) {
+ case 'fixed':
+ this.containerNode.classList.add('fixed');
+ break;
+ case 'onfocus': // Legacy option
+ case 'popup':
+ this.containerNode.classList.add('popup');
+ break;
+ }
+ }
+ }
+
+ // Create button
+
+ const [buttonVisibleLabel, buttonAriaLabel] = this.getBrowserSpecificShortcut(config);
+
+ this.buttonNode = document.createElement('button');
+ this.buttonNode.setAttribute('aria-label', buttonAriaLabel);
+ this.buttonNode.addEventListener('keydown', this.handleButtonKeydown.bind(this));
+ this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
+ this.containerNode.appendChild(this.buttonNode);
+
+ this.buttonTextNode = document.createElement('span');
+ this.buttonTextNode.classList.add('text');
+ this.buttonTextNode.textContent = buttonVisibleLabel;
+ this.buttonNode.appendChild(this.buttonTextNode);
+
+ const imageNode = document.createElement('img');
+ imageNode.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABP5JREFUWAm9V11MXEUUnjN7KbuwKD/L8qOp2kpbWCSFpkZN2qIxjQYWaC2JD/4kxsTE1MQHeedBY6K+mPSpJsakhcSgFaQk+qCh1DZRQmioSypVa0q1IKC1bFlw753jN5e9txfobmkBJ1nm3DPnb87fHEhkWGWVBx9QYqFCkSxk4nuFYMpA7jkilkIsMHNCGnI8m9VPl8/3/e0hcMEVAosjTc+wsl5iomcFc75LuTYA4ug7IajDZ+Qfnxw5dsMR5xoQqm0qF/OqgwXXO4cbscOQCwb5npuI9Yxq+bYBJTUHwqaZHMSNN99USjNE4jQoxuD5KeBnBSm+eZ4BYglWsQkhCzKLLWB6DHC1wwEj4j6DaiZHei8ZGmklkx+CwFZOgqalT772+qG67vb2duUwrXUPVzfVKMv6GMbsQm4ETVO8D5mHqHxXNLSQUFcFC23MdSmz9k3Fus+tVeGt+IsjrUFWc2MwokyfS5lTZiQTYndKuY5H33LlYCplv+Xmyq0Ep8PRvI+nYl0TzjngeKiqoQP63lrEzT9sIK5hIFKLhh1I76HKxjal5t4Tc17s6mEtNlQVbZse7f3A5SJx0dWn+D5DsbwmhBvqCpcQQDDb+ChuKmTrauvfy61h4qAhz0x70JJ8PYpUm5aZFaBvRElN9KGiyga2f1UN46W1rcUe+g0BkdwSiWiH1f4TqmocAGKP1oYqGPEZfGDyfN+vG6J9mVDbgNKqaMRkHkQTCtjnTBa8960U8hRyZAxljT4g44IsN1uWyVn6SRJ0dEP4xOzh5rqJTOXsZnf4kcbHlcUn0DhKl0pb2xc8mkC8R5nk11lCdE6M9sa8El0DNFLXqVCJN+GJF3GFbV7CdYK1Z45RoTw8febLWS1ziQFeJeHqlq2CrZ2WEBUkuBBt+p5M9F5eJDgJKfwot3xcBnJoB7yAB3JxoRUPEwX26r6Q1gCHeD32+yOthfNi/mVc4m0ke44tk+jIzOjJN/4XA5xLhKuj+y3FvTBkE7ww5zMKwrYBoUj0VSAr/RR450qs6y+HYSN2tOJuJHpzygtPG7oRmUl1FAhaEAndtN51FBdVNp5A/PGU3uXCs5uKtfseoCq+R14sGsBUbiAmuuxsT6Ahl3tV+SR1YAIY8eLuDObZzf6CGT1MOIsFwcOL7QTtwm/PA87h8j2nuKgvPnv97HL8ar+DlkoMDR1NZqLPaED8z+mz8FBtJgGZzvQIVV7d/OAfP/aMp6PLaABmtxdMqbakY749nuOZlGt+tzncXtjGUBiWItNNCko9RildJlvHWd19CJDbK0NAnOsMJKiIpJFNcmLBGUiY6rz3DIZDTyAJC7y4O4F1Ev52rhsDz5L1qPNFQl0lPRwc+XTwCgqjDD3bkpKfnBrtO+0QredeHGnZycocQB/IQ+EnA5RT6uvv7+dAeHsRFO0BUj/kB3NLtsfmpsbG1lN5KNIYFUp9DuW2R0lS50Ssu9NuQBjNc/5N8BBKDq9WahFdRhccQBx/JhbX8MDNI6SLHcShSbdjggFtALEuwA9zJu2DYrfJ4fBSdl7W7t9/+GLGfYz0LGguzH2GPr03ndz1wEP5KZKB551x3TXAEV5UGW0h4lfwOO3HdbMd/Fp2/fLBu1/B7Z9Mx072emWtMMA5rK9vNy5MDW8zhbUVLsxDqebil5be4VvcETQ9ExL9g3/rf3lqh/9iV1cXZpuV6z8QFu9El3GwrAAAAABJRU5ErkJggg==";
+ imageNode.setAttribute('alt', '');
+ this.buttonNode.appendChild(imageNode);
+
+ // Create menu container
+
+ this.menuNode = document.createElement('div');
+ this.menuNode.id = 'id-skip-to-menu';
+ this.menuNode.setAttribute('role', 'menu');
+ this.menuNode.setAttribute('aria-label', config.menuLabel);
+ this.menuNode.setAttribute('aria-busy', 'true');
+ this.containerNode.appendChild(this.menuNode);
+
+ const landmarkGroupLabelNode = document.createElement('div');
+ landmarkGroupLabelNode.id = 'id-skip-to-menu-landmark-group-label';
+ landmarkGroupLabelNode.setAttribute('role', 'separator');
+ landmarkGroupLabelNode.textContent = this.config.landmarkGroupLabel;
+ this.menuNode.appendChild(landmarkGroupLabelNode);
+
+ this.landmarkGroupNode = document.createElement('div');
+ this.landmarkGroupNode.setAttribute('role', 'group');
+ this.landmarkGroupNode.setAttribute('aria-labelledby', landmarkGroupLabelNode.id);
+ this.landmarkGroupNode.id = '#id-skip-to-menu-landmark-group';
+ this.menuNode.appendChild(this.landmarkGroupNode);
+
+ const headingGroupLabelNode = document.createElement('div');
+ headingGroupLabelNode.id = 'id-skip-to-menu-heading-group-label';
+ headingGroupLabelNode.setAttribute('role', 'separator');
+ headingGroupLabelNode.textContent = this.config.headingGroupLabel;
+ this.menuNode.appendChild(headingGroupLabelNode);
+
+ this.headingGroupNode = document.createElement('div');
+ this.headingGroupNode.setAttribute('role', 'group');
+ this.headingGroupNode.setAttribute('aria-labelledby', headingGroupLabelNode.id);
+ this.headingGroupNode.id = '#id-skip-to-menu-heading-group';
+ this.menuNode.appendChild(this.headingGroupNode);
+
+ this.containerNode.addEventListener('focusin', this.handleFocusin.bind(this));
+ this.containerNode.addEventListener('focusout', this.handleFocusout.bind(this));
+ window.addEventListener('pointerdown', this.handleBackgroundPointerdown.bind(this), true);
+
+ if (this.usesAltKey || this.usesOptionKey) {
+ document.addEventListener(
+ 'keydown',
+ this.handleDocumentKeydown.bind(this)
+ );
+ }
+
+ attachNode.insertBefore(this.containerNode, attachNode.firstElementChild);
+
+ return this.containerNode;
+
+ }
+
+ /*
+ * @method getBrowserSpecificShortcut
+ *
+ * @desc Identifies the operating system and updates labels for
+ * shortcut key to use either the "alt" or the "option"
+ * label
+ *
+ * @param {Object} - SkipTp configure object
+ *
+ * @return {Array} - An array of two strings used for the button label
+ */
+ getBrowserSpecificShortcut (config) {
+ const platform = navigator.platform.toLowerCase();
+ const userAgent = navigator.userAgent.toLowerCase();
+
+ const hasWin = platform.indexOf('win') >= 0;
+ const hasMac = platform.indexOf('mac') >= 0;
+ const hasLinux = platform.indexOf('linux') >= 0 || platform.indexOf('bsd') >= 0;
+ const hasAndroid = userAgent.indexOf('android') >= 0;
+
+ this.usesAltKey = hasWin || (hasLinux && !hasAndroid);
+ this.usesOptionKey = hasMac;
+
+ let label = config.buttonLabel;
+ let ariaLabel = config.buttonLabel;
+ let buttonShortcut;
+
+ // Check to make sure a shortcut key is defined
+ if (config.altShortcut && config.optionShortcut) {
+ if (this.usesAltKey || this.usesOptionKey) {
+ buttonShortcut = config.buttonShortcut.replace(
+ '$key',
+ config.altShortcut
+ );
+ }
+ if (this.usesAltKey) {
+ buttonShortcut = buttonShortcut.replace(
+ '$modifier',
+ config.altLabel
+ );
+ label = label + buttonShortcut;
+ ariaLabel = config.altButtonAriaLabel.replace('$key', config.altShortcut);
+ }
+
+ if (this.usesOptionKey) {
+ buttonShortcut = buttonShortcut.replace(
+ '$modifier',
+ config.optionLabel
+ );
+ label = label + buttonShortcut;
+ ariaLabel = config.optionButtonAriaLabel.replace('$key', config.altShortcut);
+ }
+ }
+ return [label, ariaLabel];
+ }
+
+ /*
+ * @method getFirstChar
+ *
+ * @desc Gets the first character in a menuitem to use as a shortcut key
+ *
+ * @param {Object} menuitem - DOM element node
+ *
+ * @returns {String} see @desc
+ */
+ getFirstChar(menuitem) {
+ const label = menuitem.querySelector('.label');
+ if (label && isNotEmptyString(label.textContent)) {
+ return label.textContent.trim()[0].toLowerCase();
+ }
+ return '';
+ }
+
+ /*
+ * @method getHeadingLevelFromAttribute
+ *
+ * @desc Returns the the heading level of the menu item
+ *
+ * @param {Object} menuitem - DOM element node
+ *
+ * @returns {String} see @desc
+ */
+ getHeadingLevelFromAttribute(menuitem) {
+ if (menuitem.hasAttribute('data-level')) {
+ return menuitem.getAttribute('data-level');
+ }
+ return '';
+ }
+
+ /*
+ * @method updateKeyboardShortCuts
+ *
+ * @desc Updates the keyboard short cuts for the curent menu items
+ */
+ updateKeyboardShortCuts () {
+ let mi;
+ this.firstChars = [];
+ this.headingLevels = [];
+
+ for(let i = 0; i < this.menuitemNodes.length; i += 1) {
+ mi = this.menuitemNodes[i];
+ this.firstChars.push(this.getFirstChar(mi));
+ this.headingLevels.push(this.getHeadingLevelFromAttribute(mi));
+ }
+ }
+
+ /*
+ * @method updateMenuitems
+ *
+ * @desc Updates the menu information with the current manu items
+ * used for menu navgation commands
+ */
+ updateMenuitems () {
+ let menuitemNodes = this.menuNode.querySelectorAll('[role=menuitem');
+
+ this.menuitemNodes = [];
+ for(let i = 0; i < menuitemNodes.length; i += 1) {
+ this.menuitemNodes.push(menuitemNodes[i]);
+ }
+
+ this.firstMenuitem = this.menuitemNodes[0];
+ this.lastMenuitem = this.menuitemNodes[this.menuitemNodes.length-1];
+ this.lastMenuitem.classList.add('last');
+ this.updateKeyboardShortCuts();
+ }
+
+ /*
+ * @method renderMenuitemToGroup
+ *
+ * @desc Renders a menuitem using an information object about the menuitem
+ *
+ * @param {Object} groupNode - DOM element node for the menu group
+ * @param {Object} mi - object with menuitem information
+ */
+ renderMenuitemToGroup (groupNode, mi) {
+ let tagNode, tagNodeChild, labelNode, nestingNode;
+
+ let menuitemNode = document.createElement('div');
+ menuitemNode.setAttribute('role', 'menuitem');
+ menuitemNode.classList.add(mi.class);
+ if (isNotEmptyString(mi.tagName)) {
+ menuitemNode.classList.add('skip-to-' + mi.tagName.toLowerCase());
+ }
+ menuitemNode.setAttribute('data-id', mi.dataId);
+ menuitemNode.tabIndex = -1;
+ if (isNotEmptyString(mi.ariaLabel)) {
+ menuitemNode.setAttribute('aria-label', mi.ariaLabel);
+ }
+
+ // add event handlers
+ menuitemNode.addEventListener('keydown', this.handleMenuitemKeydown.bind(this));
+ menuitemNode.addEventListener('click', this.handleMenuitemClick.bind(this));
+ menuitemNode.addEventListener('pointerenter', this.handleMenuitemPointerenter.bind(this));
+
+ groupNode.appendChild(menuitemNode);
+
+ // add heading level and label
+ if (mi.class.includes('heading')) {
+ if (this.config.enableHeadingLevelShortcuts) {
+ tagNode = document.createElement('span');
+ tagNodeChild = document.createElement('span');
+ tagNodeChild.appendChild(document.createTextNode(mi.level));
+ tagNode.append(tagNodeChild);
+ tagNode.appendChild(document.createTextNode(')'));
+ tagNode.classList.add('level');
+ menuitemNode.append(tagNode);
+ } else {
+ menuitemNode.classList.add('no-level');
+ }
+ menuitemNode.setAttribute('data-level', mi.level);
+ if (isNotEmptyString(mi.tagName)) {
+ menuitemNode.classList.add('skip-to-' + mi.tagName);
+ }
+ }
+
+ // add nesting level for landmarks
+ if (mi.class.includes('landmark')) {
+ menuitemNode.setAttribute('data-nesting', mi.nestingLevel);
+ menuitemNode.classList.add('skip-to-nesting-level-' + mi.nestingLevel);
+
+ if (mi.nestingLevel > 0 && (mi.nestingLevel > this.lastNestingLevel)) {
+ nestingNode = document.createElement('span');
+ nestingNode.classList.add('nesting');
+ menuitemNode.append(nestingNode);
+ }
+ this.lastNestingLevel = mi.nestingLevel;
+ }
+
+ labelNode = document.createElement('span');
+ labelNode.appendChild(document.createTextNode(mi.name));
+ labelNode.classList.add('label');
+ menuitemNode.append(labelNode);
+
+ return menuitemNode;
+ }
+
+ /*
+ * @method renderMenuitemsToGroup
+ *
+ * @desc Renders either the landmark region or headings menu group
+ *
+ * @param {Object} groupNode - DOM element node for the menu group
+ * @param {Array} menuitems - Array of objects with menu item information
+ * @param {String} msgNoItesmFound - Message to render if there are no menu items
+ */
+ renderMenuitemsToGroup(groupNode, menuitems, msgNoItemsFound) {
+ groupNode.innerHTML = '';
+ this.lastNestingLevel = 0;
+
+ if (menuitems.length === 0) {
+ const item = {};
+ item.name = msgNoItemsFound;
+ item.tagName = '';
+ item.class = 'no-items';
+ item.dataId = '';
+ this.renderMenuitemToGroup(groupNode, item);
+ }
+ else {
+ for (let i = 0; i < menuitems.length; i += 1) {
+ this.renderMenuitemToGroup(groupNode, menuitems[i]);
+ }
+ }
+ }
+
+ /*
+ * @method renderMenu
+ *
+ * @desc
+ */
+ renderMenu() {
+ // remove landmark menu items
+ while (this.landmarkGroupNode.lastElementChild) {
+ this.landmarkGroupNode.removeChild(this.landmarkGroupNode.lastElementChild);
+ }
+ // remove heading menu items
+ while (this.headingGroupNode.lastElementChild) {
+ this.headingGroupNode.removeChild(this.headingGroupNode.lastElementChild);
+ }
+
+ // Create landmarks group
+ const [landmarkElements, headingElements] = getLandmarksAndHeadings(this.config, this.skiptoId);
+
+ this.renderMenuitemsToGroup(this.landmarkGroupNode, landmarkElements, this.config.msgNoLandmarksFound);
+ this.renderMenuitemsToGroup(this.headingGroupNode, headingElements, this.config.msgNoHeadingsFound);
+
+ // Update list of menuitems
+ this.updateMenuitems();
+ }
+
+ //
+ // Menu scripting helper functions and event handlers
+ //
+
+ /*
+ * @method setFocusToMenuitem
+ *
+ * @desc Moves focus to menu item
+ *
+ * @param {Object} menuItem - DOM element node used as a menu item
+ */
+ setFocusToMenuitem(menuitem) {
+ if (menuitem) {
+ menuitem.focus();
+ }
+ }
+
+ /*
+ * @method setFocusToFirstMenuitem
+ *
+ * @desc Moves focus to first menu item
+ */
+ setFocusToFirstMenuitem() {
+ this.setFocusToMenuitem(this.firstMenuitem);
+ }
+
+ /*
+ * @method setFocusToLastMenuitem
+ *
+ * @desc Moves focus to last menu item
+ */
+ setFocusToLastMenuitem() {
+ this.setFocusToMenuitem(this.lastMenuitem);
+ }
+
+ /*
+ * @method setFocusToPreviousMenuitem
+ *
+ * @desc Moves focus to previous menu item
+ *
+ * @param {Object} menuItem - DOM element node
+ */
+ setFocusToPreviousMenuitem(menuitem) {
+ let newMenuitem, index;
+ if (menuitem === this.firstMenuitem) {
+ newMenuitem = this.lastMenuitem;
+ } else {
+ index = this.menuitemNodes.indexOf(menuitem);
+ newMenuitem = this.menuitemNodes[index - 1];
+ }
+ this.setFocusToMenuitem(newMenuitem);
+ return newMenuitem;
+ }
+
+ /*
+ * @method setFocusToNextMenuitem
+ *
+ * @desc Moves focus to next menu item
+ *
+ * @param {Object} menuItem - DOM element node
+ */
+ setFocusToNextMenuitem(menuitem) {
+ let newMenuitem, index;
+ if (menuitem === this.lastMenuitem) {
+ newMenuitem = this.firstMenuitem;
+ } else {
+ index = this.menuitemNodes.indexOf(menuitem);
+ newMenuitem = this.menuitemNodes[index + 1];
+ }
+ this.setFocusToMenuitem(newMenuitem);
+ return newMenuitem;
+ }
+
+ /*
+ * @method setFocusByFirstCharacter
+ *
+ * @desc Moves focus to next menu item based on shortcut key
+ *
+ * @param {Object} menuItem - Starting DOM element node
+ * @param {String} char - Shortcut key to identify the
+ * next menu item
+ */
+ setFocusByFirstCharacter(menuitem, char) {
+ let start, index;
+ if (char.length > 1) {
+ return;
+ }
+ char = char.toLowerCase();
+
+ // Get start index for search based on position of currentItem
+ start = this.menuitemNodes.indexOf(menuitem) + 1;
+ if (start >= this.menuitemNodes.length) {
+ start = 0;
+ }
+
+ // Check remaining items in the menu
+ index = this.firstChars.indexOf(char, start);
+
+ // If not found in remaining items, check headings
+ if (index === -1) {
+ index = this.headingLevels.indexOf(char, start);
+ }
+
+ // If not found in remaining items, check from beginning
+ if (index === -1) {
+ index = this.firstChars.indexOf(char, 0);
+ }
+
+ // If not found in remaining items, check headings from beginning
+ if (index === -1) {
+ index = this.headingLevels.indexOf(char, 0);
+ }
+
+ // If match was found...
+ if (index > -1) {
+ this.setFocusToMenuitem(this.menuitemNodes[index]);
+ }
+ }
+
+ /*
+ * @method getIndexFirstChars
+ *
+ * @desc
+ *
+ * @returns {Number}
+ */
+ getIndexFirstChars(startIndex, char) {
+ for (let i = startIndex; i < this.firstChars.length; i += 1) {
+ if (char === this.firstChars[i]) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ /*
+ * @method openPopup
+ *
+ * @desc Opens the memu of landmark regions and headings
+ */
+ openPopup() {
+ this.menuNode.setAttribute('aria-busy', 'true');
+ const h = (80 * window.innerHeight) / 100;
+ this.menuNode.style.maxHeight = h + 'px';
+ this.renderMenu();
+ this.menuNode.style.display = 'block';
+ const buttonRect = this.buttonNode.getBoundingClientRect();
+ const menuRect = this.menuNode.getBoundingClientRect();
+ const diff = window.innerWidth - buttonRect.left - menuRect.width - 8;
+ if (diff < 0) {
+ if (buttonRect.left + diff < 0) {
+ this.menuNode.style.left = (8 - buttonRect.left) + 'px';
+ } else {
+ this.menuNode.style.left = diff + 'px';
+ }
+ }
+ this.menuNode.removeAttribute('aria-busy');
+ this.buttonNode.setAttribute('aria-expanded', 'true');
+ }
+
+ /*
+ * @method closePopup
+ *
+ * @desc Closes the memu of landmark regions and headings
+ */
+ closePopup() {
+ if (this.isOpen()) {
+ this.buttonNode.setAttribute('aria-expanded', 'false');
+ this.menuNode.style.display = 'none';
+ }
+ }
+
+ /*
+ * @method isOpen
+ *
+ * @desc Returns true if menu is open, otherwise false
+ *
+ * @returns {Boolean} see @desc
+ */
+ isOpen() {
+ return this.buttonNode.getAttribute('aria-expanded') === 'true';
+ }
+
+ // Menu event handlers
+
+ handleFocusin() {
+ this.containerNode.classList.add('focus');
+ }
+
+ handleFocusout() {
+ this.containerNode.classList.remove('focus');
+ }
+
+ handleButtonKeydown(event) {
+ let key = event.key,
+ flag = false;
+ switch (key) {
+ case ' ':
+ case 'Enter':
+ case 'ArrowDown':
+ case 'Down':
+ this.openPopup();
+ this.setFocusToFirstMenuitem();
+ flag = true;
+ break;
+ case 'Esc':
+ case 'Escape':
+ this.closePopup();
+ this.buttonNode.focus();
+ flag = true;
+ break;
+ case 'Up':
+ case 'ArrowUp':
+ this.openPopup();
+ this.setFocusToLastMenuitem();
+ flag = true;
+ break;
+ }
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ }
+
+ handleButtonClick(event) {
+ if (this.isOpen()) {
+ this.closePopup();
+ this.buttonNode.focus();
+ } else {
+ this.openPopup();
+ this.setFocusToFirstMenuitem();
+ }
+ event.stopPropagation();
+ event.preventDefault();
+ }
+
+ handleDocumentKeydown (event) {
+ let key = event.key,
+ flag = false;
+
+ let altPressed =
+ this.usesAltKey &&
+ event.altKey &&
+ !event.ctrlKey &&
+ !event.shiftKey &&
+ !event.metaKey;
+
+ let optionPressed =
+ this.usesOptionKey &&
+ event.altKey &&
+ !event.ctrlKey &&
+ !event.shiftKey &&
+ !event.metaKey;
+
+ if (
+ (optionPressed && this.config.optionShortcut === key) ||
+ (altPressed && this.config.altShortcut === key)
+ ) {
+ this.openPopup();
+ this.setFocusToFirstMenuitem();
+ flag = true;
+ }
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ }
+
+ handleMenuitemAction(tgt) {
+ switch (tgt.getAttribute('data-id')) {
+ case '':
+ // this means there were no headings or landmarks in the list
+ break;
+
+ default:
+ this.closePopup();
+ skipToElement(tgt);
+ break;
+ }
+ }
+
+ handleMenuitemKeydown(event) {
+ let tgt = event.currentTarget,
+ key = event.key,
+ flag = false;
+
+ function isPrintableCharacter(str) {
+ return str.length === 1 && str.match(/\S/);
+ }
+ if (event.ctrlKey || event.altKey || event.metaKey) {
+ return;
+ }
+ if (event.shiftKey) {
+ if (isPrintableCharacter(key)) {
+ this.setFocusByFirstCharacter(tgt, key);
+ flag = true;
+ }
+ if (event.key === 'Tab') {
+ this.buttonNode.focus();
+ this.closePopup();
+ flag = true;
+ }
+ } else {
+ switch (key) {
+ case 'Enter':
+ case ' ':
+ this.handleMenuitemAction(tgt);
+ flag = true;
+ break;
+ case 'Esc':
+ case 'Escape':
+ this.closePopup();
+ this.buttonNode.focus();
+ flag = true;
+ break;
+ case 'Up':
+ case 'ArrowUp':
+ this.setFocusToPreviousMenuitem(tgt);
+ flag = true;
+ break;
+ case 'ArrowDown':
+ case 'Down':
+ this.setFocusToNextMenuitem(tgt);
+ flag = true;
+ break;
+ case 'Home':
+ case 'PageUp':
+ this.setFocusToFirstMenuitem();
+ flag = true;
+ break;
+ case 'End':
+ case 'PageDown':
+ this.setFocusToLastMenuitem();
+ flag = true;
+ break;
+ case 'Tab':
+ this.closePopup();
+ break;
+ default:
+ if (isPrintableCharacter(key)) {
+ this.setFocusByFirstCharacter(tgt, key);
+ flag = true;
+ }
+ break;
+ }
+ }
+ if (flag) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ }
+
+ handleMenuitemClick(event) {
+ this.handleMenuitemAction(event.currentTarget);
+ event.stopPropagation();
+ event.preventDefault();
+ }
+
+ handleMenuitemPointerenter(event) {
+ let tgt = event.currentTarget;
+ tgt.focus();
+ }
+
+ handleBackgroundPointerdown(event) {
+ if (!this.containerNode.contains(event.target)) {
+ if (this.isOpen()) {
+ this.closePopup();
+ this.buttonNode.focus();
+ }
+ }
+ }
+ }
+
+ (function() {
+
+ const SkipTo = {
+ skipToId: 'id-skip-to',
+ domNode: null,
+ buttonNode: null,
+ menuNode: null,
+ menuitemNodes: [],
+ firstMenuitem: false,
+ lastMenuitem: false,
+ firstChars: [],
+ headingLevels: [],
+ skipToIdIndex: 1,
+ // Default configuration values
+ config: {
+ // Feature switches
+ enableHeadingLevelShortcuts: true,
+
+ // Customization of button and menu
+ altShortcut: '0', // default shortcut key is the number zero
+ optionShortcut: 'ยบ', // default shortcut key character associated with option+0 on mac
+ attachElement: 'body',
+ displayOption: 'popup', // options: static (default), popup, fixed
+ // container element, use containerClass for custom styling
+ containerElement: 'div',
+ containerRole: '',
+ customClass: '',
+
+ // Button labels and messages
+ buttonLabel: 'Skip To Content',
+ altLabel: 'Alt',
+ optionLabel: 'Option',
+ buttonShortcut: ' ($modifier+$key)',
+ altButtonAriaLabel: 'Skip To Content, shortcut Alt plus $key',
+ optionButtonAriaLabel: 'Skip To Content, shortcut Option plus $key',
+
+ // Menu labels and messages
+ menuLabel: 'Landmarks and Headings',
+ landmarkGroupLabel: 'Landmark Regions',
+ headingGroupLabel: 'Headings',
+ headingLevelLabel: 'Heading level',
+ mainLabel: 'main',
+ searchLabel: 'search',
+ navLabel: 'navigation',
+ regionLabel: 'region',
+ asideLabel: 'complementary',
+ footerLabel: 'contentinfo',
+ headerLabel: 'banner',
+ formLabel: 'form',
+ msgNoLandmarksFound: 'No landmarks found',
+ msgNoHeadingsFound: 'No headings found',
+
+ // Selectors for landmark and headings sections
+ landmarks: 'main search navigation complementary',
+ headings: 'main h1 h2',
+
+ // Place holders for configuration
+ colorTheme: 'aria',
+ fontFamily: '',
+ fontSize: '',
+ positionLeft: '',
+ mediaBreakPoint: '',
+ menuTextColor: '',
+ menuBackgroundColor: '',
+ menuitemFocusTextColor: '',
+ menuitemFocusBackgroundColor: '',
+ focusBorderColor: '',
+ buttonTextColor: '',
+ buttonBackgroundColor: '',
+ zIndex: '',
+ },
+ colorThemes: {
+ 'default': {
+ fontFamily: 'inherit',
+ fontSize: 'inherit',
+ positionLeft: '46%',
+ mediaBreakPoint: '540',
+ menuTextColor: '#1a1a1a',
+ menuBackgroundColor: '#dcdcdc',
+ menuitemFocusTextColor: '#eeeeee',
+ menuitemFocusBackgroundColor: '#1a1a1a',
+ focusBorderColor: '#1a1a1a',
+ buttonTextColor: '#1a1a1a',
+ buttonBackgroundColor: '#eeeeee',
+ zIndex: '100000',
+ },
+ 'aria': {
+ hostnameSelector: 'w3.org',
+ pathnameSelector: 'ARIA/apg',
+ fontFamily: 'sans-serif',
+ fontSize: '10pt',
+ positionLeft: '7%',
+ menuTextColor: '#000',
+ menuBackgroundColor: '#def',
+ menuitemFocusTextColor: '#fff',
+ menuitemFocusBackgroundColor: '#005a9c',
+ focusBorderColor: '#005a9c',
+ buttonTextColor: '#005a9c',
+ buttonBackgroundColor: '#ddd',
+ },
+ 'illinois': {
+ hostnameSelector: 'illinois.edu',
+ menuTextColor: '#00132c',
+ menuBackgroundColor: '#cad9ef',
+ menuitemFocusTextColor: '#eeeeee',
+ menuitemFocusBackgroundColor: '#00132c',
+ focusBorderColor: '#ff552e',
+ buttonTextColor: '#444444',
+ buttonBackgroundColor: '#dddede',
+ },
+ 'skipto': {
+ hostnameSelector: 'skipto-landmarks-headings.github.io',
+ fontSize: '14px',
+ menuTextColor: '#00132c',
+ menuBackgroundColor: '#cad9ef',
+ menuitemFocusTextColor: '#eeeeee',
+ menuitemFocusBackgroundColor: '#00132c',
+ focusBorderColor: '#ff552e',
+ buttonTextColor: '#444444',
+ buttonBackgroundColor: '#dddede',
+ },
+ 'uic': {
+ hostnameSelector: 'uic.edu',
+ menuTextColor: '#001e62',
+ menuBackgroundColor: '#f8f8f8',
+ menuitemFocusTextColor: '#ffffff',
+ menuitemFocusBackgroundColor: '#001e62',
+ focusBorderColor: '#d50032',
+ buttonTextColor: '#ffffff',
+ buttonBackgroundColor: '#001e62',
+ },
+ 'uillinois': {
+ hostnameSelector: 'uillinois.edu',
+ menuTextColor: '#001e62',
+ menuBackgroundColor: '#e8e9ea',
+ menuitemFocusTextColor: '#f8f8f8',
+ menuitemFocusBackgroundColor: '#13294b',
+ focusBorderColor: '#dd3403',
+ buttonTextColor: '#e8e9ea',
+ buttonBackgroundColor: '#13294b',
+ },
+ 'uis': {
+ hostnameSelector: 'uis.edu',
+ menuTextColor: '#036',
+ menuBackgroundColor: '#fff',
+ menuitemFocusTextColor: '#fff',
+ menuitemFocusBackgroundColor: '#036',
+ focusBorderColor: '#dd3444',
+ buttonTextColor: '#fff',
+ buttonBackgroundColor: '#036',
+ }
+ },
+
+ /*
+ * @method init
+ *
+ * @desc Initializes the skipto button and menu with default and user
+ * defined options
+ *
+ * @param {object} config - Reference to configuration object
+ * can be undefined
+ */
+ init: function(config) {
+ let node;
+
+ // Check if skipto is already loaded
+ if (document.skipToHasBeenLoaded) {
+ console.warn('[skipTo.js] Skipto is already loaded!');
+ return;
+ }
+
+ document.skipToHasBeenLoaded = true;
+
+ let attachElement = document.body;
+ if (config) {
+ this.setupConfig(config);
+ }
+ if (typeof this.config.attachElement === 'string') {
+ node = document.querySelector(this.config.attachElement);
+ if (node && node.nodeType === Node.ELEMENT_NODE) {
+ attachElement = node;
+ }
+ }
+ // Add skipto style sheet to document
+ renderStyleElement(this.colorThemes, this.config, this.skipToId);
+
+ new SkiptoMenuButton(attachElement, this.config, this.skipToId);
+ },
+
+ /*
+ * @method setupConfig
+ *
+ * @desc Get configuration information from user configuration to change
+ * default settings
+ *
+ * @param {object} appConfig - Javascript object with configuration information
+ */
+ setupConfig: function(appConfig) {
+ let appConfigSettings;
+ // Support version 4.1 configuration object structure
+ // If found use it
+ if ((typeof appConfig.settings === 'object') &&
+ (typeof appConfig.settings.skipTo === 'object')) {
+ appConfigSettings = appConfig.settings.skipTo;
+ }
+ else {
+ // Version 5.0 removes the requirement for the "settings" and "skipto" properties
+ // to reduce the complexity of configuring skipto
+ if ((typeof appConfig === 'undefined') ||
+ (typeof appConfig !== 'object')) {
+ appConfigSettings = {};
+ }
+ else {
+ appConfigSettings = appConfig;
+ }
+ }
+
+ for (const name in appConfigSettings) {
+ //overwrite values of our local config, based on the external config
+ if ((typeof this.config[name] !== 'undefined') &&
+ ((typeof appConfigSettings[name] === 'string') &&
+ (appConfigSettings[name].length > 0 ) ||
+ typeof appConfigSettings[name] === 'boolean')
+ ) {
+ this.config[name] = appConfigSettings[name];
+ } else {
+ console.warn('[SkipTo]: Unsuported or deprecated configuration option "' + name + '".');
+ }
+ }
+ }
+ };
+
+ // Initialize skipto menu button with onload event
+ window.addEventListener('load', function() {
+ SkipTo.init(window.SkipToConfig);
+ });
+ })();
+
+})();