mdv-live 0.3.0 → 0.3.2

package/src/static/app.js

@@ -139,7 +139,6 @@
         return FILE_ICONS[iconName] || FILE_ICONS.default;
     }
 
-    // Scroll position utilities
     function saveScrollPosition(element) {
         return element.scrollTop;
     }
@@ -150,7 +149,6 @@
         });
     }
 
-    // API utilities
     async function apiRequest(url, options = {}) {
         const response = await fetch(url, options);
         const data = await response.json();
@@ -168,7 +166,6 @@
         });
     }
 
-    // Tab path update utility (shared by rename and move)
     function updateTabPaths(oldPath, newPath) {
         let updated = false;
         const newName = newPath.split('/').pop();
@@ -306,12 +303,13 @@
                 }
             };
 
-            state.ws.onmessage = (event) => {
+            state.ws.onmessage = async (event) => {
                 const data = JSON.parse(event.data);
                 if (data.type === 'file_update' && state.activeTabIndex >= 0) {
                     this.handleFileUpdate(data);
-                } else if (data.type === 'tree_update' && data.tree) {
-                    FileTreeManager.update(data.tree);
+                } else if (data.type === 'tree_update') {
+                    // tree_update を受信したらAPIから最新ツリーを取得
+                    await FileTreeManager.refresh();
                 }
             };
 
@@ -332,20 +330,17 @@
 
         handleFileUpdate(data) {
             const tab = state.tabs[state.activeTabIndex];
+
             if (data.fileType === 'image' && data.reload) {
                 ContentRenderer.renderImage(tab.imageUrl, tab.name);
                 return;
             }
+
             if (!data.content) return;
 
             tab.content = data.content;
-            if (data.raw) {
-                tab.raw = data.raw;
-            }
-            // Update Marp flag
-            if (typeof data.isMarp !== 'undefined') {
-                tab.isMarp = data.isMarp;
-            }
+            if (data.raw) tab.raw = data.raw;
+            if (typeof data.isMarp !== 'undefined') tab.isMarp = data.isMarp;
 
             if (state.isEditMode) {
                 if (!state.hasUnsavedChanges && data.raw) {
@@ -356,17 +351,16 @@
                         restoreScrollPosition(textarea, currentScroll);
                     }
                 }
+                return;
+            }
+
+            if (tab.isMarp) {
+                if (data.css) tab.css = data.css;
+                ContentRenderer.renderMarp(data.content, tab.css);
             } else {
-                // Marp slides: preserve current slide position
-                if (tab.isMarp) {
-                    // Update css if provided
-                    if (data.css) tab.css = data.css;
-                    ContentRenderer.renderMarp(data.content, tab.css);
-                } else {
-                    const currentScroll = saveScrollPosition(elements.content);
-                    ContentRenderer.render(data.content, data.fileType || tab.fileType);
-                    restoreScrollPosition(elements.content, currentScroll);
-                }
+                const currentScroll = saveScrollPosition(elements.content);
+                ContentRenderer.render(data.content, data.fileType || tab.fileType);
+                restoreScrollPosition(elements.content, currentScroll);
             }
         }
     };
@@ -395,6 +389,17 @@
             elements.fileTree.innerHTML = '<div style="padding: 16px; color: var(--text-muted);">読み込みに失敗しました。<br><button onclick="location.reload()" style="margin-top: 8px; cursor: pointer;">再読み込み</button></div>';
         },
 
+        async refresh() {
+            try {
+                const response = await fetch('/api/tree');
+                if (!response.ok) throw new Error(`HTTP ${response.status}`);
+                const tree = await response.json();
+                await this.update(tree);
+            } catch (e) {
+                console.error('Failed to refresh tree:', e);
+            }
+        },
+
         async update(tree) {
             // 展開済みかつ読み込み済みのパスを保存
             const expandedPaths = new Set();
@@ -509,9 +514,9 @@
 
     const ContentRenderer = {
         render(htmlContent, fileType) {
-            // コードファイル（非markdown）は専用のスタイルを適用
-            const isCodeFile = fileType === 'code';
-            const containerClass = isCodeFile ? 'markdown-body code-view-container' : 'markdown-body';
+            const containerClass = fileType === 'code'
+                ? 'markdown-body code-view-container'
+                : 'markdown-body';
             elements.content.innerHTML = `<div class="${containerClass}">${htmlContent}</div>`;
 
             elements.content.querySelectorAll('pre code').forEach(block => {
@@ -860,15 +865,17 @@
                 state.activeTabIndex = -1;
                 this.render();
                 ContentRenderer.showWelcome();
-            } else {
-                if (state.activeTabIndex >= state.tabs.length) {
-                    state.activeTabIndex = state.tabs.length - 1;
-                } else if (index < state.activeTabIndex) {
-                    state.activeTabIndex--;
-                }
-                this.render();
-                this.renderActive();
+                FileTreeManager.updateHighlight();
+                return;
+            }
+
+            if (state.activeTabIndex >= state.tabs.length) {
+                state.activeTabIndex = state.tabs.length - 1;
+            } else if (index < state.activeTabIndex) {
+                state.activeTabIndex--;
             }
+            this.render();
+            this.renderActive();
             FileTreeManager.updateHighlight();
         },
 
@@ -900,36 +907,28 @@
         },
 
         renderByFileType(tab) {
-            // Clean up Marp state when switching tabs
             ContentRenderer.cleanupMarp();
 
-            // Marp slides
             if (tab.isMarp) {
                 ContentRenderer.renderMarp(tab.content, tab.css);
                 return;
             }
 
-            switch (tab.fileType) {
-                case 'image':
-                    ContentRenderer.renderImage(tab.imageUrl, tab.name);
-                    break;
-                case 'pdf':
-                    ContentRenderer.renderPDF(tab.pdfUrl, tab.name);
-                    break;
-                case 'video':
-                    ContentRenderer.renderVideo(tab.mediaUrl, tab.name);
-                    break;
-                case 'audio':
-                    ContentRenderer.renderAudio(tab.mediaUrl, tab.name);
-                    break;
-                case 'archive':
-                case 'office':
-                case 'executable':
-                case 'binary':
-                    ContentRenderer.renderBinary(tab.name, tab.fileType);
-                    break;
-                default:
-                    ContentRenderer.render(tab.content, tab.fileType);
+            const fileType = tab.fileType;
+            const binaryTypes = ['archive', 'office', 'executable', 'binary'];
+
+            if (fileType === 'image') {
+                ContentRenderer.renderImage(tab.imageUrl, tab.name);
+            } else if (fileType === 'pdf') {
+                ContentRenderer.renderPDF(tab.pdfUrl, tab.name);
+            } else if (fileType === 'video') {
+                ContentRenderer.renderVideo(tab.mediaUrl, tab.name);
+            } else if (fileType === 'audio') {
+                ContentRenderer.renderAudio(tab.mediaUrl, tab.name);
+            } else if (binaryTypes.includes(fileType)) {
+                ContentRenderer.renderBinary(tab.name, fileType);
+            } else {
+                ContentRenderer.render(tab.content, fileType);
             }
         }
     };
@@ -954,13 +953,8 @@
         },
 
         updateButton() {
-            if (state.isEditMode) {
-                elements.editToggle.classList.add('active');
-                elements.editLabel.textContent = 'View';
-            } else {
-                elements.editToggle.classList.remove('active');
-                elements.editLabel.textContent = 'Edit';
-            }
+            elements.editToggle.classList.toggle('active', state.isEditMode);
+            elements.editLabel.textContent = state.isEditMode ? 'View' : 'Edit';
         },
 
         show() {
@@ -1051,21 +1045,15 @@
 
             elements.editorStatus.style.display = 'none';
 
-            // サーバーから最新のレンダリング済みコンテンツを取得
             try {
                 const response = await fetch(`/api/file?path=${encodeURIComponent(tab.path)}`);
                 const data = await response.json();
-                if (data.content) {
-                    tab.content = data.content;
-                }
-                if (data.raw) {
-                    tab.raw = data.raw;
-                }
+                if (data.content) tab.content = data.content;
+                if (data.raw) tab.raw = data.raw;
             } catch (e) {
                 console.error('Failed to fetch updated content:', e);
             }
 
-            // WebSocket経由でファイル監視を再登録（重要）
             WebSocketManager.watchFile(tab.path);
 
             state.skipScrollRestore = true;
@@ -1169,7 +1157,6 @@
 
     const PrintManager = {
         isMarpPresentation() {
-            // Check if current content has .marpit class (Marp presentation)
             return !!elements.content.querySelector('.marpit');
         },
 
@@ -1179,10 +1166,8 @@
             const tab = state.tabs[state.activeTabIndex];
 
             if (this.isMarpPresentation()) {
-                // Marp → use marp-cli for PDF export
                 await this.exportMarpPdf(tab.path);
             } else {
-                // Regular Markdown → use browser print
                 this.browserPrint(tab.name);
             }
         },
@@ -1249,12 +1234,9 @@
 
     const ShutdownManager = {
         async shutdown() {
-            try {
-                elements.statusText.textContent = 'Stopping...';
-                await fetch('/api/shutdown', { method: 'POST' });
-            } catch (e) {
-                // Server stopped, connection will fail - expected
-            }
+            elements.statusText.textContent = 'Stopping...';
+            // Connection failure is expected when server stops
+            fetch('/api/shutdown', { method: 'POST' }).catch(() => {});
         },
 
         init() {
@@ -1272,11 +1254,13 @@
 
         show(title, options = {}) {
             elements.dialogTitle.textContent = title;
-            elements.dialogInput.style.display = options.showInput ? 'block' : 'none';
-            elements.dialogMessage.textContent = options.message || '';
-            elements.dialogMessage.style.display = options.message ? 'block' : 'none';
+            const hasInput = options.showInput;
+            const hasMessage = options.message;
+            elements.dialogInput.style.display = hasInput ? 'block' : 'none';
+            elements.dialogMessage.textContent = hasMessage || '';
+            elements.dialogMessage.style.display = hasMessage ? 'block' : 'none';
 
-            if (options.showInput) {
+            if (hasInput) {
                 elements.dialogInput.value = options.defaultValue || '';
             }
 
@@ -1288,7 +1272,7 @@
 
             elements.dialogOverlay.classList.remove('hidden');
 
-            if (options.showInput) {
+            if (hasInput) {
                 setTimeout(() => {
                     elements.dialogInput.focus();
                     elements.dialogInput.select();
@@ -1477,7 +1461,7 @@
             this.currentPath = path;
             this.isDirectory = isDir;
 
-            const items = this.getMenuItems(isDir, path);
+            const items = this.getMenuItems(isDir);
             elements.contextMenu.innerHTML = items.map(item => {
                 if (item.separator) {
                     return '<div class="context-menu-separator"></div>';
@@ -1499,8 +1483,7 @@
             this.currentPath = null;
         },
 
-        getMenuItems(isDir, path) {
-            const pathDisplay = state.rootPath ? `${state.rootPath}/${path}` : path;
+        getMenuItems(isDir) {
             if (isDir) {
                 return [
                     { label: '新規フォルダ', action: 'newFolder' },
@@ -1511,17 +1494,16 @@
                     { separator: true },
                     { label: '削除', action: 'delete', danger: true }
                 ];
-            } else {
-                return [
-                    { label: '開く', action: 'open' },
-                    { label: 'ダウンロード', action: 'download' },
-                    { separator: true },
-                    { label: '名前を変更', action: 'rename' },
-                    { label: 'パスをコピー', action: 'copyPath' },
-                    { separator: true },
-                    { label: '削除', action: 'delete', danger: true }
-                ];
             }
+            return [
+                { label: '開く', action: 'open' },
+                { label: 'ダウンロード', action: 'download' },
+                { separator: true },
+                { label: '名前を変更', action: 'rename' },
+                { label: 'パスをコピー', action: 'copyPath' },
+                { separator: true },
+                { label: '削除', action: 'delete', danger: true }
+            ];
         },
 
         handleAction(action) {
@@ -1529,35 +1511,25 @@
             const isDir = this.isDirectory;
             this.hide();
 
-            switch (action) {
-                case 'open':
-                    TabManager.open(path);
-                    break;
-                case 'download':
-                    FileOperationsManager.download(path);
-                    break;
-                case 'rename':
-                    FileOperationsManager.renameItem(path, isDir);
-                    break;
-                case 'delete':
-                    FileOperationsManager.deleteItem(path, isDir);
-                    break;
-                case 'newFolder':
-                    FileOperationsManager.createDirectory(path);
-                    break;
-                case 'upload':
-                    state.uploadTargetPath = path;
-                    elements.fileInput.click();
-                    break;
-                case 'copyPath':
-                    const fullPath = state.rootPath ? `${state.rootPath}/${path}` : path;
-                    navigator.clipboard.writeText(fullPath).then(() => {
-                        console.log('パスをコピーしました:', fullPath);
-                    }).catch(err => {
-                        console.error('コピーに失敗:', err);
-                        alert('パスのコピーに失敗しました');
-                    });
-                    break;
+            if (action === 'open') {
+                TabManager.open(path);
+            } else if (action === 'download') {
+                FileOperationsManager.download(path);
+            } else if (action === 'rename') {
+                FileOperationsManager.renameItem(path, isDir);
+            } else if (action === 'delete') {
+                FileOperationsManager.deleteItem(path, isDir);
+            } else if (action === 'newFolder') {
+                FileOperationsManager.createDirectory(path);
+            } else if (action === 'upload') {
+                state.uploadTargetPath = path;
+                elements.fileInput.click();
+            } else if (action === 'copyPath') {
+                const fullPath = state.rootPath ? `${state.rootPath}/${path}` : path;
+                navigator.clipboard.writeText(fullPath).catch(err => {
+                    console.error('コピーに失敗:', err);
+                    alert('パスのコピーに失敗しました');
+                });
             }
         },
 
@@ -1831,6 +1803,7 @@
     }
 
     async function init() {
+        // Initialize all managers
         ThemeManager.init();
         SidebarManager.init();
         ResizeHandler.init();
@@ -1841,7 +1814,7 @@
         ContextMenuManager.init();
         DragDropManager.init();
         KeyboardManager.init();
-        TabManager.render(); // 初期状態でタブバーを非表示
+        TabManager.render();
 
         try {
             const infoResponse = await fetch('/api/info');
@@ -1854,20 +1827,14 @@
         await FileTreeManager.load();
         WebSocketManager.connect();
 
-        // ブラウザタブがアクティブになった時に最新データを取得
+        // Refresh content when window regains focus
+        const handleFocusChange = () => refreshCurrentTab();
         document.addEventListener('visibilitychange', () => {
-            if (document.visibilityState === 'visible') {
-                refreshCurrentTab();
-            }
-        });
-
-        // ウィンドウがフォーカスされた時も取得
-        window.addEventListener('focus', () => {
-            refreshCurrentTab();
+            if (document.visibilityState === 'visible') handleFocusChange();
         });
+        window.addEventListener('focus', handleFocusChange);
 
-        const params = new URLSearchParams(window.location.search);
-        const initialFile = params.get('file');
+        const initialFile = new URLSearchParams(window.location.search).get('file');
         if (initialFile) {
             TabManager.open(initialFile);
         }

package/src/static/index.html

@@ -4,80 +4,103 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MDV - Markdown Viewer</title>
+
+    <!-- Favicon -->
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/images/icon-32.png">
     <link rel="icon" type="image/png" sizes="64x64" href="/static/images/icon-64.png">
     <link rel="apple-touch-icon" sizes="128x128" href="/static/images/icon-128.png">
+
+    <!-- Stylesheets -->
     <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
     <link rel="stylesheet" href="/static/styles.css">
+
+    <!-- Theme initialization (FOUC prevention) -->
     <script>
-        // テーマを即座に適用（FOUC防止）
-        var __mdvTheme = localStorage.getItem('mdv-theme') || 'light';
+        (function() {
+            var theme = localStorage.getItem('mdv-theme') || 'light';
+            window.__mdvTheme = theme;
+            document.documentElement.dataset.theme = theme;
+        })();
     </script>
+
+    <!-- External libraries -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
 </head>
 <body>
     <script>document.body.dataset.theme = __mdvTheme;</script>
+
     <div class="container">
-        <aside class="sidebar" id="sidebar">
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar" aria-label="File browser">
             <div class="sidebar-header">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                 </svg>
                 <span>Files</span>
             </div>
-            <div class="file-tree" id="fileTree"></div>
+            <nav class="file-tree" id="fileTree" aria-label="File tree"></nav>
         </aside>
 
-        <div class="resize-handle" id="resizeHandle"></div>
+        <div class="resize-handle" id="resizeHandle" role="separator" aria-orientation="vertical"></div>
 
+        <!-- Main content -->
         <main class="main">
-            <div class="toolbar">
-                <button class="toolbar-btn" id="sidebarToggle" title="Toggle sidebar (Cmd+B)">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <!-- Toolbar -->
+            <div class="toolbar" role="toolbar" aria-label="Document actions">
+                <button class="toolbar-btn" id="sidebarToggle" title="Toggle sidebar (Cmd+B)" aria-label="Toggle sidebar">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
-                <button class="toolbar-btn" id="themeToggle" title="Toggle theme">
-                    <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+
+                <button class="toolbar-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme">
+                    <svg id="sunIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                     </svg>
-                    <svg id="moonIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="display: none;">
+                    <svg id="moonIcon" style="display: none;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                     </svg>
                 </button>
-                <button class="toolbar-btn" id="editToggle" title="Toggle edit mode (Cmd+E)">
-                    <svg id="editIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+
+                <button class="toolbar-btn" id="editToggle" title="Toggle edit mode (Cmd+E)" aria-label="Toggle edit mode">
+                    <svg id="editIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                     </svg>
                     <span id="editLabel">Edit</span>
                 </button>
-                <button class="toolbar-btn" id="printBtn" title="Print / Save PDF (Cmd+P)">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+
+                <button class="toolbar-btn" id="printBtn" title="Print / Save PDF (Cmd+P)" aria-label="Export to PDF">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                     </svg>
                     PDF
                 </button>
+
                 <div class="toolbar-spacer"></div>
+
                 <span class="editor-status" id="editorStatus" style="display: none;">Ready</span>
+
                 <div class="status">
                     <span class="status-dot" id="statusDot"></span>
                     <span id="statusText">Connected</span>
-                    <button class="shutdown-btn" id="shutdownBtn" title="Stop server">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <button class="shutdown-btn" id="shutdownBtn" title="Stop server" aria-label="Stop server">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 11-12.728 0M12 3v9" />
                         </svg>
                     </button>
                 </div>
             </div>
 
-            <div class="tab-bar" id="tabBar"></div>
+            <!-- Tab bar -->
+            <div class="tab-bar" id="tabBar" role="tablist" aria-label="Open files"></div>
 
-            <div class="content" id="content">
+            <!-- Content area -->
+            <div class="content" id="content" role="main">
                 <div class="welcome">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     <h2>Select a file</h2>
@@ -89,14 +112,14 @@
     </div>
 
     <!-- Context Menu -->
-    <div id="contextMenu" class="context-menu hidden"></div>
+    <div id="contextMenu" class="context-menu hidden" role="menu"></div>
 
     <!-- Dialog -->
-    <div id="dialogOverlay" class="dialog-overlay hidden">
+    <div id="dialogOverlay" class="dialog-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="dialogTitle">
         <div class="dialog-content">
             <h3 id="dialogTitle"></h3>
             <input type="text" id="dialogInput" style="display: none;">
-            <p id="dialogMessage" style="margin: 0; color: var(--text-secondary);"></p>
+            <p id="dialogMessage"></p>
             <div class="dialog-actions">
                 <button class="btn-cancel" id="dialogCancel">キャンセル</button>
                 <button class="btn-confirm" id="dialogConfirm">OK</button>
@@ -105,7 +128,7 @@
     </div>
 
     <!-- Upload Progress -->
-    <div id="uploadOverlay" class="upload-progress-overlay hidden">
+    <div id="uploadOverlay" class="upload-progress-overlay hidden" role="progressbar" aria-valuemin="0" aria-valuemax="100">
         <div class="upload-progress-box">
             <div id="uploadFileName">アップロード中...</div>
             <div class="upload-progress-bar">