From 23312d59cbc1b038abdfa66f3326aa09bbe98b6d Mon Sep 17 00:00:00 2001
From: lab9 <lab9.fr@gmail.com>
Date: Tue, 11 Jul 2023 19:07:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(tooltip,modal):=20interactio?=
 =?UTF-8?q?n=20globale=20et=20focus=20iOS=20[DS-3460,DS-3395]=20(#691)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Correctif à la pression de la touche Escape sur la modale : si l'élément actif (focus) est un élément de formulaire ou un média, la modale n'est pas refermée pas pour permettre l'interaction native de l'élément actif
- Correctif iOS de la prise de focus au clic
- Fermeture des tooltips dés au clic sur n'importe quel endroit
- Fermeture des tooltip à la pression sur la touche escape, où que soit le focus
---
 .../analytics/installation/configuration.md   |  2 -
 src/component/modal/script/modal/modal.js     | 28 ++++++++++++-
 .../script/tooltip/tooltip-referent.js        | 41 +++++++++++++-----
 src/core/index.js                             |  4 +-
 .../script/api/modules/register/instance.js   |  5 +++
 .../script/api/modules/register/key-codes.js  | 42 +++++++++++++++----
 .../script/api/modules/stage/root-emission.js |  7 ++++
 .../script/api/modules/stage/root-selector.js |  3 ++
 src/core/script/api/modules/stage/root.js     | 28 ++++++++++---
 9 files changed, 133 insertions(+), 27 deletions(-)
 create mode 100644 src/core/script/api/modules/stage/root-emission.js
 create mode 100644 src/core/script/api/modules/stage/root-selector.js

diff --git a/src/analytics/doc/analytics/installation/configuration.md b/src/analytics/doc/analytics/installation/configuration.md
index 2339e9f35..3fb3a7b87 100644
--- a/src/analytics/doc/analytics/installation/configuration.md
+++ b/src/analytics/doc/analytics/installation/configuration.md
@@ -7,7 +7,6 @@ La configuration doit être placée **avant** les fichiers `patch.module.js`, `d
 ```javascript
 <script>
     window.dsfr = {
-        verbose: true,
         analytics: {
             domain: ' mon.domainedetracking.com',
             // collection: 'manual',
@@ -19,7 +18,6 @@ La configuration doit être placée **avant** les fichiers `patch.module.js`, `d
                 // ...
             },
             site: {
-                production: 'false',
                 entity: 'Ministère des armées', // Entity responsible for website
             }
         }
diff --git a/src/component/modal/script/modal/modal.js b/src/component/modal/script/modal/modal.js
index 6f3398afb..fe5f75fef 100644
--- a/src/component/modal/script/modal/modal.js
+++ b/src/component/modal/script/modal/modal.js
@@ -20,7 +20,33 @@ class Modal extends api.core.Disclosure {
     this._isDialog = this.node.tagName === 'DIALOG';
     this.isScrolling = false;
     this.listenClick();
-    this.listenKey(api.core.KeyCodes.ESCAPE, this.conceal.bind(this, false, false), true, true);
+    this.addEmission(api.core.RootEmission.KEYDOWN, this._keydown.bind(this));
+  }
+
+  _keydown (keyCode) {
+    switch (keyCode) {
+      case api.core.KeyCodes.ESCAPE:
+        this._escape();
+        break;
+    }
+  }
+
+  // TODO v2 : passer les tagName d'action en constante
+  _escape () {
+    const tagName = document.activeElement ? document.activeElement.tagName : undefined;
+
+    switch (tagName) {
+      case 'INPUT':
+      case 'LABEL':
+      case 'TEXTAREA':
+      case 'SELECT':
+      case 'AUDIO':
+      case 'VIDEO':
+        break;
+
+      default:
+        this.conceal();
+    }
   }
 
   retrieved () {
diff --git a/src/component/tooltip/script/tooltip/tooltip-referent.js b/src/component/tooltip/script/tooltip/tooltip-referent.js
index 5a8232a9a..15b57b928 100644
--- a/src/component/tooltip/script/tooltip/tooltip-referent.js
+++ b/src/component/tooltip/script/tooltip/tooltip-referent.js
@@ -18,18 +18,39 @@ class TooltipReferent extends api.core.PlacementReferent {
 
   init () {
     super.init();
-    this.listen('focusin', this.focusin.bind(this));
-    this.listen('focusout', this.focusout.bind(this));
+    this.listen('focusin', this.focusIn.bind(this));
+    this.listen('focusout', this.focusOut.bind(this));
     if (!this.matches(TooltipSelector.BUTTON)) {
-      this.listen('mouseover', this.mouseover.bind(this));
-      this.placement.listen('mouseover', this.mouseover.bind(this));
-      this.listen('mouseout', this.mouseout.bind(this));
-      this.placement.listen('mouseout', this.mouseout.bind(this));
+      const mouseover = this.mouseover.bind(this);
+      this.listen('mouseover', mouseover);
+      this.placement.listen('mouseover', mouseover);
+      const mouseout = this.mouseout.bind(this);
+      this.listen('mouseout', mouseout);
+      this.placement.listen('mouseout', mouseout);
     }
-    this.listenKey(api.core.KeyCodes.ESCAPE, this.escape.bind(this), true, true);
+    this.addEmission(api.core.RootEmission.KEYDOWN, this._keydown.bind(this));
+    this.listen('click', this._click.bind(this));
+    this.addEmission(api.core.RootEmission.CLICK, this._clickOut.bind(this));
   }
 
-  escape () {
+  _click () {
+    this.focus();
+  }
+
+  _clickOut (target) {
+    if (!this.node.contains(target)) this.blur();
+  }
+
+  _keydown (keyCode) {
+    switch (keyCode) {
+      case api.core.KeyCodes.ESCAPE:
+        this.blur();
+        this.close();
+        break;
+    }
+  }
+
+  close () {
     this.state = 0;
   }
 
@@ -43,11 +64,11 @@ class TooltipReferent extends api.core.PlacementReferent {
     this._state = value;
   }
 
-  focusin () {
+  focusIn () {
     this.state |= TooltipReferentState.FOCUS;
   }
 
-  focusout () {
+  focusOut () {
     this.state &= ~TooltipReferentState.FOCUS;
   }
 
diff --git a/src/core/index.js b/src/core/index.js
index 3ea4a31e7..3d13671f6 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -18,7 +18,8 @@ import { Equisized } from './script/equisized/equisized.js';
 import { EquisizedsGroup } from './script/equisized/equisizeds-group.js';
 import { EquisizedEmission } from './script/equisized/equisized-emission.js';
 import { Toggle } from './script/action/toggle/toggle';
-import { RootSelector } from './script/api/modules/stage/root.js';
+import { RootSelector } from './script/api/modules/stage/root-selector.js';
+import { RootEmission } from './script/api/modules/stage/root-emission.js';
 import { InjectSvg } from './script/inject/inject-svg';
 import { InjectSvgSelector } from './script/inject/inject-svg-selector';
 import { Artwork } from './script/artwork/artwork';
@@ -51,6 +52,7 @@ api.core = {
   CollapsesGroup: CollapsesGroup,
   CollapseSelector: CollapseSelector,
   RootSelector: RootSelector,
+  RootEmission: RootEmission,
   Equisized: Equisized,
   EquisizedEmission: EquisizedEmission,
   Toggle: Toggle,
diff --git a/src/core/script/api/modules/register/instance.js b/src/core/script/api/modules/register/instance.js
index e5960cbd5..beeba6ba8 100644
--- a/src/core/script/api/modules/register/instance.js
+++ b/src/core/script/api/modules/register/instance.js
@@ -109,6 +109,7 @@ class Instance {
     this.node.dispatchEvent(event);
   }
 
+  // TODO v2 => listener au niveau des éléments qui redistribuent aux instances.
   listen (type, closure, options) {
     if (!this._listeners[type]) this._listeners[type] = [];
     const listeners = this._listeners[type];
@@ -435,6 +436,10 @@ class Instance {
     this.node.focus();
   }
 
+  blur () {
+    this.node.blur();
+  }
+
   focusClosest () {
     const closest = this._focusClosest(this.node.parentNode);
     if (closest) closest.focus();
diff --git a/src/core/script/api/modules/register/key-codes.js b/src/core/script/api/modules/register/key-codes.js
index 0bdedd9bd..0910a9397 100644
--- a/src/core/script/api/modules/register/key-codes.js
+++ b/src/core/script/api/modules/register/key-codes.js
@@ -1,10 +1,36 @@
 export const KeyCodes = {
-  TAB: 9,
-  ESCAPE: 27,
-  END: 35,
-  HOME: 36,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40
+  TAB: {
+    id: 'tab',
+    value: 9
+  },
+  ESCAPE: {
+    id: 'escape',
+    value: 27
+  },
+  END: {
+    id: 'end',
+    value: 35
+  },
+  HOME: {
+    id: 'home',
+    value: 36
+  },
+  LEFT: {
+    id: 'left',
+    value: 37
+  },
+  UP: {
+    id: 'up',
+    value: 38
+  },
+  RIGHT: {
+    id: 'right',
+    value: 39
+  },
+  DOWN: {
+    id: 'down',
+    value: 40
+  }
 };
+
+export const getKeyCode = (keyCode) => Object.values(KeyCodes).filter(entry => entry.value === keyCode)[0];
diff --git a/src/core/script/api/modules/stage/root-emission.js b/src/core/script/api/modules/stage/root-emission.js
new file mode 100644
index 000000000..9b6aa7aef
--- /dev/null
+++ b/src/core/script/api/modules/stage/root-emission.js
@@ -0,0 +1,7 @@
+import ns from '../../utilities/namespace.js';
+
+export const RootEmission = {
+  CLICK: ns.emission('root', 'click'),
+  KEYDOWN: ns.emission('root', 'keydown'),
+  KEYUP: ns.emission('root', 'keyup')
+};
diff --git a/src/core/script/api/modules/stage/root-selector.js b/src/core/script/api/modules/stage/root-selector.js
new file mode 100644
index 000000000..e775eb52c
--- /dev/null
+++ b/src/core/script/api/modules/stage/root-selector.js
@@ -0,0 +1,3 @@
+export const RootSelector = {
+  ROOT: ':root'
+};
diff --git a/src/core/script/api/modules/stage/root.js b/src/core/script/api/modules/stage/root.js
index 0e7e43353..670188944 100644
--- a/src/core/script/api/modules/stage/root.js
+++ b/src/core/script/api/modules/stage/root.js
@@ -1,15 +1,33 @@
 import { Element } from './element.js';
 import ns from '../../utilities/namespace.js';
+import { RootEmission } from './root-emission';
+import { getKeyCode } from '../register/key-codes';
 
 class Root extends Element {
   constructor () {
     super(document.documentElement, 'root');
     this.node.setAttribute(ns.attr('js'), true);
+    this.listen();
+  }
+
+  listen () {
+    // TODO v2 => listener au niveau des éléments qui redistribuent aux instances.
+    document.documentElement.addEventListener('click', this.click.bind(this), { capture: true });
+    document.documentElement.addEventListener('keydown', this.keydown.bind(this), { capture: true });
+    document.documentElement.addEventListener('keyup', this.keyup.bind(this), { capture: true });
+  }
+
+  click (e) {
+    this.emit(RootEmission.CLICK, e.target);
   }
-}
 
-const RootSelector = {
-  ROOT: ':root'
-};
+  keydown (e) {
+    this.emit(RootEmission.KEYDOWN, getKeyCode(e.keyCode));
+  }
+
+  keyup (e) {
+    this.emit(RootEmission.KEYUP, getKeyCode(e.keyCode));
+  }
+}
 
-export { Root, RootSelector };
+export { Root };