feat (a11y): improvments

Author: firestar300

index.html

@@ -60,7 +60,7 @@
         ]
     }
     </script>
-    
+
     <!-- FAQ Schema for Rich Snippets -->
     <script type="application/ld+json">
     {
@@ -136,11 +136,12 @@ <h1 class="text-4xl font-bold text-primary dark:text-indigo-400 mb-2">SVG Path M
                 <div class="flex flex-col gap-4">
                     <div class="flex justify-between items-center">
                         <h2 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Original SVG</h2>
-                        <button type="button" id="clearBtn" class="btn btn-secondary" aria-label="Clear the input textarea">
+                        <button type="button" id="clearBtn" class="btn btn-secondary">
                             <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                 <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                 <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                             </svg>
+                            <span class="sr-only">Clear the input textarea</span>
                         </button>
                     </div>
                     <label for="inputSvg" class="sr-only">Original SVG</label>
@@ -155,10 +156,11 @@ <h2 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Original S
                             <div id="inputPreview" class="flex-1 flex items-center justify-center min-h-[200px] preview-checkerboard rounded-md overflow-hidden" data-bg="transparent">
                                 <div class="text-slate-500 dark:text-slate-400 italic text-center p-8">Preview will appear here</div>
                             </div>
-                            <button type="button" id="inputBgToggle" class="absolute top-2 right-2 p-2 rounded-md bg-white/80 dark:bg-slate-900/80 hover:bg-white dark:hover:bg-slate-900 border border-slate-300 dark:border-slate-600 transition-colors shadow-sm" aria-label="Change background">
+                            <button type="button" id="inputBgToggle" class="absolute top-2 right-2 p-2 rounded-md bg-white/80 dark:bg-slate-900/80 hover:bg-white dark:hover:bg-slate-900 border border-slate-300 dark:border-slate-600 transition-colors shadow-sm">
                                 <svg aria-hidden="true" focusable="false" class="w-4 h-4 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                                 </svg>
+                                <span class="sr-only">Change background color</span>
                             </button>
                         </div>
                         <div id="inputStats" class="p-3 bg-slate-50 dark:bg-slate-900 rounded-md text-sm text-slate-600 dark:text-slate-400"></div>
@@ -190,10 +192,11 @@ <h2 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">Merged SVG
                             <div id="outputPreview" class="flex-1 flex items-center justify-center min-h-[200px] preview-checkerboard rounded-md overflow-hidden" data-bg="transparent">
                                 <div class="text-slate-500 dark:text-slate-400 italic text-center p-8">Preview will appear here</div>
                             </div>
-                            <button type="button" id="outputBgToggle" class="absolute top-2 right-2 p-2 rounded-md bg-white/80 dark:bg-slate-900/80 hover:bg-white dark:hover:bg-slate-900 border border-slate-300 dark:border-slate-600 transition-colors shadow-sm" aria-label="Change background">
+                            <button type="button" id="outputBgToggle" class="absolute top-2 right-2 p-2 rounded-md bg-white/80 dark:bg-slate-900/80 hover:bg-white dark:hover:bg-slate-900 border border-slate-300 dark:border-slate-600 transition-colors shadow-sm">
                                 <svg aria-hidden="true" focusable="false" class="w-4 h-4 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                                 </svg>
+                                <span class="sr-only">Change background color</span>
                             </button>
                         </div>
                         <div id="outputStats" class="p-3 bg-slate-50 dark:bg-slate-900 rounded-md text-sm text-slate-600 dark:text-slate-400"></div>