@iris.interactive/handcook 7.0.10 → 7.1.0-beta.1

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-7.0.10-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-7.1.0-beta.1-blue.svg?cacheSeconds=2592000)
 ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
 [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
 [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "7.0.10",
+  "version": "7.1.0-beta.1",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/scripts/components/collapse/collapse.component.js

@@ -39,9 +39,15 @@ export class HcCollapse {
 		});
 		collapseList.map(function (collapse) {
 			document.querySelectorAll(`[data-hc-collapse-trigger="${collapse._element.getAttribute("data-hc-collapse")}"]`).forEach(trigger => {
-				trigger.addEventListener('click', function (e) {
+				const handleTriggerAction = (e) => {
 					e.preventDefault();
 					collapse.toggle();
+				};
+				trigger.addEventListener('click', handleTriggerAction);
+				trigger.addEventListener('keydown', (e) => {
+					if (e.which == 13 ) {
+						handleTriggerAction(e);
+					}
 				});
 			});
 		});
@@ -52,6 +58,7 @@ export class HcCollapse {
 					if (triggerEl.classList.contains('active')) {
 						triggerEl.classList.remove('active');
 					}
+					triggerEl.setAttribute('aria-expanded', 'false');
 				});
 				trigger.dispatchEvent(this.hideEvent);
 			});
@@ -63,6 +70,7 @@ export class HcCollapse {
 					if (!triggerEl.classList.contains('active')) {
 						triggerEl.classList.add('active');
 					}
+					triggerEl.setAttribute('aria-expanded', 'true');
 				});
 				trigger.dispatchEvent(this.showEvent);
 			});

package/public/scripts/components/slider/slider.component.js

@@ -198,6 +198,7 @@ export class HcSlider {
             const items = [].slice.call(this.slider.children);
             items.forEach(item => {
                 item.classList.add('swiper-slide');
+                item.setAttribute('aria-roledescription', 'slide');
             });
 
             // On ajoute la classe swiper a notre slider,
@@ -237,7 +238,7 @@ export class HcSlider {
                     buttonsWrapper.appendChild(buttonPrev);
                     buttonsWrapper.appendChild(buttonNext);
 
-                    this.slider.appendChild(buttonsWrapper);
+                    this.slider.prepend(buttonsWrapper);
                 } else {
                     if (!this.slider.hasAttribute('data-hc-slider-arrow-prev') && prevEl.length === 0) {
                         const buttonPrev = document.createElement("div");
@@ -266,6 +267,14 @@ export class HcSlider {
             grabCursor: true,
             loop: false,
             watchSlidesProgress: true,
+            a11y: {
+                prevSlideMessage: IRISCollectionTheme.translate.slider.prevSlideMessage ?? 'Slide précédente',
+                nextSlideMessage: IRISCollectionTheme.translate.slider.nextSlideMessage ?? 'Slide suivante',
+                firstSlideMessage: IRISCollectionTheme.translate.slider.firstSlideMessage ?? 'Vous êtes sur la première slide',
+                lastSlideMessage: IRISCollectionTheme.translate.slider.lastSlideMessage ?? 'Vous avez atteint la dernière slide',
+                paginationBulletMessage: IRISCollectionTheme.translate.slider.paginationBulletMessage ?? 'Aller sur la slide {{index}}',
+                slideLabelMessage: IRISCollectionTheme.translate.slider.slideLabelMessage ?? 'Slide {{index}} sur {{slidesLength}}',
+            },
             on: {
                 init: (swiper) => {
 

package/public/scripts/components/tooltip/tooltip.component.js

@@ -40,14 +40,14 @@ export class HcTooltip {
 		document.querySelectorAll(elements).forEach(element => {
 			let options = {};
 			Object.assign(options, this.defaultOptions, overrideOptions);
-			options.trigger = options.trigger != '' ? options.trigger : (element.hasAttribute(TooltipEnum.attrPopover) ? "click" : "mouseenter");
+			options.trigger = options.trigger != '' ? options.trigger : (element.hasAttribute(TooltipEnum.attrPopover) ? "click focus" : "mouseenter focus");
 			options.content = options.content != '' ? options.content : (element.hasAttribute(TooltipEnum.attrContent) ? element.getAttribute(TooltipEnum.attrContent) : '');
 			options.placement = options.placement != '' ? options.placement : (element.hasAttribute(TooltipEnum.attrPlacement) ? element.getAttribute(TooltipEnum.attrPlacement) : 'bottom');
 			options.interactive = options.interactive != '' ? options.interactive : (element.hasAttribute(TooltipEnum.attrInteractive) ? element.getAttribute(TooltipEnum.attrInteractive) : false);
 			let backgroundColor = element.hasAttribute(TooltipEnum.attrBackgroundColor) ? element.getAttribute(TooltipEnum.attrBackgroundColor) : '';
 			let color = element.hasAttribute(TooltipEnum.attrColor) ? element.getAttribute(TooltipEnum.attrColor) : '';
 			let fontSize = element.hasAttribute(TooltipEnum.attrFontSize) ? element.getAttribute(TooltipEnum.attrFontSize) : '';
-			if (options.trigger === 'click') {
+			if (options.trigger.indexOf('click') !== -1) {
 				element.addEventListener('click', (e) => {
 					e.preventDefault();
 				});

package/public/styles/scss/_variables.scss

@@ -608,3 +608,7 @@ $c-medium: #1f70e3;
 $c-intermediate: #ff890e;
 $c-hard: #ef5350;
 $c-veryhard: #000;
+
+/* Grey
+/ ================================================== */
+$c-grey: #757575

package/public/styles/scss/mixins/_mixin-style.scss

@@ -169,9 +169,7 @@
         @include transition;
     }
 
-    &:visited,
-    &:focus,
-    &:focus-within {
+    &:visited {
         color: $button-color;
         background-color: $button-background-color;
         background-image: $button-background-image;
@@ -180,7 +178,7 @@
         border: $button-border;
     }
 
-    @include hover {
+    @include hover-focus {
         color: $button-color-hover;
         background-color: $button-background-color-hover;
         border: $button-border-hover;
@@ -228,9 +226,7 @@
         @include transition;
     }
 
-    &:visited,
-    &:focus,
-    &:focus-within {
+    &:visited {
         color: $secondary-button-color;
         background-color: $secondary-button-background-color;
         background-image: $secondary-button-background-image;
@@ -239,7 +235,7 @@
         border: $secondary-button-border;
     }
 
-    @include hover {
+    @include hover-focus {
         color: $secondary-button-color-hover;
         background-color: $secondary-button-background-color-hover;
         border: $secondary-button-border-hover;