Merge pull request #5 from geospatialem/geospatialem/feat-expand

feat: dark mode contrast, docs, popup timings

Author: geospatialem

README.md

@@ -11,12 +11,12 @@ Presented at the 2025 Esri Developer Summit by Kelly Hutchins and Kitty Hurley o
 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.
+   - Provide users the ability to not be trapped when interacting with `arcgis-expand` to further WCAG's [2.1.2: No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) Success Criterion. Also includes support with Calcite's focus for [1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) and keyboard support with [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.
 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](demos/reduced-motion/index.html)
+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

@@ -17,18 +17,19 @@ require([
   // 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) => {
+        // Wait for the popup to display and set its focus
+        // Also... wait for the popup to close to set the arcgis-search focus
         if (mapEl.view.popup.visible) {
           setTimeout(() => {
             mapEl.view.popup.focus();
-        }, 100);
+          }, 500);
         } 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) => {
@@ -59,6 +60,7 @@ require([
     lightModeCss.disabled = isDarkMode;
     toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
     document.body.className = isDarkMode ? "calcite-mode-dark" : "";
+    mapEl.basemap = isDarkMode ? "dark-gray" : "gray";
 
     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

@@ -21,8 +21,17 @@ calcite-shell-panel[slot="panel-start"] calcite-panel {
 
 /* Custom styling using Calcite's semantic tokens */
 /* Resource: https://developers.arcgis.com/calcite-design-system/foundations/tokens/usage */
-:root,
+
+/* Light mode */
+body,
 :focus {
   --calcite-color-brand: #000;
   --calcite-color-focus: var(--calcite-color-brand);
+}
+
+/* Dark mode */
+body.calcite-mode-dark,
+.calcite-mode-dark :focus {
+  --calcite-color-brand: #FEFE4D;
+  --calcite-color-focus: var(--calcite-color-brand);
 }