chore: Update branch with latest update/skipto changes and submodul…

…e updates
w3c · Jan 21, 2025 · d524f4f · d524f4f
1 parent 3429052
commit d524f4f
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 8 deletions.
diff --git a/_external/aria-practices b/_external/aria-practices
diff --git a/content-assets/wai-aria-practices/shared/js/skipto.js b/content-assets/wai-aria-practices/shared/js/skipto.js
@@ -596,6 +596,101 @@ $skipToId [role="menuitem"].shortcuts-disabled {
 
   const cssHighlightTemplate = document.createElement('template');
   cssHighlightTemplate.textContent = `
+$skipToId-overlay {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  border-radius: 3px;
+  border: 4px solid $buttonBackgroundColor;
+  box-sizing: border-box;
+  pointer-events:none;
+}
+
+$skipToId-overlay .overlay-border {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  top: -2px;
+  left: -2px;
+  border-radius: 3px 3px 3px 3px;
+  border: 2px solid $focusBorderColor;
+  z-index: $zHighlight;
+  box-sizing: border-box;
+  pointer-events:none;
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+$skipToId-overlay .overlay-border.skip-to-hidden {
+  background-color: $hiddenHeadingBackgroundColor;
+  color: $hiddenHeadingColor;
+  font-style: italic;
+  font-weight: bold;
+  font-size: 0.9em;
+  text-align: center;
+  padding: .25em;
+  animation: fadeIn 1.5s;
+}
+
+$skipToId-overlay .overlay-border.hasInfoBottom {
+  border-radius: 3px 3px 3px 0;
+}
+
+$skipToId-overlay .overlay-border.hasInfoTop {
+  border-radius: 0 3px 3px 3px;
+}
+
+$skipToId-overlay .overlay-info {
+  position: relative;
+  text-align: left;
+  left: -2px;
+  padding: 1px 4px;
+  border: 2px solid $focusBorderColor;
+  background-color: $menuBackgroundColor;
+  color: $menuTextColor;
+  z-index: $zHighlight;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events:none;
+}
+
+$skipToId-overlay .overlay-info.hasInfoTop {
+  border-radius: 3px 3px 0 0;
+}
+
+$skipToId-overlay .overlay-info.hasInfoBottom {
+  border-radius: 0 0 3px 3px;
+}
+
+@media (forced-colors: active) {
+
+  $skipToId-overlay {
+    border-color: ButtonBorder;
+  }
+
+  $skipToId-overlay .overlay-border {
+    border-color: ButtonBorder;
+  }
+
+  $skipToId-overlay .overlay-border.skip-to-hidden {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  $skipToId-overlay .overlay-info {
+    border-color: ButtonBorder;
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+}
+`;
+
+  const cssHighlightTemplateLightDark = document.createElement('template');
+  cssHighlightTemplateLightDark.textContent = `
 :root {
   color-scheme: light dark;
 }
@@ -691,9 +786,9 @@ $skipToId-overlay .overlay-info.hasInfoBottom {
   }
 
 }
-
 `;
 
+
   /*
    *   @function getTheme
    *
@@ -899,7 +994,14 @@ $skipToId-overlay .overlay-info.hasInfoBottom {
     let cssMenu = cssMenuTemplate.textContent.slice(0);
     cssMenu = cssMenu.replaceAll('$skipToId', '#' + skipToId);
 
-    let cssHighlight = cssHighlightTemplate.textContent.slice(0);
+    debug$c.log(`[lightDarkSupported]: ${config.lightDarkSupported} ${typeof config.lightDarkSupported} ${config.lightDarkSupported === 'true'}`);
+
+    let cssHighlight = config.lightDarkSupported === 'true' ?
+                       cssHighlightTemplateLightDark.textContent.slice(0) :
+                       cssHighlightTemplate.textContent.slice(0);
+
+    debug$c.log(`[cssHighlight]: ${cssHighlight}`);
+
     cssHighlight = cssHighlight.replaceAll('$skipToId', '#' + skipToId);
 
     [cssMenu, cssHighlight] = addCSSColors(cssMenu, cssHighlight, config, useURLTheme);
@@ -5015,21 +5117,22 @@ div#skip-to-message.fade {
   debug$1.flag = false;
 
 
-  class SkipToContent572 extends HTMLElement {
+  class SkipToContent573 extends HTMLElement {
 
     constructor() {
       // Always call super first in constructor
       super();
       this.attachShadow({ mode: 'open' });
       this.skipToId = 'id-skip-to';
-      this.version = "5.7.2";
+      this.version = "5.7.3";
       this.buttonSkipTo = false;
       this.initialized = false;
 
       // Default configuration values
       this.config = {
         // Feature switches
         enableHeadingLevelShortcuts: true,
+        lightDarkSupported: 'false',
 
         focusOption: 'none',  // used by extensions only
 
@@ -5495,7 +5598,7 @@ div#skip-to-message.fade {
           if (!isExtensionLoaded) {
             if (!isBookmarkletLoaded) {
               removePageSkipTo();
-              window.customElements.define(SkipToBookmarkletElmName, SkipToContent572);
+              window.customElements.define(SkipToBookmarkletElmName, SkipToContent573);
               skipToContentElem = document.createElement(SkipToBookmarkletElmName);
               skipToContentElem.setAttribute('version', skipToContentElem.version);
               skipToContentElem.setAttribute('type', type);
@@ -5511,7 +5614,7 @@ div#skip-to-message.fade {
           if (!isExtensionLoaded) {
             removePageSkipTo();
             removeBookmarkletSkipTo();
-            window.customElements.define(SkipToExtensionElmName, SkipToContent572);
+            window.customElements.define(SkipToExtensionElmName, SkipToContent573);
             skipToContentElem = document.createElement(SkipToExtensionElmName);
             skipToContentElem.setAttribute('version', skipToContentElem.version);
             skipToContentElem.setAttribute('type', type);
@@ -5525,7 +5628,7 @@ div#skip-to-message.fade {
 
         default:
           if (!isPageLoaded && !isBookmarkletLoaded && !isExtensionLoaded) {
-            window.customElements.define(SkipToPageElmName, SkipToContent572);
+            window.customElements.define(SkipToPageElmName, SkipToContent573);
             skipToContentElem = document.createElement(SkipToPageElmName);
             skipToContentElem.setAttribute('version', skipToContentElem.version);
             skipToContentElem.setAttribute('type', type);