Enhance: group all manual and auto slideshow buttons in a single semantic <section> with heading for accessibility and maintainability

MalusiS · MalusiS · commit 1787b3ab8eb1 · 2025-08-14T01:54:23.000+02:00
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -4,23 +4,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image carousel</title>
-    <link rel="stylesheet" href="style.css">
     <script defer src="slideshow.js"></script>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <h1>Image Carousel</h1>
+    <img id="carousel-img" src="images/puppy1.jpg" alt="puppy-pic">
 
-    <img id="carousel-img" src="./images/puppy1.jpg" alt="puppy-pic" />
+    <section aria-label="Slideshow controls">
+      <h2>Slideshow Controls</h2>
 
-    <div class="button-row">
-      <button id="backward-btn">Backwards</button>
-      <button id="forward-btn">Forward</button>
-    </div>
+      <!-- Manual navigation buttons -->
+      <div class="controls">
+        <button id="backward-btn">Backwards</button>
+        <button id="forward-btn">Forward</button>
+      </div>
 
-    <div class="button-row">
-      <button id="auto-backward">Auto Backwards</button>
-      <button id="auto-forward">Auto Forward</button>
-      <button id="stop">Stop</button>
-    </div>
+      <!-- Automatic navigation buttons -->
+      <div class="controls">
+        <button id="auto-backward">Auto Backwards</button>
+        <button id="auto-forward">Auto Forward</button>
+        <button id="stop">Stop</button>
+      </div>
+    </section>
   </body>
 </html>
