demos/description-region/index.html

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" />
  <title>Map Description</title>

  <!-- Calcite imports -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>


  <!-- ArcGIS Maps SDK for JavaScript imports -->
  <script src="https://js.arcgis.com/4.32/"></script>
  <link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
  <link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/dark/main.css" />
  <script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>

  <!-- Demo imports -->
  <script src="./app.js" defer></script>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <calcite-shell content-behind>
    <calcite-navigation slot="header" id="nav">
      <calcite-navigation-logo href="#" icon="accessibility" alt="Application logo" slot="logo"
        heading="Map Description and Live Regions"
        description="Esri Developer & Technology Summit 2025"></calcite-navigation-logo>
      <calcite-action-pad layout="horizontal" expand-disabled slot="content-end">
        <calcite-action id="toggle-mode" text="Toggle mode" icon="brightness"></calcite-action>
      </calcite-action-pad>

      <calcite-tooltip placement="bottom" reference-element="toggle-mode" slot="content-end">Toggle
        mode</calcite-tooltip>
    </calcite-navigation>
    <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
      <div id="liveRegion" aria-live="polite" class="sr-only"></div>
      <p id="map-description" class="sr-only"></p>
    </arcgis-map>
  </calcite-shell>

</body>

</html>