@nice2dev/ui-printing 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-printing",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "React components for print management: template editor, template browser, print preview, print queue and print button",
   "keywords": [
     "printing",
@@ -47,10 +47,10 @@
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@nice2dev/ui": "^1.2.0"
+    "@nice2dev/ui": "^1.3.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.2.2",
+    "@nice2dev/ui": "^1.3.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
     "@vitejs/plugin-react": "^4.7.0",

package/src/print-preview/NicePrintPreview.tsx

@@ -1,5 +1,11 @@
-import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
-import React, { useState, useMemo, useEffect } from 'react';
+import {
+  NiceIcon,
+  useInputHints,
+  useIntent,
+  useNiceTranslation,
+  useOverlayFocus,
+} from '@nice2dev/ui';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import type {
@@ -259,18 +265,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
     if (!asPopup || !isOpen) {
       return;
     }
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        handleClose();
-      }
-    };
-    document.addEventListener('keydown', handler);
     document.body.style.overflow = 'hidden';
     return () => {
-      document.removeEventListener('keydown', handler);
       document.body.style.overflow = '';
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asPopup, isOpen]);
 
   const dataList = useMemo(() => {
@@ -285,12 +283,53 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
 
   const currentData = dataList[entityIdx] ?? {};
 
+  // The popup holds focus; Escape / B close it — only the top overlay — and focus goes back to
+  // the opener (1.3.0, a document listener before). A pad: LB / RB between the records, LT / RT
+  // zoom.
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  useOverlayFocus(dialogRef, { open: asPopup && isOpen, onClose: handleClose });
+  useIntent(
+    ['sectionPrev', 'sectionNext', 'pagePrev', 'pageNext'],
+    (d) => {
+      if (d.intent === 'sectionPrev' || d.intent === 'sectionNext') {
+        const by = d.intent === 'sectionNext' ? 1 : -1;
+        setEntityIdx((i) => Math.min(Math.max(i + by, 0), dataList.length - 1));
+      } else if (d.source === 'keyboard') {
+        return false;
+      } else {
+        const by = d.intent === 'pageNext' ? 0.1 : -0.1;
+        setZoom((z) => Math.min(2.5, Math.max(0.3, z + by)));
+      }
+    },
+    { ref: rootRef, enabled: !asPopup || isOpen },
+  );
+  useInputHints(
+    rootRef,
+    !asPopup || isOpen
+      ? [
+          ...(dataList.length > 1
+            ? [
+                {
+                  intent: 'sectionPrev' as const,
+                  label: t('printPreview.previousPage', 'Previous page'),
+                },
+                { intent: 'sectionNext' as const, label: t('printPreview.nextPage', 'Next page') },
+              ]
+            : []),
+          { intent: 'pageNext', label: t('printPreview.zoomIn', 'Zoom in') },
+          { intent: 'pagePrev', label: t('printPreview.zoomOut', 'Zoom out') },
+        ]
+      : [],
+  );
+
   if (asPopup && !isOpen) {
     return null;
   }
 
   const body = (
     <div
+      ref={rootRef}
       className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
       style={style}
     >
@@ -303,8 +342,9 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
                 className={styles.navBtn}
                 disabled={entityIdx === 0}
                 onClick={() => setEntityIdx((i) => i - 1)}
+                aria-label={t('printPreview.previousPage', 'Previous page')}
               >
-                ‹
+                <NiceIcon name="chevron-left" size={14} />
               </button>
               <span className={styles.navLabel}>
                 {entityIdx + 1} / {dataList.length}
@@ -313,8 +353,9 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
                 className={styles.navBtn}
                 disabled={entityIdx >= dataList.length - 1}
                 onClick={() => setEntityIdx((i) => i + 1)}
+                aria-label={t('printPreview.nextPage', 'Next page')}
               >
-                ›
+                <NiceIcon name="chevron-right" size={14} />
               </button>
             </>
           )}
@@ -324,19 +365,28 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
         </div>
 
         <div className={styles.zoomBar}>
-          <button className={styles.zoomBtn} onClick={() => setZoom((z) => Math.max(0.3, z - 0.1))}>
-            −
+          <button
+            className={styles.zoomBtn}
+            onClick={() => setZoom((z) => Math.max(0.3, z - 0.1))}
+            aria-label={t('printPreview.zoomOut', 'Zoom out')}
+          >
+            <NiceIcon name="minus" size={14} />
           </button>
           <span className={styles.zoomLabel}>{Math.round(zoom * 100)}%</span>
-          <button className={styles.zoomBtn} onClick={() => setZoom((z) => Math.min(2.5, z + 0.1))}>
-            +
+          <button
+            className={styles.zoomBtn}
+            onClick={() => setZoom((z) => Math.min(2.5, z + 0.1))}
+            aria-label={t('printPreview.zoomIn', 'Zoom in')}
+          >
+            <NiceIcon name="plus" size={14} />
           </button>
           <button
             className={styles.zoomBtn}
             onClick={() => setZoom(0.8)}
             title={t('printing.fit', 'Fit')}
+            aria-label={t('printing.fit', 'Fit')}
           >
-            ⊡
+            <NiceIcon name="expand" size={14} />
           </button>
         </div>
 
@@ -405,8 +455,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
       role="presentation"
     >
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
+        aria-label={template.name}
         style={{
           background: 'var(--nice-bg-elevated, var(--nice-bg-primary, #ffffff))',
           borderRadius: 12,

package/src/template-browser/NiceTemplateBrowser.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
-import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import { clickOnActivationKey, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
 import React, { useState } from 'react';
 
 import type {
@@ -144,6 +143,9 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
       <div className={styles.grid}>
         {filtered.map((tpl) => (
           <div
+            role={onSelect ? 'button' : undefined}
+            tabIndex={onSelect ? 0 : undefined}
+            onKeyDown={onSelect ? clickOnActivationKey : undefined}
             key={tpl.id}
             className={`${styles.card} ${selectedId === tpl.id ? styles.cardSelected : ''}`}
             onClick={() => onSelect?.(tpl)}

package/src/template-editor/NiceTemplateEditor.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
-import { NiceAppShell, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import { clickOnActivationKey, NiceAppShell, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
 import type { NiceTranslateFn } from '@nice2dev/ui';
 import React, {
   useState,
@@ -331,7 +330,12 @@ const FieldElement: React.FC<FieldElementProps> = ({
   };
 
   return (
-    <div style={baseStyle} onClick={onClick} onMouseDown={readOnly ? undefined : onDragStart}>
+    <div
+      role="presentation"
+      style={baseStyle}
+      onClick={onClick}
+      onMouseDown={readOnly ? undefined : onDragStart}
+    >
       {isLine ? (
         <div
           style={{
@@ -900,6 +904,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
               <div className={styles.fieldList}>
                 {(filteredFields ?? []).map((f) => (
                   <div
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={clickOnActivationKey}
                     key={f.path}
                     className={styles.fieldItem}
                     draggable
@@ -954,6 +961,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                 .reverse()
                 .map((f) => (
                   <div
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={clickOnActivationKey}
                     key={f.id}
                     className={`${styles.layerItem} ${selectedIds.has(f.id) ? styles.layerItemSelected : ''}`}
                     onClick={() => onSelectField(f.id)}
@@ -2459,7 +2469,11 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
       }
     >
       {/* Canvas area */}
-      <div className={styles.canvasArea} onClick={() => setSelectedIds(new Set())}>
+      <div
+        role="presentation"
+        className={styles.canvasArea}
+        onClick={() => setSelectedIds(new Set())}
+      >
         {/* Test data bar */}
         {Array.isArray(sampleData) && sampleData.length > 0 && (
           <div className={styles.testDataBar}>
@@ -2490,7 +2504,11 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
         )}
 
         {/* Scrollable paper area */}
-        <div className={styles.paperScroll} onClick={(e) => e.stopPropagation()}>
+        <div
+          role="presentation"
+          className={styles.paperScroll}
+          onClick={(e) => e.stopPropagation()}
+        >
           <div className={styles.paperShadow} style={{ width: paperWPx, minHeight: paperHPx }}>
             {/* Margin guides */}
             <div