Correction du focus sur les boutons modales.

Orange-OpenSource · Dec 5, 2024 · 0c8a67c · 0c8a67c
1 parent c992286
commit 0c8a67c
Show file tree

Hide file tree

Showing 31 changed files with 101 additions and 63 deletions.
diff --git a/dist/extension/_locales/en/messages.json b/dist/extension/_locales/en/messages.json
@@ -440,7 +440,7 @@
 		"message": "Press escape to close the mask."
 	},
 	"setting_marginAlign": {
-		"message": "Margin & Alignment"
+		"message": "Margin & Landmark"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "To anchor reading to the left"

diff --git a/dist/extension/_locales/fr/messages.json b/dist/extension/_locales/fr/messages.json
@@ -440,7 +440,7 @@
 		"message": "Appuyer sur échap pour fermer le masque."
 	},
 	"setting_marginAlign": {
-		"message": "Marge et alignement"
+		"message": "Marge et repères"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "Pour ancrer la lecture à gauche"

diff --git a/dist/extension/assets/json/modes-of-use.json b/dist/extension/assets/json/modes-of-use.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.0.20",
+	"version": "1.0.21",
 	"selectedMode": "facilePlus",
 	"modes": [
 		{
@@ -134,7 +134,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -682,7 +682,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -870,7 +870,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 1,
 						"isTool": false,
 						"order": null

diff --git a/dist/extension/css/styles.min.css b/dist/extension/css/styles.min.css
diff --git a/dist/extension/css/styles.min.css.map b/dist/extension/css/styles.min.css.map
diff --git a/dist/extension/js/toolbar.js b/dist/extension/js/toolbar.js
@@ -1,5 +1,5 @@
 /*
- * orange-confort-plus - version 5.0.0-alpha.8 - 12/11/2024
+ * orange-confort-plus - version 5.0.0-alpha.8 - 05/12/2024
  * Enhance user experience on web sites
  * © 2014 - 2024 Orange SA
  */
@@ -1877,7 +1877,7 @@ class DeleteBackgroundImagesService {
     classDeleteBackgroundImg=`${PREFIX}delete-background-img`;
     classDeleteForegroundImg=`${PREFIX}delete-foreground-img`;
     classSpanImage=`${PREFIX}delete-background-images__span`;
-    styleDeleteBackgroundImages=`\n\t\t.${this.classDeleteBackgroundImg},\n\t\t.${this.classDeleteBackgroundImg}:before,\n\t\t.${this.classDeleteBackgroundImg}:after {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: white;\n\t\t\tcolor: black;\n\t\t}\n\t`;
+    styleDeleteBackgroundImages=`\n\t\t.${this.classDeleteBackgroundImg},\n\t\t.${this.classDeleteBackgroundImg}:before,\n\t\t.${this.classDeleteBackgroundImg}:after {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: white;\n\t\t\tcolor: black;\n\t\t}\n\n\t\t.${this.classDeleteBackgroundImg} * {\n\t\t\tcolor: black;\n\t\t}\n\t`;
     styleDeleteForegroundImages=`\n\t\t.${this.classSpanImage} {\n\t\t\tfont-size: 1rem;\n\t\t}\n\n\t\t.${this.classDeleteForegroundImg} {\n\t\t\tvisibility: hidden !important;\n\t\t}\n\t`;
     styleDeleteTransparencyEffects=`\n\t\t*, *::before, *::after {\n\t\t\topacity: 1 !important;\n\t\t\tfilter: none !important\n\t\t}\n\t`;
     constructor() {
@@ -3720,7 +3720,7 @@ customElements.define("app-capital-letters", CapitalLettersComponent);
 
 const tmplClearlyLinks = document.createElement("template");
 
-tmplClearlyLinks.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n\t<app-btn-modal class="d-none"></app-btn-modal>\n</div>\n`;
+tmplClearlyLinks.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n</div>\n`;
 
 class ClearlyLinksComponent extends AbstractSetting {
     constructor() {
@@ -3976,7 +3976,7 @@ customElements.define("app-scroll-aspect", ScrollAspectComponent);
 
 const tmplScrollType = document.createElement("template");
 
-tmplScrollType.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n\t<app-btn-modal class="d-none"></app-btn-modal>\n</div>\n`;
+tmplScrollType.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n</div>\n`;
 
 class ScrollTypeComponent extends AbstractSetting {
     constructor() {
@@ -4132,7 +4132,7 @@ customElements.define("app-text-color", TextColorComponent);
 
 const btnModalLayout = document.createElement("template");
 
-btnModalLayout.innerHTML = `\n\t<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice"></button>`;
+btnModalLayout.innerHTML = `\n\t<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice">\n\t</button>`;
 
 class BtnModalComponent extends HTMLElement {
     static observedAttributes=[ "data-name", "data-disabled" ];

diff --git a/dist/extension/js/toolbar.min.js b/dist/extension/js/toolbar.min.js
diff --git a/dist/extension/js/toolbar.min.js.map b/dist/extension/js/toolbar.min.js.map
diff --git a/dist/serveur/_locales/en/messages.json b/dist/serveur/_locales/en/messages.json
@@ -440,7 +440,7 @@
 		"message": "Press escape to close the mask."
 	},
 	"setting_marginAlign": {
-		"message": "Margin & Alignment"
+		"message": "Margin & Landmark"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "To anchor reading to the left"

diff --git a/dist/serveur/_locales/fr/messages.json b/dist/serveur/_locales/fr/messages.json
@@ -440,7 +440,7 @@
 		"message": "Appuyer sur échap pour fermer le masque."
 	},
 	"setting_marginAlign": {
-		"message": "Marge et alignement"
+		"message": "Marge et repères"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "Pour ancrer la lecture à gauche"

diff --git a/dist/serveur/assets/json/modes-of-use.json b/dist/serveur/assets/json/modes-of-use.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.0.20",
+	"version": "1.0.21",
 	"selectedMode": "facilePlus",
 	"modes": [
 		{
@@ -134,7 +134,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -682,7 +682,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -870,7 +870,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 1,
 						"isTool": false,
 						"order": null

diff --git a/dist/serveur/css/styles.min.css b/dist/serveur/css/styles.min.css
diff --git a/dist/serveur/css/styles.min.css.map b/dist/serveur/css/styles.min.css.map
diff --git a/dist/serveur/js/toolbar.js b/dist/serveur/js/toolbar.js
@@ -1,5 +1,5 @@
 /*
- * orange-confort-plus - version 5.0.0-alpha.8 - 12/11/2024
+ * orange-confort-plus - version 5.0.0-alpha.8 - 05/12/2024
  * Enhance user experience on web sites
  * © 2014 - 2024 Orange SA
  */
@@ -1136,7 +1136,7 @@ class DeleteBackgroundImagesService {
     classDeleteBackgroundImg=`${PREFIX}delete-background-img`;
     classDeleteForegroundImg=`${PREFIX}delete-foreground-img`;
     classSpanImage=`${PREFIX}delete-background-images__span`;
-    styleDeleteBackgroundImages=`\n\t\t.${this.classDeleteBackgroundImg},\n\t\t.${this.classDeleteBackgroundImg}:before,\n\t\t.${this.classDeleteBackgroundImg}:after {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: white;\n\t\t\tcolor: black;\n\t\t}\n\t`;
+    styleDeleteBackgroundImages=`\n\t\t.${this.classDeleteBackgroundImg},\n\t\t.${this.classDeleteBackgroundImg}:before,\n\t\t.${this.classDeleteBackgroundImg}:after {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: white;\n\t\t\tcolor: black;\n\t\t}\n\n\t\t.${this.classDeleteBackgroundImg} * {\n\t\t\tcolor: black;\n\t\t}\n\t`;
     styleDeleteForegroundImages=`\n\t\t.${this.classSpanImage} {\n\t\t\tfont-size: 1rem;\n\t\t}\n\n\t\t.${this.classDeleteForegroundImg} {\n\t\t\tvisibility: hidden !important;\n\t\t}\n\t`;
     styleDeleteTransparencyEffects=`\n\t\t*, *::before, *::after {\n\t\t\topacity: 1 !important;\n\t\t\tfilter: none !important\n\t\t}\n\t`;
     constructor() {
@@ -2979,7 +2979,7 @@ customElements.define("app-capital-letters", CapitalLettersComponent);
 
 const tmplClearlyLinks = document.createElement("template");
 
-tmplClearlyLinks.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n\t<app-btn-modal class="d-none"></app-btn-modal>\n</div>\n`;
+tmplClearlyLinks.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n</div>\n`;
 
 class ClearlyLinksComponent extends AbstractSetting {
     constructor() {
@@ -3235,7 +3235,7 @@ customElements.define("app-scroll-aspect", ScrollAspectComponent);
 
 const tmplScrollType = document.createElement("template");
 
-tmplScrollType.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n\t<app-btn-modal class="d-none"></app-btn-modal>\n</div>\n`;
+tmplScrollType.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n</div>\n`;
 
 class ScrollTypeComponent extends AbstractSetting {
     constructor() {
@@ -3391,7 +3391,7 @@ customElements.define("app-text-color", TextColorComponent);
 
 const btnModalLayout = document.createElement("template");
 
-btnModalLayout.innerHTML = `\n\t<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice"></button>`;
+btnModalLayout.innerHTML = `\n\t<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice">\n\t</button>`;
 
 class BtnModalComponent extends HTMLElement {
     static observedAttributes=[ "data-name", "data-disabled" ];

diff --git a/dist/serveur/js/toolbar.min.js b/dist/serveur/js/toolbar.min.js
diff --git a/dist/serveur/js/toolbar.min.js.map b/dist/serveur/js/toolbar.min.js.map
diff --git a/docs/_locales/en/messages.json b/docs/_locales/en/messages.json
@@ -440,7 +440,7 @@
 		"message": "Press escape to close the mask."
 	},
 	"setting_marginAlign": {
-		"message": "Margin & Alignment"
+		"message": "Margin & Landmark"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "To anchor reading to the left"

diff --git a/docs/_locales/fr/messages.json b/docs/_locales/fr/messages.json
@@ -440,7 +440,7 @@
 		"message": "Appuyer sur échap pour fermer le masque."
 	},
 	"setting_marginAlign": {
-		"message": "Marge et alignement"
+		"message": "Marge et repères"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "Pour ancrer la lecture à gauche"

diff --git a/docs/assets/json/modes-of-use.json b/docs/assets/json/modes-of-use.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.0.20",
+	"version": "1.0.21",
 	"selectedMode": "facilePlus",
 	"modes": [
 		{
@@ -134,7 +134,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -682,7 +682,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -870,7 +870,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 1,
 						"isTool": false,
 						"order": null

diff --git a/docs/css/styles.min.css b/docs/css/styles.min.css
diff --git a/docs/js/toolbar.js b/docs/js/toolbar.js
@@ -1,5 +1,5 @@
 /*
- * orange-confort-plus - version 5.0.0-alpha.8 - 12/11/2024
+ * orange-confort-plus - version 5.0.0-alpha.8 - 05/12/2024
  * Enhance user experience on web sites
  * © 2014 - 2024 Orange SA
  */
@@ -1136,7 +1136,7 @@ class DeleteBackgroundImagesService {
     classDeleteBackgroundImg=`${PREFIX}delete-background-img`;
     classDeleteForegroundImg=`${PREFIX}delete-foreground-img`;
     classSpanImage=`${PREFIX}delete-background-images__span`;
-    styleDeleteBackgroundImages=`\n\t\t.${this.classDeleteBackgroundImg},\n\t\t.${this.classDeleteBackgroundImg}:before,\n\t\t.${this.classDeleteBackgroundImg}:after {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: white;\n\t\t\tcolor: black;\n\t\t}\n\t`;
+    styleDeleteBackgroundImages=`\n\t\t.${this.classDeleteBackgroundImg},\n\t\t.${this.classDeleteBackgroundImg}:before,\n\t\t.${this.classDeleteBackgroundImg}:after {\n\t\t\tbackground-image: none !important;\n\t\t\tbackground-color: white;\n\t\t\tcolor: black;\n\t\t}\n\n\t\t.${this.classDeleteBackgroundImg} * {\n\t\t\tcolor: black;\n\t\t}\n\t`;
     styleDeleteForegroundImages=`\n\t\t.${this.classSpanImage} {\n\t\t\tfont-size: 1rem;\n\t\t}\n\n\t\t.${this.classDeleteForegroundImg} {\n\t\t\tvisibility: hidden !important;\n\t\t}\n\t`;
     styleDeleteTransparencyEffects=`\n\t\t*, *::before, *::after {\n\t\t\topacity: 1 !important;\n\t\t\tfilter: none !important\n\t\t}\n\t`;
     constructor() {
@@ -2979,7 +2979,7 @@ customElements.define("app-capital-letters", CapitalLettersComponent);
 
 const tmplClearlyLinks = document.createElement("template");
 
-tmplClearlyLinks.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n\t<app-btn-modal class="d-none"></app-btn-modal>\n</div>\n`;
+tmplClearlyLinks.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n</div>\n`;
 
 class ClearlyLinksComponent extends AbstractSetting {
     constructor() {
@@ -3235,7 +3235,7 @@ customElements.define("app-scroll-aspect", ScrollAspectComponent);
 
 const tmplScrollType = document.createElement("template");
 
-tmplScrollType.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n\t<app-btn-modal class="d-none"></app-btn-modal>\n</div>\n`;
+tmplScrollType.innerHTML = `\n<div class="d-flex align-items-center gap-3 h-100">\n\t<app-btn-setting></app-btn-setting>\n</div>\n`;
 
 class ScrollTypeComponent extends AbstractSetting {
     constructor() {
@@ -3391,7 +3391,7 @@ customElements.define("app-text-color", TextColorComponent);
 
 const btnModalLayout = document.createElement("template");
 
-btnModalLayout.innerHTML = `\n\t<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice"></button>`;
+btnModalLayout.innerHTML = `\n\t<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice">\n\t</button>`;
 
 class BtnModalComponent extends HTMLElement {
     static observedAttributes=[ "data-name", "data-disabled" ];

diff --git a/docs/js/toolbar.min.js b/docs/js/toolbar.min.js
diff --git a/docs/js/toolbar.min.js.map b/docs/js/toolbar.min.js.map
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -440,7 +440,7 @@
 		"message": "Press escape to close the mask."
 	},
 	"setting_marginAlign": {
-		"message": "Margin & Alignment"
+		"message": "Margin & Landmark"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "To anchor reading to the left"

diff --git a/src/_locales/fr/messages.json b/src/_locales/fr/messages.json
@@ -440,7 +440,7 @@
 		"message": "Appuyer sur échap pour fermer le masque."
 	},
 	"setting_marginAlign": {
-		"message": "Marge et alignement"
+		"message": "Marge et repères"
 	},
 	"setting_marginAlign_instruction": {
 		"message": "Pour ancrer la lecture à gauche"

diff --git a/src/app/services/settings/delete-background-images.service.ts b/src/app/services/settings/delete-background-images.service.ts
@@ -14,6 +14,10 @@ class DeleteBackgroundImagesService {
 			background-color: white;
 			color: black;
 		}
+
+		.${this.classDeleteBackgroundImg} * {
+			color: black;
+		}
 	`;
 
 	styleDeleteForegroundImages = `

diff --git a/src/app/shared/btn-modal.component.ts b/src/app/shared/btn-modal.component.ts
@@ -1,6 +1,7 @@
 const btnModalLayout: HTMLTemplateElement = document.createElement('template');
 btnModalLayout.innerHTML = `
-	<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice"></button>`;
+	<button type="button" class="btn btn-primary pe-4 sc-btn-modal" data-i18n="moreChoice">
+	</button>`;
 
 class BtnModalComponent extends HTMLElement {
 	static observedAttributes = ['data-name', 'data-disabled'];

diff --git a/src/app/shared/settings/clearly-links.component.ts b/src/app/shared/settings/clearly-links.component.ts
@@ -2,7 +2,6 @@ const tmplClearlyLinks: HTMLTemplateElement = document.createElement('template')
 tmplClearlyLinks.innerHTML = `
 <div class="d-flex align-items-center gap-3 h-100">
 	<app-btn-setting></app-btn-setting>
-	<app-btn-modal class="d-none"></app-btn-modal>
 </div>
 `;
 

diff --git a/src/app/shared/settings/scroll-type.component.ts b/src/app/shared/settings/scroll-type.component.ts
@@ -2,7 +2,6 @@ const tmplScrollType: HTMLTemplateElement = document.createElement('template');
 tmplScrollType.innerHTML = `
 <div class="d-flex align-items-center gap-3 h-100">
 	<app-btn-setting></app-btn-setting>
-	<app-btn-modal class="d-none"></app-btn-modal>
 </div>
 `;
 

diff --git a/src/assets/json/modes-of-use.json b/src/assets/json/modes-of-use.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.0.20",
+	"version": "1.0.21",
 	"selectedMode": "facilePlus",
 	"modes": [
 		{
@@ -134,7 +134,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -682,7 +682,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 0,
 						"isTool": false,
 						"order": null
@@ -870,7 +870,7 @@
 				},
 				{
 					"scrollType": {
-						"values": "noModifications,scrollOnMouseover",
+						"values": "noModifications,scrollOnClick,scrollOnMouseover",
 						"valueSelected": 1,
 						"isTool": false,
 						"order": null