Skip to content

Commit 0f7e83a

Browse files
geospatialemgeospatialem
authored
Merge pull request #2 from geospatialem/geospatialem/expand-component-a11y
feat: add expand component sample
2 parents 0e9c1fc + 7a9cf8e commit 0f7e83a

File tree

4 files changed

+120
-1
lines changed

4 files changed

+120
-1
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ Presented at the 2025 Esri Developer Summit by Kelly Hutchins and Kitty Hurley o
44

55
- [Demo Site](https://geospatialem.github.io/dts-2025-build-a11y-web-maps-sdk-js-calcite)
66
- [Code](https://github.com/geospatialem/dts-2025-build-a11y-web-maps-sdk-js-calcite)
7-
- Slides, opens in a new window :construction: _Coming soon_ :construction:
7+
- Slides, opens in a new window 🚧 _Coming soon_ 🚧

‎demos/expand-component/app.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const toggleModeEl = document.getElementById("toggle-mode");
2+
const mapEl = document.querySelector("arcgis-map");
3+
const darkModeCss = document.getElementById("jsapi-mode-dark");
4+
const lightModeCss = document.getElementById("jsapi-mode-light");
5+
const liveRegion = document.getElementById("liveRegion");
6+
const searchEl = document.getElementById("search-el");
7+
const expandEl = document.getElementById("expand-el");
8+
9+
let mode = "light";
10+
11+
toggleModeEl.addEventListener("click", handleModeChange);
12+
13+
14+
// Initialize the mutation observer
15+
// Resource: https://developers.arcgis.com/javascript/latest/watch-for-changes/#using-a-mutation-observer
16+
const observer = new MutationObserver((mutations, observer) => {
17+
for (let mutation of mutations) {
18+
// Mutation observer change message
19+
const mutationMessage = `MutationObserver: ${mutation.attributeName} has changed to ${mutation.target[mutation.attributeName]}`;
20+
console.log(mutationMessage);
21+
// Set focus on the arcgis-search if the component is expanded
22+
// Else set focus on the arcgis-expand
23+
if (mutation.target[mutation.attributeName] == true) {
24+
searchEl.focusSearch();
25+
} else {
26+
const expandEls = document.querySelectorAll(".esri-expand__toggle > calcite-action");
27+
expandEls[0].setFocus();
28+
}
29+
}
30+
});
31+
32+
// Start observing the arcgis-expand's "expanded" attribute
33+
observer.observe(expandEl, {
34+
attributeFilter: ["expanded"]
35+
});
36+
37+
38+
function handleModeChange() {
39+
mode = mode === "dark" ? "light" : "dark";
40+
const isDarkMode = mode === "dark";
41+
darkModeCss.disabled = !isDarkMode;
42+
lightModeCss.disabled = isDarkMode;
43+
toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
44+
document.body.className = isDarkMode ? "calcite-mode-dark" : "";
45+
46+
document.querySelectorAll(`.calcite-mode-${isDarkMode ? "light" : "dark"}`).forEach(node =>
47+
node.classList.replace(`calcite-mode-${isDarkMode ? "light" : "dark"}`, `calcite-mode-${mode}`)
48+
);
49+
}

‎demos/expand-component/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" />
6+
<title>2025 Esri Developer & Technology Summit - Expand Component Focus Trap Disabled</title>
7+
8+
<!-- Calcite imports -->
9+
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>
10+
11+
12+
<!-- ArcGIS Maps SDK for JavaScript imports -->
13+
<script src="https://js.arcgis.com/4.32/"></script>
14+
<link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
15+
<link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/dark/main.css" />
16+
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
17+
18+
<!-- Demo imports -->
19+
<script src="./app.js" defer></script>
20+
<link rel="stylesheet" href="./style.css" />
21+
</head>
22+
23+
<body>
24+
<calcite-shell content-behind>
25+
<calcite-navigation slot="header" id="nav">
26+
<calcite-navigation-logo href="#" icon="accessibility" alt="Application logo" slot="logo"
27+
heading="Expand Component Focus Trap Disabled"
28+
description="Esri Developer & Technology Summit 2025"></calcite-navigation-logo>
29+
<calcite-action-pad layout="horizontal" expand-disabled slot="content-end">
30+
<calcite-action id="toggle-mode" text="Toggle mode" icon="brightness"></calcite-action>
31+
</calcite-action-pad>
32+
33+
<calcite-tooltip placement="bottom" reference-element="toggle-mode" slot="content-end">Toggle
34+
mode</calcite-tooltip>
35+
</calcite-navigation>
36+
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
37+
<arcgis-home position="top-right"></arcgis-home>
38+
<arcgis-expand id="expand-el" focus-trap-enabled="false" close-on-esc position="top-right" mode="floating">
39+
<arcgis-search id="search-el"></arcgis-search>
40+
</arcgis-expand>
41+
</arcgis-map>
42+
</calcite-shell>
43+
44+
</body>
45+
46+
</html>

‎demos/expand-component/style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* Esri Developer & Technology Summit Demo Template */
2+
/* Demo template theming example */
3+
4+
body calcite-navigation-logo{
5+
--calcite-color-text-2:#737373;
6+
}
7+
body.calcite-mode-dark calcite-navigation-logo{
8+
--calcite-icon-color:#8FD0FF;
9+
--calcite-color-text-2:#C7C7C7;
10+
}
11+
12+
13+
html,
14+
body,
15+
arcgis-map {
16+
padding: 0;
17+
margin: 0;
18+
height: 100%;
19+
width: 100%;
20+
}
21+
22+
calcite-shell-panel[slot="panel-start"] calcite-panel {
23+
border-top: 0;
24+
}

0 commit comments

Comments
 (0)