@ds-autonomie/web-components 2.9.0 → 2.10.0

package/dist/events/dsa-copy.d.ts

@@ -0,0 +1,9 @@
+type DSACopy = CustomEvent<{
+    value: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dsa-copy': DSACopy;
+    }
+}
+export default DSACopy;

package/dist/events/dsa-copy.js

@@ -0,0 +1 @@
+export {};

package/dist/events/events.d.ts

@@ -8,6 +8,7 @@ export type { default as DSAChangeEvent } from './dsa-change';
 export type { default as DSAClearEvent } from './dsa-clear';
 export type { default as DSACloseEvent } from './dsa-close';
 export type { default as DSACollapseEvent } from './dsa-collapse';
+export type { default as DSACopy } from './dsa-copy';
 export type { default as DSADateSelected } from './dsa-date-selected';
 export type { default as DSAMonthYearSelected } from './dsa-month-year-selected';
 export type { default as DSAErrorEvent } from './dsa-error';

package/dist/internal/active-elements.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+export declare function getDeepestActiveElement(): Element | undefined;

package/dist/internal/active-elements.js

@@ -0,0 +1,26 @@
+/**
+ * Use a generator so we can iterate and possibly break early.
+ * @example
+ *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.
+ *   const allActiveElements = [...activeElements()]
+ *
+ *   // Early return
+ *   for (const activeElement of activeElements()) {
+ *     if (<cond>) {
+ *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!
+ *     }
+ *   }
+ */
+export function* activeElements(activeElement = document.activeElement) {
+    if (activeElement === null || activeElement === undefined)
+        return;
+    yield activeElement;
+    if ('shadowRoot' in activeElement &&
+        activeElement.shadowRoot &&
+        activeElement.shadowRoot.mode !== 'closed') {
+        yield* activeElements(activeElement.shadowRoot.activeElement);
+    }
+}
+export function getDeepestActiveElement() {
+    return [...activeElements()].pop();
+}

package/dist/internal/components/form-selectable-card/form-selectable-card-stories.js

@@ -1,5 +1,16 @@
 export const getFormSelectableCardArgTypes = (tableCategory) => {
     return {
+        'card_?contrasted-borders': {
+            name: 'contrasted-borders',
+            type: { name: 'boolean', required: false },
+            description: 'Increase the border contrast in contexts where is could be hard to identify the card.',
+            table: {
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' },
+                category: tableCategory,
+            },
+            control: { type: 'boolean' },
+        },
         'card_?disabled': {
             name: 'disabled',
             description: 'Disables the card',

package/dist/internal/components/form-selectable-card/form-selectable-card.d.ts

@@ -26,6 +26,8 @@ export declare class FormSelectableCard extends ShoelaceElement {
     error: boolean;
     /** The card layout orientation */
     layout: 'horizontal' | 'vertical';
+    /** Increase the border contrast in contexts where is could be hard to identify the card. */
+    contrastedBorders: boolean;
     protected handleClick(): void;
     private handleBlur;
     private handleFocus;

package/dist/internal/components/form-selectable-card/form-selectable-card.js

@@ -34,6 +34,8 @@ export class FormSelectableCard extends ShoelaceElement {
         this.error = false;
         /** The card layout orientation */
         this.layout = 'horizontal';
+        /** Increase the border contrast in contexts where is could be hard to identify the card. */
+        this.contrastedBorders = false;
     }
     handleClick() {
         // To be overridden by subclasses
@@ -85,6 +87,7 @@ export class FormSelectableCard extends ShoelaceElement {
             'selectable-card--disabled': isDisabled,
             'selectable-card--error': this.error,
             'selectable-card--checkbox': this.type === 'checkbox',
+            'selectable-card--contrasted-borders': this.contrastedBorders,
         })}
           ?disabled=${isDisabled}
           aria-disabled=${ifDefined(isDeactivated ? 'true' : undefined)}
@@ -175,6 +178,9 @@ __decorate([
 __decorate([
     property()
 ], FormSelectableCard.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'contrasted-borders' })
+], FormSelectableCard.prototype, "contrastedBorders", void 0);
 __decorate([
     watch(['disabled', 'readonly', 'parentDisabled', 'parentReadonly'], {
         waitUntilFirstUpdate: true,

package/dist/internal/components/form-selectable-card/form-selectable-card.styles.js

@@ -139,4 +139,9 @@ export default css `
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }
+
+  /** Contrasted **/
+  .selectable-card--contrasted-borders {
+    border-color: var(--dsa-wc-card-border-color-contrasted);
+  }
 `;

package/dist/internal/modal.d.ts

@@ -1,12 +1,24 @@
 export default class Modal {
     element: HTMLElement;
+    isExternalActivated: boolean;
     tabDirection: 'forward' | 'backward';
+    currentFocus: HTMLElement | null;
+    previousFocus: HTMLElement | null;
+    elementsWithTabbableControls: string[];
     constructor(element: HTMLElement);
+    /** Activates focus trapping. */
     activate(): void;
+    /** Deactivates focus trapping. */
     deactivate(): void;
+    /** Determines if this modal element is currently active or not. */
     isActive(): boolean;
-    checkFocus(): void;
-    handleFocusIn(): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleKeyUp(): void;
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal(): void;
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal(): void;
+    private checkFocus;
+    private handleFocusIn;
+    private possiblyHasTabbableChildren;
+    private handleKeyDown;
+    private handleKeyUp;
 }

package/dist/internal/modal.js

@@ -1,51 +1,127 @@
-import { getTabbableBoundary } from './tabbable';
+import { activeElements, getDeepestActiveElement } from './active-elements';
+import { getTabbableElements } from './tabbable';
 let activeModals = [];
 export default class Modal {
     constructor(element) {
         this.tabDirection = 'forward';
+        this.handleFocusIn = () => {
+            if (!this.isActive())
+                return;
+            this.checkFocus();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (event.key !== 'Tab' || this.isExternalActivated)
+                return;
+            if (!this.isActive())
+                return;
+            // Because sometimes focus can actually be taken over from outside sources,
+            // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and
+            // recurse through shadowRoots.
+            const currentActiveElement = getDeepestActiveElement();
+            this.previousFocus = currentActiveElement;
+            if (this.previousFocus &&
+                this.possiblyHasTabbableChildren(this.previousFocus)) {
+                return;
+            }
+            if (event.shiftKey) {
+                this.tabDirection = 'backward';
+            }
+            else {
+                this.tabDirection = 'forward';
+            }
+            const tabbableElements = getTabbableElements(this.element);
+            let currentFocusIndex = tabbableElements.findIndex((el) => el === currentActiveElement);
+            this.previousFocus = this.currentFocus;
+            const addition = this.tabDirection === 'forward' ? 1 : -1;
+            // eslint-disable-next-line
+            while (true) {
+                if (currentFocusIndex + addition >= tabbableElements.length) {
+                    currentFocusIndex = 0;
+                }
+                else if (currentFocusIndex + addition < 0) {
+                    currentFocusIndex = tabbableElements.length - 1;
+                }
+                else {
+                    currentFocusIndex += addition;
+                }
+                this.previousFocus = this.currentFocus;
+                const nextFocus = 
+                /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];
+                // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element
+                // that possibly has "controls"
+                if (this.tabDirection === 'backward') {
+                    if (this.previousFocus &&
+                        this.possiblyHasTabbableChildren(this.previousFocus)) {
+                        return;
+                    }
+                }
+                if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
+                    return;
+                }
+                event.preventDefault();
+                this.currentFocus = nextFocus;
+                (_a = this.currentFocus) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: false });
+                // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.
+                const allActiveElements = [...activeElements()];
+                if (allActiveElements.includes(this.currentFocus) ||
+                    !allActiveElements.includes(this.previousFocus)) {
+                    break;
+                }
+            }
+            setTimeout(() => this.checkFocus());
+        };
+        this.handleKeyUp = () => {
+            this.tabDirection = 'forward';
+        };
         this.element = element;
-        this.handleFocusIn = this.handleFocusIn.bind(this);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleKeyUp = this.handleKeyUp.bind(this);
+        this.elementsWithTabbableControls = ['iframe'];
     }
+    /** Activates focus trapping. */
     activate() {
         activeModals.push(this.element);
         document.addEventListener('focusin', this.handleFocusIn);
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
     }
+    /** Deactivates focus trapping. */
     deactivate() {
         activeModals = activeModals.filter((modal) => modal !== this.element);
+        this.currentFocus = null;
         document.removeEventListener('focusin', this.handleFocusIn);
         document.removeEventListener('keydown', this.handleKeyDown);
         document.removeEventListener('keyup', this.handleKeyUp);
     }
+    /** Determines if this modal element is currently active or not. */
     isActive() {
         // The "active" modal is always the most recent one shown
         return activeModals[activeModals.length - 1] === this.element;
     }
+    /** Activates external modal behavior and temporarily disables focus trapping. */
+    activateExternal() {
+        this.isExternalActivated = true;
+    }
+    /** Deactivates external modal behavior and re-enables focus trapping. */
+    deactivateExternal() {
+        this.isExternalActivated = false;
+    }
     checkFocus() {
-        if (this.isActive()) {
+        if (this.isActive() && !this.isExternalActivated) {
+            const tabbableElements = getTabbableElements(this.element);
             if (!this.element.matches(':focus-within')) {
-                const { start, end } = getTabbableBoundary(this.element);
+                const start = tabbableElements[0];
+                const end = tabbableElements[tabbableElements.length - 1];
                 const target = this.tabDirection === 'forward' ? start : end;
                 if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
-                    target.focus({ preventScroll: true });
+                    this.currentFocus = target;
+                    target.focus({ preventScroll: false });
                 }
             }
         }
     }
-    handleFocusIn() {
-        this.checkFocus();
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Tab' && event.shiftKey) {
-            this.tabDirection = 'backward';
-            // Ensure focus remains trapped after the key is pressed
-            requestAnimationFrame(() => this.checkFocus());
-        }
-    }
-    handleKeyUp() {
-        this.tabDirection = 'forward';
+    possiblyHasTabbableChildren(element) {
+        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute('controls')
+        // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?
+        );
     }
 }

package/dist/internal/tabbable.d.ts

@@ -3,6 +3,7 @@
  * element because it short-circuits after finding the first and last ones.
  */
 export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
-    start: HTMLElement | null;
-    end: HTMLElement | null;
+    start: HTMLElement;
+    end: HTMLElement;
 };
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

package/dist/internal/tabbable.js

@@ -1,31 +1,78 @@
+// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
+// computedStyle calls are "live" so they only need to be retrieved once for an element.
+const computedStyleMap = new WeakMap();
+function getCachedComputedStyle(el) {
+    let computedStyle = computedStyleMap.get(el);
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+    return computedStyle;
+}
+function isVisible(el) {
+    // This is the fastest check, but isn't supported in Safari.
+    if (typeof el.checkVisibility === 'function') {
+        // Opacity is focusable, visibility is not.
+        return el.checkVisibility({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+    // Fallback "polyfill" for "checkVisibility"
+    const computedStyle = getCachedComputedStyle(el);
+    return (computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none');
+}
+// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
+// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
+// accessible way of handling overflow areas. [Konnor]
+function isOverflowingAndTabbable(el) {
+    const computedStyle = getCachedComputedStyle(el);
+    const { overflowY, overflowX } = computedStyle;
+    if (overflowY === 'scroll' || overflowX === 'scroll') {
+        return true;
+    }
+    if (overflowY !== 'auto' || overflowX !== 'auto') {
+        return false;
+    }
+    // Always overflow === "auto" by this point
+    const isOverflowingY = el.scrollHeight > el.clientHeight;
+    if (isOverflowingY && overflowY === 'auto') {
+        return true;
+    }
+    const isOverflowingX = el.scrollWidth > el.clientWidth;
+    if (isOverflowingX && overflowX === 'auto') {
+        return true;
+    }
+    return false;
+}
 /** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
 function isTabbable(el) {
     const tag = el.tagName.toLowerCase();
-    // Elements with a -1 tab index are not tabbable
-    if (el.getAttribute('tabindex') === '-1') {
+    const tabindex = Number(el.getAttribute('tabindex'));
+    const hasTabindex = el.hasAttribute('tabindex');
+    // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
         return false;
     }
     // Elements with a disabled attribute are not tabbable
     if (el.hasAttribute('disabled')) {
         return false;
     }
-    // Elements with aria-disabled are not tabbable
-    if (el.hasAttribute('aria-disabled') &&
-        el.getAttribute('aria-disabled') !== 'false') {
-        return false;
-    }
-    // Radios without a checked attribute are not tabbable
-    if (tag === 'input' &&
-        el.getAttribute('type') === 'radio' &&
-        !el.hasAttribute('checked')) {
+    // If any parents have "inert", we aren't "tabbable"
+    if (el.closest('[inert]')) {
         return false;
     }
-    // Elements that are hidden have no offsetParent and are not tabbable
-    if (el.offsetParent === null) {
-        return false;
+    if (tag === 'input' && el.getAttribute('type') === 'radio') {
+        const rootNode = el.getRootNode();
+        const findRadios = `input[type='radio'][name="${el.getAttribute('name')}"]`;
+        const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+        if (firstChecked) {
+            return firstChecked === el;
+        }
+        const firstRadio = rootNode.querySelector(findRadios);
+        return firstRadio === el;
     }
-    // Elements without visibility are not tabbable
-    if (window.getComputedStyle(el).visibility === 'hidden') {
+    if (!isVisible(el)) {
         return false;
     }
     // Audio and video elements with the controls attribute are tabbable
@@ -42,7 +89,7 @@ function isTabbable(el) {
         return true;
     }
     // At this point, the following elements are considered tabbable
-    return [
+    const isNativelyTabbable = [
         'button',
         'input',
         'select',
@@ -51,7 +98,13 @@ function isTabbable(el) {
         'audio',
         'video',
         'summary',
+        'iframe',
     ].includes(tag);
+    if (isNativelyTabbable) {
+        return true;
+    }
+    // We save the overflow checks for last, because they're the most expensive
+    return isOverflowingAndTabbable(el);
 }
 /**
  * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
@@ -59,21 +112,60 @@ function isTabbable(el) {
  */
 export function getTabbableBoundary(root) {
     var _a, _b;
-    const allElements = [];
+    const tabbableElements = getTabbableElements(root);
+    // Find the first and last tabbable elements
+    const start = (_a = tabbableElements[0]) !== null && _a !== void 0 ? _a : null;
+    const end = (_b = tabbableElements[tabbableElements.length - 1]) !== null && _b !== void 0 ? _b : null;
+    return { start, end };
+}
+/**
+ * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+ * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+ * This fixes that fun edge case.
+ */
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+    var _a;
+    return (((_a = slotElement.getRootNode({ composed: true })) === null || _a === void 0 ? void 0 : _a.host) !==
+        root);
+}
+export function getTabbableElements(root) {
+    const walkedEls = new WeakMap();
+    const tabbableElements = [];
     function walk(el) {
-        if (el instanceof HTMLElement) {
-            allElements.push(el);
+        if (el instanceof Element) {
+            // if the element has "inert" we can just no-op it.
+            if (el.hasAttribute('inert') || el.closest('[inert]')) {
+                return;
+            }
+            if (walkedEls.has(el)) {
+                return;
+            }
+            walkedEls.set(el, true);
+            if (!tabbableElements.includes(el) && isTabbable(el)) {
+                tabbableElements.push(el);
+            }
+            if (el instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(el, root)) {
+                el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+                    walk(assignedEl);
+                });
+            }
             if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
                 walk(el.shadowRoot);
             }
         }
-        // @ts-expect-error cleanup upon implementation
-        [...el.children].forEach((e) => walk(e));
+        for (const e of el.children) {
+            walk(e);
+        }
     }
     // Collect all elements including the root
     walk(root);
-    // Find the first and last tabbable elements
-    const start = (_a = allElements.find((el) => isTabbable(el))) !== null && _a !== void 0 ? _a : null;
-    const end = (_b = allElements.reverse().find((el) => isTabbable(el))) !== null && _b !== void 0 ? _b : null;
-    return { start, end };
+    // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
+    // So is it worth being right? Or fast?
+    return tabbableElements.sort((a, b) => {
+        // Make sure we sort by tabindex.
+        const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+        const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+        return bTabindex - aTabindex;
+    });
 }

package/dist/templates/decorator.d.ts

@@ -0,0 +1,6 @@
+import '../components/footer-sitemap-item/footer-sitemap-item';
+import '../components/footer-sitemap/footer-sitemap';
+import '../components/footer/footer';
+import '../components/header/header';
+import { Decorator } from '@storybook/web-components-vite';
+export declare const withPageTemplate: Decorator;

package/dist/templates/decorator.js

@@ -0,0 +1,103 @@
+import { html } from 'lit';
+import '../components/footer-sitemap-item/footer-sitemap-item';
+import '../components/footer-sitemap/footer-sitemap';
+import '../components/footer/footer';
+import '../components/header/header';
+export const withPageTemplate = (story) => html `
+  <style>
+    /** CSS Reset */
+    html,
+    body,
+    div,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%;
+      font: inherit;
+      vertical-align: baseline;
+    }
+    body {
+      line-height: 1;
+    }
+    ul {
+      margin: 0;
+    }
+    address {
+      font-style: inherit;
+    }
+
+    /** Common page template */
+    html,
+    body,
+    #storybook-root,
+    #root-inner {
+      height: 100%;
+      margin: 0;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    dsa-header {
+      --header-max-width: 922px;
+      z-index: 1;
+    }
+    dsa-footer {
+      --footer-max-width: 922px;
+    }
+    .layout {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    main {
+      flex-grow: 1;
+      display: flex;
+      justify-content: center;
+      background: var(--dsa-color-surface-base);
+      color: var(--dsa-color-text-on-base-primary);
+      font: var(--dsa-font-medium-normal);
+    }
+    .container {
+      width: -webkit-fill-available;
+      max-width: 922px;
+      margin: 24px 16px 80px;
+    }
+    .placeholder {
+      color: red;
+    }
+  </style>
+  <div class="layout">
+    <dsa-header>
+      <span slot="site-name">Nom du site / service</span>
+      <span slot="baseline">Baseline - précisions</span>
+    </dsa-header>
+    <main>
+      <div class="container">${story()}</div>
+    </main>
+    <dsa-footer>
+      <dsa-footer-sitemap
+        slot="footer-bottom"
+        aria-label="Accessibilité et informations légales"
+        align-links="right"
+      >
+        <dsa-footer-sitemap-item
+          ><a href="#" class="dsa-link dsa-link--standalone"
+            >Accessibilité : partiellement conforme
+          </a>
+        </dsa-footer-sitemap-item>
+        <dsa-footer-sitemap-item
+          ><a href="#" class="dsa-link dsa-link--standalone"
+            >Mentions légales
+          </a>
+        </dsa-footer-sitemap-item>
+      </dsa-footer-sitemap>
+    </dsa-footer>
+  </div>
+`;