a11y(output): add ARIA dialog roles and aria-label on close buttons

LabelaryNoticeModal and LabelPreviewModal now expose role=dialog,
aria-modal and aria-labelledby so screen readers announce them as
modal dialogs. The icon-only close buttons get a localized aria-label
via a new app.close translation across all 32 locales.

Author: u8array

src/components/Output/LabelPreview.tsx

@@ -54,17 +54,21 @@ export function LabelPreviewModal({ onClose }: Props) {
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="label-preview-title"
     >
       <div
         className="bg-surface border border-border-2 rounded shadow-lg flex flex-col overflow-hidden max-w-[90vw] max-h-[90vh]"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-3 py-1.5 border-b border-border-2 shrink-0">
-          <span className="font-mono text-[10px] text-muted uppercase tracking-widest">
+          <span id="label-preview-title" className="font-mono text-[10px] text-muted uppercase tracking-widest">
             {t.output.previewHeading}
           </span>
           <button
             onClick={onClose}
+            aria-label={t.app.close}
             className="p-0.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors ml-6"
           >
             <XMarkIcon className="w-4 h-4" />

src/components/Output/LabelaryNoticeModal.tsx

@@ -28,17 +28,21 @@ export function LabelaryNoticeModal({ onContinue, onClose }: Props) {
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="labelary-notice-title"
     >
       <div
         className="bg-surface border border-border-2 rounded shadow-lg flex flex-col overflow-hidden max-w-[90vw]"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-3 py-1.5 border-b border-border-2 shrink-0">
-          <span className="font-mono text-[10px] text-muted uppercase tracking-widest">
+          <span id="labelary-notice-title" className="font-mono text-[10px] text-muted uppercase tracking-widest">
             {t.output.previewNoticeTitle}
           </span>
           <button
             onClick={onClose}
+            aria-label={t.app.close}
             className="p-0.5 rounded text-muted hover:text-text hover:bg-surface-2 transition-colors ml-6"
           >
             <XMarkIcon className="w-4 h-4" />

src/locales/ar.ts

@@ -97,6 +97,7 @@ const ar = {
     newDesign: 'تصميم جديد',
     addPage: 'إضافة صفحة',
     cancel: 'إلغاء',
+    close: 'إغلاق',
     deletePage: 'حذف الصفحة',
     deletePageConfirm: 'حذف الصفحة الحالية؟',
     openDesign: 'فتح تصميم',

src/locales/bg.ts

@@ -97,6 +97,7 @@ const bg = {
     newDesign: 'Нов дизайн',
     addPage: 'Добавяне на страница',
     cancel: 'Отказ',
+    close: 'Затваряне',
     deletePage: 'Изтриване на страница',
     deletePageConfirm: 'Изтриване на текущата страница?',
     openDesign: 'Отвори дизайн',

src/locales/cs.ts

@@ -97,6 +97,7 @@ const cs = {
     newDesign: 'Nový návrh',
     addPage: 'Přidat stránku',
     cancel: 'Zrušit',
+    close: 'Zavřít',
     deletePage: 'Smazat stránku',
     deletePageConfirm: 'Smazat aktuální stránku?',
     openDesign: 'Otevřít návrh',

src/locales/da.ts

@@ -97,6 +97,7 @@ const da = {
     newDesign: 'Nyt design',
     addPage: 'Tilføj side',
     cancel: 'Annuller',
+    close: 'Luk',
     deletePage: 'Slet side',
     deletePageConfirm: 'Slet den aktuelle side?',
     openDesign: 'Åbn design',

src/locales/de.ts

@@ -97,6 +97,7 @@ const de = {
     newDesign: 'Neues Design',
     addPage: 'Seite hinzufügen',
     cancel: 'Abbrechen',
+    close: 'Schließen',
     deletePage: 'Seite löschen',
     deletePageConfirm: 'Aktuelle Seite löschen?',
     openDesign: 'Design öffnen',

src/locales/el.ts

@@ -97,6 +97,7 @@ const el = {
     newDesign: 'Νέο σχέδιο',
     addPage: 'Προσθήκη σελίδας',
     cancel: 'Ακύρωση',
+    close: 'Κλείσιμο',
     deletePage: 'Διαγραφή σελίδας',
     deletePageConfirm: 'Διαγραφή της τρέχουσας σελίδας;',
     openDesign: 'Άνοιγμα σχεδίου',

src/locales/en.ts

@@ -97,6 +97,7 @@ const en = {
     newDesign: 'New design',
     addPage: 'Add page',
     cancel: 'Cancel',
+    close: 'Close',
     deletePage: 'Delete page',
     deletePageConfirm: 'Delete the current page?',
     openDesign: 'Open design',

src/locales/es.ts

@@ -97,6 +97,7 @@ const es = {
     newDesign: 'Nuevo diseño',
     addPage: 'Añadir página',
     cancel: 'Cancelar',
+    close: 'Cerrar',
     deletePage: 'Eliminar página',
     deletePageConfirm: '¿Eliminar la página actual?',
     openDesign: 'Abrir diseño',