@undrr/undrr-mangrove 2.0.0-rc.2 → 2.0.0

package/error-pages/managed-challenge.html

@@ -65,14 +65,14 @@
         <div></div>
       </div>
       <div class="mg-error-page__container">
-        <a href="https://www.undrr.org/"><div class="undrr-logo" aria-hidden="true"></div></a>
+        <a href="https://www.undrr.org/" aria-label="UNDRR home"><div class="undrr-logo" aria-hidden="true"></div></a>
         <h1>Checking your browser</h1>
         <p>This is a routine check to keep the site secure. It only takes a moment.</p>
         <!-- Cloudflare CAPTCHA box - REQUIRED for managed challenge pages -->
         ::CAPTCHA_BOX::
         <p>
           Having trouble?
-          <a href="https://www.undrr.org/contact-us">Contact us</a>
+          <a href="https://www.undrr.org/contact-us">Contact UNDRR</a>
           and include the details below.
         </p>
         <!-- Cloudflare tokens - replace with your platform's variables if not using Cloudflare -->
@@ -90,7 +90,7 @@
           document.head.appendChild(el);
         }
         // Load full CSS from CDN (includes fonts)
-        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/mangrove/2.0.0-rc.2/css/style.css'});
+        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/mangrove/2.0.0/css/style.css'});
         // Load analytics
         load('script',{src:'https://assets.undrr.org/analytics/v1.0.0/google_analytics_enhancements.js',crossorigin:'anonymous'});
         load('script',{src:'https://messaging.undrr.org/src/undrr-messaging.js',defer:''});

package/js/README.md

@@ -1,31 +1,35 @@
 # Vanilla JS scripts
 
-Standalone JavaScript modules that work without React. Each file in this directory is auto-discovered by `webpack.entries.js` and produces a UMD bundle at `dist/js/{name}.min.js`.
+Standalone JavaScript modules that work without React. Each file in this directory ships as source: the build copies it, it is not bundled or minified.
 
 ## How they ship
 
 ```
 stories/assets/js/my-script.js          ← source (this directory)
-  ↓ webpack build (Config 1, UMD)
-dist/js/my-script.min.js                ← minified bundle (Drupal/CDN)
-  ↓ CopyPlugin
-dist/assets/js/my-script.js             ← unminified copy
-  ↓ npm-publish.yml (CI)
+  ↓ CopyPlugin (webpack Config 1)
+dist/assets/js/my-script.js             ← verbatim copy (CDN)
+  ↓ assemble-npm-package.mjs (CI)
 @undrr/undrr-mangrove/js/my-script.js   ← npm package
 ```
 
-The GitHub Actions publish workflow (`npm-publish.yml`) copies `dist/assets/js/*` into the npm package at the top-level `js/` directory. This happens automatically — no manual registration is needed.
+They are ES modules, so a page loads one with `<script type="module">`. There is no minified or UMD variant and nothing is emitted under `dist/js/`.
+
+The publish workflow (`npm-publish.yml`) runs `scripts/assemble-npm-package.mjs`, which copies `dist/assets/js/*` into the npm package at the top-level `js/` directory. This happens automatically — the build needs no manual registration. The AI manifest does: see step 6 below.
 
 ## Current scripts
 
-| File                  | Component                                          | Purpose                                                                |
-| --------------------- | -------------------------------------------------- | ---------------------------------------------------------------------- |
-| `on-this-page-nav.js` | [OnThisPageNav](../../Components/OnThisPageNav/)   | Sticky horizontal "On this page" navigation with scroll-spy            |
-| `tabs.js`             | [Tab](../../Components/Tab/)                       | Tabbed content with keyboard navigation and deep linking               |
-| `show-more.js`        | [ShowMore](../../../Utilities/ShowMore/)           | Expand/collapse toggle for content sections                            |
-| `copy-button.js`      | [CopyButton](../../Components/Buttons/CopyButton/) | Zero-dependency clipboard copy button with transient feedback          |
-| `switch-pending.js`   | [Checkbox](../../Components/Forms/Checkbox/)       | Pending state for `.mg-switch`: announces, guards, times out, reverts  |
-| `undrr.js`            | —                                                  | Shared constants (key codes, breakpoints) and `window.UNDRR` namespace |
+| File                   | Component                                            | Purpose                                                                                                                       |
+| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `on-this-page-nav.js`  | [OnThisPageNav](../../Components/OnThisPageNav/)     | Sticky horizontal "On this page" navigation with scroll-spy                                                                   |
+| `tabs.js`              | [Tab](../../Components/Tab/)                         | Tabbed content with keyboard navigation and deep linking                                                                      |
+| `show-more.js`         | [ShowMore](../../../Utilities/ShowMore/)             | Expand/collapse toggle for content sections                                                                                   |
+| `copy-button.js`       | [CopyButton](../../Components/Buttons/CopyButton/)   | Zero-dependency clipboard copy button with transient feedback                                                                 |
+| `switch-pending.js`    | [Checkbox](../../Components/Forms/Checkbox/)         | Pending state for `.mg-switch`: announces, guards, and optionally times out and reverts; also exports the announcements alone |
+| `hub-header.js`        | [HubHeader](../../Patterns/ContentHub/)              | Current section from the URL, scroll into view and edge fades for static hub header markup                                    |
+| `drawer.js`            | [Drawer](../../Components/Navigation/Drawer/)        | Open and close, Escape, focus management and a modal focus trap for a drawer or floating panel you rendered yourself          |
+| `preview-access.js`    | [PreviewAccess](../../Components/PreviewAccess/)     | Password gate and preview notice for staging and pre-publication review                                                       |
+| `table-of-contents.js` | [TableOfContents](../../Components/TableOfContents/) | In-page table of contents generated from the article's headings, with scrollspy                                               |
+| `undrr.js`             | —                                                    | Shared constants (key codes, breakpoints) and `window.UNDRR` namespace                                                        |
 
 ## Adding a new script
 
@@ -41,19 +45,21 @@ The GitHub Actions publish workflow (`npm-publish.yml`) copies `dist/assets/js/*
    ```
 4. Use `data-mg-*` attributes for activation and configuration
 5. Guard against double-init: `if (el.dataset.mgMyFeatureInitialized) return;`
-6. Create a companion SCSS file in `stories/Components/YourComponent/` and import it in `_components.scss`
-7. Run `yarn build` — the script appears at `dist/js/my-feature.min.js`
+   This is required, not optional — see [HYDRATION-AUTHORING.md](../../../docs/HYDRATION-AUTHORING.md) for why a per-element flag and not a module-scope `WeakMap`.
+6. Register the module in `VANILLA_SCRIPTS` in `scripts/ai-manifest/generate-ai-manifest.js`, and add a `vanillaModule` contract to its component in `scripts/ai-manifest/component-data.js` if it drives one. `yarn validate-manifest` fails on a module that ships undocumented, and on a contract that names a file which does not exist.
+7. Create a companion SCSS file in `stories/Components/YourComponent/` and import it in `_components.scss`
+8. Run `yarn build` — the script appears at `dist/assets/js/my-feature.js`
 
-No webpack config or `src/index.js` changes are needed. The file is picked up automatically by the glob pattern in `webpack.entries.js`.
+No webpack config or `src/index.js` changes are needed. CopyPlugin copies this whole directory, so a new file is picked up by being here.
 
 ## Differences from React components
 
-|                    | Vanilla JS (this directory)       | React components                         |
-| ------------------ | --------------------------------- | ---------------------------------------- |
-| Entry discovery    | Auto (glob)                       | Manual (webpack.config.js)               |
-| Output             | `dist/js/*.min.js` (UMD)          | `dist/components/*.js` (ESM)             |
-| npm location       | `@undrr/undrr-mangrove/js/`       | `@undrr/undrr-mangrove/components/`      |
-| React dependency   | None                              | Externalized (provided by import map)    |
-| Drupal integration | Load script directly as a library | Wrapper + hydration via `createHydrator` |
+|                    | Vanilla JS (this directory)        | React components                         |
+| ------------------ | ---------------------------------- | ---------------------------------------- |
+| Entry discovery    | Auto (whole directory is copied)   | Manual (webpack.config.js)               |
+| Output             | `dist/assets/js/*.js` (ESM source) | `dist/components/*.js` (ESM bundle)      |
+| npm location       | `@undrr/undrr-mangrove/js/`        | `@undrr/undrr-mangrove/components/`      |
+| React dependency   | None                               | Externalized (provided by import map)    |
+| Drupal integration | Load script directly as a library  | Wrapper + hydration via `createHydrator` |
 
 See [ARCHITECTURE.md](../../../docs/ARCHITECTURE.md) for the full build system documentation.

package/js/copy-button.js

@@ -5,8 +5,13 @@
  * Initializes standalone copy buttons without requiring React.
  *
  * Expected HTML:
+ * The button is icon-only, so it needs an accessible name: give it an
+ * `aria-label` (or `data-aria-label`, which this script copies onto
+ * `aria-label` when the button has no name of its own).
+ *
  * <button type="button" class="mg-button mg-button-primary mg-button-outline mg-button--icon mg-copy-button"
  *   data-mg-copy-button
+ *   aria-label="Copy to clipboard"
  *   data-text-to-copy="https://example.org"
  *   data-tooltip-label="Copied!"
  *   data-copied-label="Copied to clipboard."
@@ -36,6 +41,18 @@ export function mgCopyButton(scope) {
     if (button.dataset.mgCopyButtonInitialized) return;
     button.dataset.mgCopyButtonInitialized = 'true';
 
+    // An icon-only button with no accessible name announces as just "button"
+    // (WCAG 4.1.2). Markup copied from earlier docs carried the label in
+    // `data-aria-label`, which nothing read; honour it rather than ship a
+    // nameless control, without overriding a real name if one is present.
+    if (
+      button.dataset.ariaLabel &&
+      !button.getAttribute('aria-label') &&
+      !button.getAttribute('aria-labelledby')
+    ) {
+      button.setAttribute('aria-label', button.dataset.ariaLabel);
+    }
+
     let timer = null;
 
     button.addEventListener('click', async () => {