Accessibilité : un slider doit pouvoir être arrêté de manière définitive (et...

Accessibilité : un slider doit pouvoir être arrêté de manière définitive (et pas simplement au survol de la souris)

images/pause.svg

+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <path d="M5 0c1.105 0 2 .738 2 2v14c0 1.262-.895 2-2 2H2c-1.105 0-2-.738-2-2V2C0 .738.895 0 2 0zm11 0c1 0 2 .74 2 2v14c0 1.262-.895 2-2 2h-3c-1.105 0-2-.738-2-2V2c0-1.26 1-2 2-2z" fill="#494C4E" fill-rule="nonzero"/>
+</svg>

images/play.svg

+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <path d="M4.154 0C2.964 0 2 .951 2 2.125v13.75c0 .784.437 1.504 1.138 1.874.7.37 1.55.329 2.211-.106l9.693-6.875A2.117 2.117 0 0016 9c0-.71-.36-1.374-.96-1.768L5.349.357A2.172 2.172 0 004.154 0z" fill="#494C4E" fill-rule="nonzero"/>
+</svg>

noisettes/sommaire/sommaire_modeportailcognac.html

@@ -39,6 +39,14 @@
 		  focusOnSelect: true
 		});
 		
+		$('.diaporama-pause').on('click', function() {
+		  $('#diaporama .slider-slick').slick('slickPause');
+		});
+
+		$('.diaporama-play').on('click', function() {
+		  $('#diaporama .slider-slick').slick('slickPlay');
+		});
+		
 		$('#cycloshow .slider-slick').slick({
 		  autoplay: true,
 		  lazyLoad: 'ondemand',

noisettes/sommaire_modeportailcognac_zoomsur.html

@@ -6,18 +6,6 @@
 	<header>
 		<h1 class="hide">#TITRE</h1>
 	</header>
-	<div id="liens-diaporama">
-		<ul>
-			<li class="#EDIT{titre}">
-				<a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
-					<span>#TITRE</span>
-					<span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
-				</a>
-			</li>
-			[<li class="hide-for-small-only">(#INCLURE{fond=noisettes/liste_auteurs,id_article,nolink=1})</li>]
-			[<li class="hide-for-small-only">(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})</li>]
-		</ul>
-	</div>
 	<div class="slider-slick">
 		<BOUCLE_Slider(DOCUMENTS){id_article}{mode=document}{par rang_lien, num titre, titre}{!par date}{media IN image,video}{vu=non}>
 		<div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
@@ -53,6 +41,22 @@
 		</div>
 		<//B_Slider>
 	</div>
+	<div class="controles-diaporama">
+		<button class="diaporama-pause" type="button"><img src="#CHEMIN{images/pause.svg}" alt="Mise en pause" /></button>
+		<button class="diaporama-play" type="button"><img src="#CHEMIN{images/play.svg}" alt="Lecture" /></button>
+	</div>
+	<div id="liens-diaporama">
+		<ul>
+			<li class="#EDIT{titre}">
+				<a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
+					<span>#TITRE</span>
+					<span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
+				</a>
+			</li>
+			[<li class="hide-for-small-only">(#INCLURE{fond=noisettes/liste_auteurs,id_article,nolink=1})</li>]
+			[<li class="hide-for-small-only">(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})</li>]
+		</ul>
+	</div>
 </div>
 <!-- fin SLIDER -->
 </BOUCLE_ZoomSur>

stylesportailcognac.css.html

@@ -555,37 +555,20 @@ select {
  .slick-dots:focus-within { 
 	border-bottom: 2px solid #GET{c_triadea}; 
 }
- #liens-diaporama {
-  position: absolute;
-  top: 100px;
-  right: 0;
-  z-index: 1;
-}
-@media only screen and (max-width: 1024px) {
-   #liens-diaporama {
-    top: 5vw;
-  }
-}
-@media only screen and (max-width: 767px) {
-   #liens-diaporama {
-    position: relative;
-	z-index: 0;
-  }
-}
- #liens-diaporama ul {
-  width: 220px;
-  text-align: right;
+
+.controles-diaporama {
+	position: absolute;
+	left: 1rem;
+	top: .4rem;
+	z-index: 1;
 }
-@media only screen and (max-width: 767px) {
-  #liens-diaporama ul {
-    width: 100%;
-	margin: 0;
-  }
-  #liens-diaporama li {
-    padding: 0;
-	width: 100%;
-  }
+
+.controles-diaporama button {
+	background-color: #ffffff80;
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
 }
+
 @media only screen and (max-width: 767px) {
    #liens-diaporama li a span {
     padding: .25em 0;
@@ -636,6 +619,7 @@ select {
   position: absolute;
   top: 100px;
   right: 0;
+  z-index: 1;
 }
 @media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
   #liens-diaporama {
@@ -645,6 +629,7 @@ select {
 @media only screen and (max-width: 767px) {
   #liens-diaporama {
     position: relative;
+	z-index: 0;
   }
 }
 #liens-diaporama ul {
@@ -657,6 +642,13 @@ select {
     width: 100%;
     flex-wrap: wrap;
   }
+  #liens-diaporama li {
+    padding: 0;
+	width: 100%;
+  }
+   #liens-diaporama li a span {
+    padding: .25em 0;
+  }
 }
 #liens-diaporama li {
   /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
@@ -688,9 +680,23 @@ select {
   }
 }
 #liens-diaporama li a span.icon {
+  margin-left: .55rem;
+  padding: .85rem .5rem;
   border-left: 1px solid;
   border-left-color: inherit;
 }
+#liens-diaporama li a span.icon:before {
+  font-size: 2.15rem;
+}
+ #liens-diaporama li a:hover {
+  color: #666 ;
+}
+@media only screen and (max-width: 767px) {
+   #liens-diaporama li a {
+    background-color: #eae9e5;
+  }
+}
+
 
 .slick-slide img {
   margin: 0 auto;