Merge pull request #962 from AB527/feat/879-top-bar-hover-text

(Feature) Hover text on top bar buttons that hide their labels

src/pages/pdf-multi-tool.html

@@ -136,6 +136,8 @@
       >
         <button
           id="reset-btn"
+          title="Reset"
+          data-i18n-title="multiTool.reset"
           style="display: none"
           class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
         >
@@ -158,6 +160,8 @@
 
         <button
           id="faq-open-btn"
+          title="FAQ"
+          data-i18n-title="footer.faqLink"
           type="button"
           class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
           aria-label="FAQ"
@@ -171,6 +175,8 @@
 
         <button
           id="close-tool-btn"
+          title="Close"
+          data-i18n-title="common.close"
           class="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-white px-2.5 sm:px-3 py-1.5 rounded-lg text-sm transition-colors"
           aria-label="Close"
         >

src/pages/pdf-workflow.html

@@ -315,12 +315,14 @@
         >
           <button
             id="toolbox-toggle"
+            title="Toolbox"
             class="md:hidden bg-gray-700 hover:bg-gray-600 text-white p-1.5 rounded-lg transition-colors"
           >
             <i class="ph ph-plus-circle text-lg"></i>
           </button>
           <button
             id="run-btn"
+            title="Run"
             class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-3 md:px-4 py-1.5 rounded-lg flex items-center gap-1.5 text-sm transition-colors"
           >
             <i class="ph ph-play text-base"></i>
@@ -328,6 +330,7 @@
           </button>
           <button
             id="clear-btn"
+            title="Clear"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-trash text-base md:hidden"></i>
@@ -336,6 +339,7 @@
           <div class="flex-1"></div>
           <button
             id="save-btn"
+            title="Save"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-floppy-disk text-sm"></i>
@@ -343,6 +347,7 @@
           </button>
           <button
             id="faq-open-btn"
+            title="FAQ"
             type="button"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
             aria-haspopup="dialog"
@@ -354,6 +359,7 @@
           </button>
           <button
             id="load-btn"
+            title="Load"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-folder-open text-sm"></i>
@@ -361,6 +367,7 @@
           </button>
           <button
             id="export-btn"
+            title="Export"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-export text-sm"></i>
@@ -368,6 +375,7 @@
           </button>
           <button
             id="import-btn"
+            title="Import"
             class="bg-gray-700 hover:bg-gray-600 text-white px-2.5 md:px-3 py-1.5 rounded-lg text-sm flex items-center gap-1 transition-colors"
           >
             <i class="ph ph-download-simple text-sm"></i>

src/tests/top-bar-hover-text.test.ts

@@ -0,0 +1,27 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, it, expect } from 'vitest';
+
+const PAGES_DIR = path.resolve(__dirname, '../pages');
+
+function loadPage(name: string): Document {
+  const html = fs.readFileSync(path.join(PAGES_DIR, name), 'utf8');
+  return new DOMParser().parseFromString(html, 'text/html');
+}
+
+describe('top bar hover text', () => {
+  it.each(['pdf-multi-tool.html', 'pdf-workflow.html'])(
+    'gives every %s button that hides its label a title',
+    (page) => {
+      const labels = loadPage(page).querySelectorAll(
+        'button span[class*="hidden"][class*=":inline"]'
+      );
+
+      expect(labels.length).toBeGreaterThan(0);
+      labels.forEach((label) => {
+        const button = label.closest('button');
+        expect(button?.title, button?.id).toBe(label.textContent?.trim());
+      });
+    }
+  );
+});