Merge pull request #178 from JLG-WOCFR-DEV/codex/update-accessible-name-for-search-input

Improve command palette accessibility

Author: JLG-WOCFR-DEV

supersede-css-jlg-enhanced/assets/js/ux.js

@@ -79,6 +79,16 @@
     };
 
     $(document).ready(function() {
+        const localizedData = (typeof window !== 'undefined' && typeof window.SSC !== 'undefined' && window.SSC)
+            ? window.SSC
+            : {};
+        const i18n = (typeof localizedData.i18n === 'object' && localizedData.i18n !== null)
+            ? localizedData.i18n
+            : {};
+        const commandPaletteTitle = i18n.commandPaletteTitle || 'Supersede CSS command palette';
+        const commandPaletteSearchPlaceholder = i18n.commandPaletteSearchPlaceholder || 'Navigate or run an action…';
+        const commandPaletteSearchLabel = i18n.commandPaletteSearchLabel || 'Command palette search';
+
         // --- Dark/Light Theme Toggle ---
         const themeToggle = $('#ssc-theme');
         const body = $('body');
@@ -199,9 +209,10 @@
         // --- Command Palette (⌘K) ---
         const cmdkButton = $('#ssc-cmdk');
         const cmdkPanelHtml = `
-            <div id="ssc-cmdp" role="dialog" aria-modal="true" aria-hidden="true" aria-label="Palette de commandes Supersede CSS" tabindex="-1">
+            <div id="ssc-cmdp" role="dialog" aria-modal="true" aria-hidden="true" aria-label="${commandPaletteTitle}" tabindex="-1">
                 <div class="panel" role="document">
-                    <input type="text" id="ssc-cmdp-search" placeholder="Naviguer ou lancer une action..." style="width: 100%; padding: 12px; border: none; border-bottom: 1px solid var(--ssc-border); font-size: 16px;">
+                    <label for="ssc-cmdp-search" class="screen-reader-text">${commandPaletteSearchLabel}</label>
+                    <input type="text" id="ssc-cmdp-search" placeholder="${commandPaletteSearchPlaceholder}" style="width: 100%; padding: 12px; border: none; border-bottom: 1px solid var(--ssc-border); font-size: 16px;">
                     <ul id="ssc-cmdp-results"></ul>
                 </div>
             </div>`;

supersede-css-jlg-enhanced/src/Admin/Admin.php

@@ -277,7 +277,12 @@ public function assets(string $hook): void {
             'rest' => [
                 'root'  => esc_url_raw(rest_url('ssc/v1/')),
                 'nonce' => wp_create_nonce('wp_rest')
-            ]
+            ],
+            'i18n' => [
+                'commandPaletteTitle' => esc_attr__('Supersede CSS command palette', 'supersede-css-jlg'),
+                'commandPaletteSearchPlaceholder' => esc_attr__('Navigate or run an action…', 'supersede-css-jlg'),
+                'commandPaletteSearchLabel' => esc_html__('Command palette search', 'supersede-css-jlg'),
+            ],
         ]);
     }
 }

supersede-css-jlg-enhanced/tests/ui/command-palette-accessibility.spec.js

@@ -0,0 +1,47 @@
+const { test, expect } = require('@playwright/test');
+
+const ADMIN_PATH = '/wp-admin/admin.php?page=supersede-css-jlg';
+const DEFAULT_USERNAME = process.env.WP_USERNAME || 'admin';
+const DEFAULT_PASSWORD = process.env.WP_PASSWORD || 'password';
+
+async function authenticate(page, adminUrl, credentials) {
+  const loginUrl = `/wp-login.php?redirect_to=${encodeURIComponent(adminUrl)}`;
+  await page.goto(loginUrl, { waitUntil: 'domcontentloaded' });
+
+  const usernameInput = page.locator('#user_login');
+  if (await usernameInput.isVisible()) {
+    await usernameInput.fill(credentials.username);
+    await page.locator('#user_pass').fill(credentials.password);
+    await Promise.all([
+      page.waitForNavigation({ waitUntil: 'networkidle' }),
+      page.locator('#wp-submit').click(),
+    ]);
+  }
+
+  await page.goto(adminUrl, { waitUntil: 'networkidle' });
+}
+
+test.describe('Command palette accessibility', () => {
+  test('search input exposes translated accessible name', async ({ page }, testInfo) => {
+    const baseURL = testInfo.project.use.baseURL || 'http://localhost:8889';
+    const adminUrl = new URL(ADMIN_PATH, baseURL).toString();
+
+    await authenticate(page, adminUrl, {
+      username: DEFAULT_USERNAME,
+      password: DEFAULT_PASSWORD,
+    });
+
+    await page.waitForFunction(
+      () => Boolean(window.SSC && window.SSC.i18n && window.SSC.i18n.commandPaletteSearchLabel)
+    );
+    const expectedLabel = await page.evaluate(() => window.SSC.i18n.commandPaletteSearchLabel);
+
+    const commandPaletteButton = page.locator('#ssc-cmdk');
+    await expect(commandPaletteButton).toBeVisible();
+    await commandPaletteButton.click();
+
+    const searchInput = page.locator('#ssc-cmdp-search');
+    await expect(searchInput).toBeVisible();
+    await expect(searchInput).toHaveAccessibleName(expectedLabel);
+  });
+});