Merge pull request #4 from geospatialem/geospatialem/feat-css-demo-links-etc

feat: misc updates

Author: geospatialem

README.md

@@ -8,15 +8,15 @@ Presented at the 2025 Esri Developer Summit by Kelly Hutchins and Kitty Hurley o
 
 ## Demos
 
-1. Map Description and Live Regions 🚧
+1. [Map Description and Live Regions](demos/description-region/index.html)
    - Provide context to when the map has loaded and include a description when the map is in focus to further WCAG's [1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) Success Criterion.
 2. [Expand Component Focus Trap Disabled](demos/expand-component/index.html)
    - Provide users the ability to not be trapped when interacting with the Expand component to further WCAG's [2.1.2: No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) Success Criterion.
 3. Consistent Focus 🚧
    - Provide a consistent focus order throughout your UI supporting WCAG's [2.4.3: Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) and [3.2.3: Consistent Navigation](https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html) Success Criterion.
 4. [High Contrast](demos/high-contrast/index.html)
    - Explore contrast with your data, altering the basemap and layer effects to support the map's purpose when a user has enabled high contrast on their operating system, also supporting WCAG's [1.4.3: Contrast Minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) Success Criterion.
-5. Reduced Motion 🚧
+5. [Reduced MotioN](demos/reduced-motion/index.html)
    - Support reduced motion when a user has enabled reduced motion, or disabled animations on their operating system, also supporting WCAG's [2.3.3: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) Success Criterion.
 
 ## Resources

demos/expand-component/app.js

@@ -1,49 +1,68 @@
-const toggleModeEl = document.getElementById("toggle-mode");
-const mapEl = document.querySelector("arcgis-map");
-const darkModeCss = document.getElementById("jsapi-mode-dark");
-const lightModeCss = document.getElementById("jsapi-mode-light");
-const liveRegion = document.getElementById("liveRegion");
-const searchEl = document.getElementById("search-el");
-const expandEl = document.getElementById("expand-el");
-
-let mode = "light";
-
-toggleModeEl.addEventListener("click", handleModeChange);
-
-
-// Initialize the mutation observer
-// Resource: https://developers.arcgis.com/javascript/latest/watch-for-changes/#using-a-mutation-observer
-const observer = new MutationObserver((mutations, observer) => {
-  for (let mutation of mutations) {
-    // Mutation observer change message
-    const mutationMessage = `MutationObserver: ${mutation.attributeName} has changed to ${mutation.target[mutation.attributeName]}`;
-    console.log(mutationMessage);
-    // Set focus on the arcgis-search if the component is expanded
-    // Else set focus on the arcgis-expand
-    if (mutation.target[mutation.attributeName] == true) {
-      searchEl.focusSearch();
-    } else {
-      const expandEls = document.querySelectorAll(".esri-expand__toggle > calcite-action");
-      expandEls[0].setFocus();
-    } 
+require([
+  "esri/core/reactiveUtils"
+], (reactiveUtils) => {
+
+  const toggleModeEl = document.getElementById("toggle-mode");
+  const mapEl = document.querySelector("arcgis-map");
+  const darkModeCss = document.getElementById("jsapi-mode-dark");
+  const lightModeCss = document.getElementById("jsapi-mode-light");
+  const searchEl = document.getElementById("search-el");
+  const expandEl = document.getElementById("expand-el");
+
+  let mode = "light";
+
+  toggleModeEl.addEventListener("click", handleModeChange);
+
+  // reactiveUtils to watch for when the popup is opened and closed
+  // Resource: https://developers.arcgis.com/javascript/latest/watch-for-changes/#watch-for-changes-in-the-api
+  mapEl.addEventListener("arcgisViewReadyChange", () => {
+    reactiveUtils.watch(() => mapEl.view.popup.visible, (visible) => {
+        if (mapEl.view.popup.visible) {
+          setTimeout(() => {
+            mapEl.view.popup.focus();
+        }, 100);
+        } else {
+          searchEl.focusSearch();
+        }
+      }
+    );
+  });
+
+
+  // Initialize the mutation observer
+  // Resource: https://developers.arcgis.com/javascript/latest/watch-for-changes/#using-a-mutation-observer
+  const observer = new MutationObserver((mutations, observer) => {
+    for (let mutation of mutations) {
+      // Mutation observer change message
+      const mutationMessage = `MutationObserver: ${mutation.attributeName} has changed to ${mutation.target[mutation.attributeName]}`;
+      console.log(mutationMessage);
+      // Set focus on the arcgis-search if the component is expanded
+      // Else set focus on the arcgis-expand
+      if (mutation.target[mutation.attributeName] == true) {
+        searchEl.focusSearch();
+      } else {
+        const expandEls = document.querySelectorAll(".esri-expand__toggle > calcite-action");
+        expandEls[0].setFocus();
+      } 
+    }
+  });
+
+  // Start observing the arcgis-expand's "expanded" attribute
+  observer.observe(expandEl, {
+    attributeFilter: ["expanded"]
+  });
+
+  function handleModeChange() {
+    mode = mode === "dark" ? "light" : "dark";
+    const isDarkMode = mode === "dark";
+    darkModeCss.disabled = !isDarkMode;
+    lightModeCss.disabled = isDarkMode;
+    toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
+    document.body.className = isDarkMode ? "calcite-mode-dark" : "";
+
+    document.querySelectorAll(`.calcite-mode-${isDarkMode ? "light" : "dark"}`).forEach(node =>
+      node.classList.replace(`calcite-mode-${isDarkMode ? "light" : "dark"}`, `calcite-mode-${mode}`)
+    );
   }
-});
-
-// Start observing the arcgis-expand's "expanded" attribute
-observer.observe(expandEl, {
-  attributeFilter: ["expanded"]
-});
-
-
-function handleModeChange() {
-  mode = mode === "dark" ? "light" : "dark";
-  const isDarkMode = mode === "dark";
-  darkModeCss.disabled = !isDarkMode;
-  lightModeCss.disabled = isDarkMode;
-  toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
-  document.body.className = isDarkMode ? "calcite-mode-dark" : "";
-
-  document.querySelectorAll(`.calcite-mode-${isDarkMode ? "light" : "dark"}`).forEach(node =>
-    node.classList.replace(`calcite-mode-${isDarkMode ? "light" : "dark"}`, `calcite-mode-${mode}`)
-  );
-}
+
+});

demos/expand-component/style.css

@@ -9,16 +9,20 @@ body.calcite-mode-dark calcite-navigation-logo{
   --calcite-color-text-2:#C7C7C7;
 }
 
-
 html,
-body,
-arcgis-map {
-  padding: 0;
+body {
   margin: 0;
   height: 100%;
-  width: 100%;
 }
 
 calcite-shell-panel[slot="panel-start"] calcite-panel {
   border-top: 0;
+}
+
+/* Custom styling using Calcite's semantic tokens */
+/* Resource: https://developers.arcgis.com/calcite-design-system/foundations/tokens/usage */
+:root,
+:focus {
+  --calcite-color-brand: #000;
+  --calcite-color-focus: var(--calcite-color-brand);
 }

demos/high-contrast/style.css

@@ -9,14 +9,10 @@ body.calcite-mode-dark calcite-navigation-logo{
   --calcite-color-text-2:#C7C7C7;
 }
 
-
 html,
-body,
-arcgis-map {
-  padding: 0;
+body {
   margin: 0;
   height: 100%;
-  width: 100%;
 }
 
 calcite-shell-panel[slot="panel-start"] calcite-panel {