Merge pull request #6 from paperboygold/feat/mobile-ux-improvements

Feat/mobile ux improvements

.gitignore

@@ -18,3 +18,9 @@
 
 # Node modules (if any)
 node_modules/
+
+# Environment variables
+.env
+
+# Claude 
+CLAUDE.md

template.html

@@ -68,17 +68,19 @@
     </div>
 </div>
 
-<!-- Settings Popup Modal -->
+<!-- Settings Modal -->
-<div id="rpg-settings-popup" class="rpg-settings-popup" style="display: none;">
+<div id="rpg-settings-popup" class="rpg-settings-popup" role="dialog" aria-modal="true" aria-labelledby="rpg-settings-title">
-    <div class="rpg-settings-popup-overlay"></div>
     <div class="rpg-settings-popup-content">
-        <div class="rpg-settings-popup-header">
+        <header class="rpg-settings-popup-header">
-            <h3><i class="fa-solid fa-gear"></i> RPG Companion Settings</h3>
+            <h3 id="rpg-settings-title">
-            <button id="rpg-close-settings" class="rpg-popup-close">&times;</button>
+                <i class="fa-solid fa-gear" aria-hidden="true"></i>
-        </div>
+                <span>RPG Companion Settings</span>
+            </h3>
+            <button id="rpg-close-settings" class="rpg-popup-close" type="button" aria-label="Close settings">&times;</button>
+        </header>
         <div class="rpg-settings-popup-body">
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-palette"></i> Theme</h4>
+                <h4><i class="fa-solid fa-palette" aria-hidden="true"></i> Theme</h4>
                 <div class="rpg-setting-row">
                     <label for="rpg-theme-select">Visual Theme:</label>
                     <select id="rpg-theme-select" class="rpg-select">
@@ -124,9 +126,9 @@
             </div>
 
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-toggle-on"></i> Display Options</h4>
+                <h4><i class="fa-solid fa-toggle-on" aria-hidden="true"></i> Display Options</h4>
                 <small class="notes" style="display: block; margin-bottom: 10px;">
-                    <i class="fa-solid fa-info-circle"></i> Use the Extensions tab to enable/disable the RPG Companion extension.
+                    <i class="fa-solid fa-info-circle" aria-hidden="true"></i> Use the Extensions tab to enable/disable the RPG Companion extension.
                 </small>
 
                 <div class="rpg-setting-row">
@@ -183,7 +185,7 @@
             </div>
 
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-sliders"></i> Advanced</h4>
+                <h4><i class="fa-solid fa-sliders" aria-hidden="true"></i> Advanced</h4>
 
                 <div class="rpg-setting-row">
                     <label for="rpg-generation-mode">Generation Mode:</label>
@@ -203,7 +205,7 @@
                 <!-- Clear Cache Button -->
                 <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
                     <button id="rpg-clear-cache" class="rpg-btn-clear-cache">
-                        <i class="fa-solid fa-trash"></i> Clear Extension Cache
+                        <i class="fa-solid fa-trash" aria-hidden="true"></i> Clear Extension Cache
                     </button>
                 </div>
             </div>
@@ -211,27 +213,29 @@
     </div>
 </div>
 
-<!-- Dice Roll Popup -->
+<!-- Dice Roll Modal -->
-<div id="rpg-dice-popup" class="rpg-dice-popup" style="display: none;">
+<div id="rpg-dice-popup" class="rpg-dice-popup" role="dialog" aria-modal="true" aria-labelledby="rpg-dice-title">
-    <div class="rpg-dice-popup-overlay"></div>
     <div class="rpg-dice-popup-content">
-        <div class="rpg-dice-popup-header">
+        <header class="rpg-dice-popup-header">
-            <h3><i class="fa-solid fa-dice-d20"></i> Roll Dice</h3>
+            <h3 id="rpg-dice-title">
-            <button id="rpg-dice-popup-close" class="rpg-btn-icon">
+                <i class="fa-solid fa-dice-d20" aria-hidden="true"></i>
-                <i class="fa-solid fa-times"></i>
+                <span>Roll Dice</span>
+            </h3>
+            <button id="rpg-dice-popup-close" class="rpg-btn-icon" type="button" aria-label="Close dialog">
+                <i class="fa-solid fa-times" aria-hidden="true"></i>
             </button>
-        </div>
+        </header>
 
         <div class="rpg-dice-popup-body">
             <div class="rpg-dice-selector-container">
                 <div class="rpg-dice-selector">
                     <div class="rpg-dice-input-group">
                         <label for="rpg-dice-count">Number of Dice:</label>
-                        <input type="number" id="rpg-dice-count" min="1" max="20" value="1" class="rpg-input" />
+                        <input type="number" id="rpg-dice-count" name="dice-count" min="1" max="20" value="1" class="rpg-input" />
                     </div>
                     <div class="rpg-dice-input-group">
                         <label for="rpg-dice-sides">Dice Type:</label>
-                        <select id="rpg-dice-sides" class="rpg-select">
+                        <select id="rpg-dice-sides" name="dice-sides" class="rpg-select">
                             <option value="4">d4</option>
                             <option value="6">d6</option>
                             <option value="8">d8</option>
@@ -242,24 +246,26 @@
                         </select>
                     </div>
                 </div>
-                <button id="rpg-dice-roll-btn" class="rpg-btn-primary">
+                <button id="rpg-dice-roll-btn" class="rpg-btn-primary" type="button">
-                    <i class="fa-solid fa-dice"></i> Roll Dice
+                    <i class="fa-solid fa-dice" aria-hidden="true"></i>
+                    <span>Roll Dice</span>
                 </button>
             </div>
 
-            <div id="rpg-dice-animation" class="rpg-dice-animation" style="display: none;">
+            <div id="rpg-dice-animation" class="rpg-dice-animation" hidden aria-live="polite" aria-busy="true">
                 <div class="rpg-dice-rolling">
-                    <i class="fa-solid fa-dice-d20 fa-spin"></i>
+                    <i class="fa-solid fa-dice-d20 fa-spin" aria-hidden="true"></i>
                 </div>
                 <div class="rpg-dice-rolling-text">Rolling...</div>
             </div>
 
-            <div id="rpg-dice-result" class="rpg-dice-result" style="display: none;">
+            <div id="rpg-dice-result" class="rpg-dice-result" hidden aria-live="polite">
                 <div class="rpg-dice-result-label">Result:</div>
-                <div id="rpg-dice-result-value" class="rpg-dice-result-value">0</div>
+                <output id="rpg-dice-result-value" class="rpg-dice-result-value" for="rpg-dice-count rpg-dice-sides">0</output>
-                <div id="rpg-dice-result-details" class="rpg-dice-result-details"></div>
+                <div id="rpg-dice-result-details" class="rpg-dice-result-details" role="status"></div>
-                <button id="rpg-dice-save-btn" class="rpg-btn-primary rpg-dice-save-btn">
+                <button id="rpg-dice-save-btn" class="rpg-btn-primary rpg-dice-save-btn" type="button">
-                    <i class="fa-solid fa-check"></i> Save Roll
+                    <i class="fa-solid fa-check" aria-hidden="true"></i>
+                    <span>Save Roll</span>
                 </button>
             </div>
         </div>