Merge pull request #112 from ThisIs-Developer/fix/audit-visual-a11y-deploy-fixes

fix: resolve visual, accessibility, logic, and deployment issues from full audit

Author: ThisIs-Developer

.dockerignore

@@ -39,3 +39,6 @@ logs/
 tmp/
 temp/
 
+# Desktop app (NeutralinoJS) - not needed in web container
+desktop-app/
+

.github/workflows/docker-publish.yml

@@ -46,7 +46,7 @@ jobs:
       uses: docker/build-push-action@v5
       with:
         context: .
-        push: true
+        push: ${{ github.event_name != 'pull_request' }}
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}
         cache-from: type=gha

index.html

@@ -312,7 +312,7 @@ <h5>Menu</h5>
         </div>
 
         <!-- Reset Confirmation Modal -->
-        <div id="reset-confirm-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" style="display:none;">
+        <div id="reset-confirm-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="reset-modal-title" class="reset-modal-message">Are you sure you want to delete all files?</p>
             <div class="reset-modal-actions">
@@ -527,7 +527,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Rename Modal -->
-        <div id="rename-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="rename-modal-title" style="display:none;">
+        <div id="rename-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="rename-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="rename-modal-title" class="reset-modal-message">Rename file</p>
             <input type="text" id="rename-modal-input" class="rename-modal-input" placeholder="File name" />
@@ -539,7 +539,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Link Modal -->
-        <div id="link-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="link-modal-title" style="display:none;">
+        <div id="link-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="link-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="link-modal-title" class="reset-modal-message">Insert link</p>
             <div class="reset-modal-field">
@@ -558,7 +558,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Reference Modal -->
-        <div id="reference-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reference-modal-title" style="display:none;">
+        <div id="reference-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reference-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="reference-modal-title" class="reset-modal-message">Insert reference</p>
             <div class="reset-modal-field">
@@ -581,7 +581,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Image Modal -->
-        <div id="image-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="image-modal-title" style="display:none;">
+        <div id="image-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="image-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="image-modal-title" class="reset-modal-message">Insert image</p>
             <div class="reset-modal-toggle-group">
@@ -615,7 +615,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Table Modal -->
-        <div id="table-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="table-modal-title" style="display:none;">
+        <div id="table-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="table-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="table-modal-title" class="reset-modal-message">Insert table</p>
             <div class="reset-modal-field">
@@ -634,7 +634,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Emoji Modal -->
-        <div id="emoji-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="emoji-modal-title" style="display:none;">
+        <div id="emoji-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="emoji-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide reset-modal-box--xl">
             <p id="emoji-modal-title" class="reset-modal-message">GitHub Emojis</p>
             <div class="reset-modal-field">
@@ -651,7 +651,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Symbols Modal -->
-        <div id="symbols-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="symbols-modal-title" style="display:none;">
+        <div id="symbols-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="symbols-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide reset-modal-box--xl">
             <p id="symbols-modal-title" class="reset-modal-message">Symbols &amp; HTML Entities</p>
             <div class="reset-modal-field">
@@ -668,7 +668,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- Markdown Alert Modal -->
-        <div id="alert-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="alert-modal-title" style="display:none;">
+        <div id="alert-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="alert-modal-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box reset-modal-box--wide">
             <p id="alert-modal-title" class="reset-modal-message">Markdown alerts</p>
             <div id="alert-modal-grid" class="alert-grid" role="listbox" aria-label="Markdown alert types"></div>
@@ -680,7 +680,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
         </div>
 
         <!-- GitHub Import Modal -->
-        <div id="github-import-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="github-import-title" style="display:none;">
+        <div id="github-import-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="github-import-title" aria-hidden="true" style="display:none;">
           <div class="reset-modal-box">
             <p id="github-import-title" class="reset-modal-message">Import Markdown from GitHub</p>
             <input type="url" id="github-import-url" class="rename-modal-input" placeholder="https://github.com/owner/repo/blob/main/README.md" />
@@ -727,7 +727,7 @@ <h3 class="modal-section-title">Open-source credits</h3>
     </div>
 
     <!-- Mermaid Zoom Modal -->
-    <div id="mermaid-zoom-modal" role="dialog" aria-modal="true" aria-label="Diagram zoom view">
+    <div id="mermaid-zoom-modal" role="dialog" aria-modal="true" aria-label="Diagram zoom view" aria-hidden="true">
         <div class="mermaid-modal-content">
             <div class="mermaid-modal-header">
                 <span>Diagram</span>

script.js

@@ -3769,7 +3769,7 @@ This is a fully client-side application. Your content never leaves your browser
     if (!query) return;
     const replacement = findReplaceWith ? findReplaceWith.value : '';
     const regex = new RegExp(escapeRegExp(query), 'gi');
-    markdownEditor.value = markdownEditor.value.replace(regex, replacement);
+    markdownEditor.value = markdownEditor.value.replace(regex, () => replacement);
     markdownEditor.dispatchEvent(new Event('input', { bubbles: true }));
     refreshFindMatches({ resetIndex: true });
     if (findMatches.length) {
@@ -4330,7 +4330,7 @@ This is a fully client-side application. Your content never leaves your browser
       };
   </script>
   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script>
   <style>
       body {
           background-color: ${isDarkTheme ? "#0d1117" : "#ffffff"};

styles.css

@@ -957,7 +957,6 @@ a:focus {
 
 /* translucent overlay behind panel */
 .mobile-menu-overlay {
-  display: none;
   position: fixed;
   top: 0;
   left: 0;
@@ -966,14 +965,15 @@ a:focus {
   background-color: rgba(0, 0, 0, 0.5);
   opacity: 0;
   visibility: hidden;
+  pointer-events: none;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   z-index: 1000;
 }
 
 .mobile-menu-overlay.active {
-  display: block;
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
 }
 
 /* header inside mobile menu */
@@ -1667,7 +1667,7 @@ a:focus {
   max-width: 180px;
   background-color: var(--button-bg);
   border: 1px solid var(--border-color);
-  border-bottom: none;
+  border-bottom: 1px solid transparent;
   border-radius: 6px 6px 0 0;
   cursor: pointer;
   font-size: 13px;