feat(expand): adds css styling for contrast and switches focus when the popup is opened/closed

Author: geospatialem

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

@@ -17,4 +17,12 @@ body {
 
 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);
 }