Infrastructure: update skipto.js to version 5.2.1 (pull #2807)

Updates skipto.js to use version 5.2.1 without APG specific modifications. In lieu of modifying the script, the script import now specifies parameters for the desired behaviors. This required changing the script import on every page to include the following data attribute: ``` <script data-skipto="colortheme: aria; displayoption: popup" src="../../shared/js/skipto.js"></script> ``` This is related to [issue 259](w3c/wai-aria-practices#259) in wai-aria-practices repository. --------- Co-authored-by: Matt King <a11yThinker@gmail.com> Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>
w3c · Feb 13, 2024 · 5446c67 · 5446c67
1 parent 36726b1
commit 5446c67
Show file tree

Hide file tree

Showing 114 changed files with 1,081 additions and 973 deletions.
diff --git a/content/about/about.html b/content/about/about.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../shared/css/core.css">
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
-    <script src="../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/about/acknowledgements/acknowledgements.html b/content/about/acknowledgements/acknowledgements.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/about/aria-basics/aria-basics.html b/content/about/aria-basics/aria-basics.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/about/change-history/change-history.html b/content/about/change-history/change-history.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html
diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv
@@ -18,7 +18,7 @@
 "aria-flowto","0","0"
 "aria-grabbed","0","0"
 "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button  Using aria-activedescendant","Example: Actions Menu Button  Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar"
-"aria-hidden","0","13","Example: Button  (IDL Version)","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar"
+"aria-hidden","0","16","Example: Button  (IDL Version)","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar"
 "aria-invalid","0","0"
 "aria-keyshortcuts","0","0"
 "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel  with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview"

diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv
@@ -46,7 +46,7 @@
 "meter","2","1","Guidance: Meter Pattern","Guidance: Range properties with meter","Example: Meter"
 "navigation","5","3","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation","Guidance: Navigation","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark"
 "none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview"
-"note","0","0"
+"note","37","0","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note"
 "option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox"
 "paragraph","0","0"
 "presentation","5","0","Guidance: Hiding Semantics with the presentation Role","Guidance: Common Uses of Role presentation","Guidance: Effects of Role presentation","Guidance: Conditions That Cause Role presentation to be Ignored","Guidance: Example Demonstrating Effects of the presentation Role"

diff --git a/content/about/introduction/introduction.html b/content/about/introduction/introduction.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/about/related-specifications/related-specifications.html b/content/about/related-specifications/related-specifications.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/apg-home.html b/content/apg-home.html
@@ -12,6 +12,9 @@
         max-width: 300px;
       }
     </style>
+
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="shared/js/skipto.js"></script>
+
   </head>
   <body>
     <div id="top-card">

diff --git a/content/index/index.html b/content/index/index.html
@@ -8,6 +8,7 @@
   <script src="../shared/js/examples.js"></script>
   <script src="../shared/js/highlight.pack.js"></script>
   <script src="../shared/js/app.js"></script>
+  <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
 </head>
 <body>
   <main>

diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/accordion.css">

diff --git a/content/patterns/alert/alert-pattern.html b/content/patterns/alert/alert-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/alert.css" rel="stylesheet">

diff --git a/content/patterns/alertdialog/alertdialog-pattern.html b/content/patterns/alertdialog/alertdialog-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/alertdialog.css" rel="stylesheet">

diff --git a/content/patterns/breadcrumb/breadcrumb-pattern.html b/content/patterns/breadcrumb/breadcrumb-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/breadcrumb/examples/breadcrumb.html b/content/patterns/breadcrumb/examples/breadcrumb.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/breadcrumb.css" rel="stylesheet">

diff --git a/content/patterns/button/button-pattern.html b/content/patterns/button/button-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/button.css">

diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/button.css">

diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/carousel-prev-next.css">

diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/carousel-tablist.css">

diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/checkbox/examples/checkbox-mixed.html b/content/patterns/checkbox/examples/checkbox-mixed.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/checkbox-mixed.css" rel="stylesheet">

diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/checkbox.css" rel="stylesheet">

diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/combobox-autocomplete.css">

diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/combobox-autocomplete.css" rel="stylesheet">

diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/combobox-autocomplete.css" rel="stylesheet">

diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/select-only.css" rel="stylesheet">

diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/grid-combo.css" rel="stylesheet">

diff --git a/content/patterns/dialog-modal/dialog-modal-pattern.html b/content/patterns/dialog-modal/dialog-modal-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>

diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/dialog.css" rel="stylesheet">