Fix bug with dots in the carousel + add titles on dots for accessibility.

ngiraud · ngiraud · commit b7814203ca0b · 2020-02-01T15:22:38.000+01:00
diff --git a/templates/html_report/index.php b/templates/html_report/index.php
@@ -74,8 +74,8 @@
                                 </div>
                             </div>
                             <div class="icon-container">
-                                <span class="dot dot-first active"></span>
-                                <span class="dot dot-second"></span>
+                                <span class="dot dot-first active" title="Maintainability / complexity"></span>
+                                <span class="dot dot-second" title="Maintainability without comments / complexity"></span>
                             </div>
                         </div>
                     </div>
diff --git a/templates/html_report/js/graph-carousel.js b/templates/html_report/js/graph-carousel.js
@@ -46,15 +46,24 @@
         for (var i = 0; i < slides.length; i += 1) {
             slides[i].setAttribute('style', 'transform:translateX(-' + carouselCount + '%)');
         }
-        activeDot(e.target || e.srcElement);
+        activeDot();
     }
 
-    function activeDot(target)
+    function activeDot()
     {
         for (var i = 0; i < dots.length; i++) {
             dots[i].classList.remove('active')
         }
-        target.classList.add('active');
+        switch (carouselCount) {
+            case 0:
+                dots[0].classList.add('active');
+                break;
+            case 100:
+                dots[1].classList.add('active');
+                break;
+            default:
+                break;
+        }
     }
 
     // create new Event to dispatch click for auto scroll
diff --git a/templates/html_report/panel.php b/templates/html_report/panel.php
@@ -130,8 +130,8 @@ class="number"><?php echo $avg->lcom ?></div>
                     </div>
                 </div>
                 <div class="icon-container">
-                    <span class="dot dot-first active"></span>
-                    <span class="dot dot-second"></span>
+                    <span class="dot dot-first active" title="Maintainability / complexity"></span>
+                    <span class="dot dot-second" title="Maintainability without comments / complexity"></span>
                 </div>
             </div>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -46,15 +46,24 @@`
`46`	`46`	`for (var i = 0; i < slides.length; i += 1) {`
`47`	`47`	`slides[i].setAttribute('style', 'transform:translateX(-' + carouselCount + '%)');`
`48`	`48`	`}`
`49`		`- activeDot(e.target \|\| e.srcElement);`
	`49`	`+ activeDot();`
`50`	`50`	`}`
`51`	`51`
`52`		`- function activeDot(target)`
	`52`	`+ function activeDot()`
`53`	`53`	`{`
`54`	`54`	`for (var i = 0; i < dots.length; i++) {`
`55`	`55`	`dots[i].classList.remove('active')`
`56`	`56`	`}`
`57`		`- target.classList.add('active');`
	`57`	`+ switch (carouselCount) {`
	`58`	`+ case 0:`
	`59`	`+ dots[0].classList.add('active');`
	`60`	`+ break;`
	`61`	`+ case 100:`
	`62`	`+ dots[1].classList.add('active');`
	`63`	`+ break;`
	`64`	`+ default:`
	`65`	`+ break;`
	`66`	`+ }`
`58`	`67`	`}`
`59`	`68`
`60`	`69`	`// create new Event to dispatch click for auto scroll`