-<div class="btn-action cursor-pointer" data-fullscreen-btn="orders" data-bs-toggle="tooltip" data-bs-title="{{ 'sylius.ui.full_screen'|trans }}">
+<button type="button" class="btn-action" data-fullscreen-btn="orders" data-bs-toggle="tooltip" data-bs-title="{{ 'sylius.ui.full_screen'|trans }}" aria-label="{{ 'sylius.ui.full_screen'|trans }}">
     {{ ux_icon('tabler:maximize') }}
-</div>
+</button>

 document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
     btn.addEventListener('click', () => {
         const containerId = btn.getAttribute('data-fullscreen-btn');
         const container = document.querySelector(`[data-fullscreen-container="${containerId}"]`);
+        
+        if (!container) {
+            console.error(`Fullscreen container with ID "${containerId}" not found`);
+            return;
+        }

         if (!document.fullscreenElement) {
-            if (container.requestFullscreen) {
-                container.requestFullscreen();
+            const requestFullscreen = container.requestFullscreen 
+                || container.mozRequestFullScreen
+                || container.webkitRequestFullscreen
+                || container.msRequestFullscreen;
+            
+            if (requestFullscreen) {
+                try {
+                    requestFullscreen.call(container);
+                } catch (error) {
+                    console.error('Error attempting to enable fullscreen:', error);
+                }
+            } else {
+                console.warn('Fullscreen API is not supported by this browser');
             }
         } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
+            const exitFullscreen = document.exitFullscreen
+                || document.mozCancelFullScreen
+                || document.webkitExitFullscreen
+                || document.msExitFullscreen;
+
+            if (exitFullscreen) {
+                try {
+                    exitFullscreen.call(document);
+                } catch (error) {
+                    console.error('Error attempting to exit fullscreen:', error);
+                }
             }
         }

 document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
+    // Make the button focusable
+    btn.setAttribute('tabindex', '0');
+    btn.setAttribute('role', 'button');
+    
+    // Handle both click and keyboard events
     btn.addEventListener('click', () => {
         const containerId = btn.getAttribute('data-fullscreen-btn');
         const container = document.querySelector(`[data-fullscreen-container="${containerId}"]`);
+    });
+    
+    btn.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            btn.click();
+        }
     });

-        if (!document.fullscreenElement) {
-            if (container.requestFullscreen) {
-                container.requestFullscreen();
-            }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-        }
+        if (!document.fullscreenElement) {
+            try {
+                if (container.requestFullscreen) {
+                    await container.requestFullscreen();
+                } else if (container.webkitRequestFullscreen) { // Safari
+                    await container.webkitRequestFullscreen();
+                } else if (container.msRequestFullscreen) { // IE11
+                    await container.msRequestFullscreen();
+                } else {
+                    throw new Error('Fullscreen API not supported');
+                }
+                btn.querySelector('svg').classList.add('rotate-180');
+            } catch (err) {
+                console.error('Failed to enter fullscreen:', err);
+                // Show user-friendly error message
+            }
+        } else {
+            try {
+                if (document.exitFullscreen) {
+                    await document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    await document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    await document.msExitFullscreen();
+                }
+                btn.querySelector('svg').classList.remove('rotate-180');
+            } catch (err) {
+                console.error('Failed to exit fullscreen:', err);
+            }
+        }

-            <div class="btn-action cursor-pointer" data-fullscreen-btn="orders" data-bs-toggle="tooltip" data-bs-title="{{ 'sylius.ui.full_screen'|trans }}">
-                {{ ux_icon('tabler:maximize') }}
-            </div>
+            <button type="button" class="btn-action" data-fullscreen-btn="orders" data-bs-toggle="tooltip" data-bs-title="{{ 'sylius.ui.full_screen'|trans }}"
+                    aria-label="{{ 'sylius.ui.full_screen'|trans }}" aria-expanded="false">
+                <span class="fullscreen-icon">{{ ux_icon('tabler:maximize') }}</span>
+                <span class="exit-fullscreen-icon d-none">{{ ux_icon('tabler:minimize') }}</span>
+            </button>

-document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
-    btn.addEventListener('click', () => {
-        const containerId = btn.getAttribute('data-fullscreen-btn');
-        const container = document.querySelector(`[data-fullscreen-container="${containerId}"]`);
-
-        if (!document.fullscreenElement) {
-            if (container.requestFullscreen) {
-                container.requestFullscreen();
-            }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            }
-        }
-    });
-});
+// Check if fullscreen is supported
+const fullscreenEnabled = document.fullscreenEnabled || 
+    document.webkitFullscreenEnabled || 
+    document.mozFullScreenEnabled ||
+    document.msFullscreenEnabled;
+
+function getFullscreenElement() {
+    return document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullscreenElement;
+}
+
+function requestFullscreen(element) {
+    if (element.requestFullscreen) {
+        return element.requestFullscreen();
+    } else if (element.webkitRequestFullscreen) {
+        return element.webkitRequestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+        return element.mozRequestFullScreen();
+    } else if (element.msRequestFullscreen) {
+        return element.msRequestFullscreen();
+    }
+}
+
+function exitFullscreen() {
+    if (document.exitFullscreen) {
+        return document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+        return document.webkitExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+        return document.mozCancelFullScreen();
+    } else if (document.msExitFullscreen) {
+        return document.msExitFullscreen();
+    }
+}
+
+function updateFullscreenButton(button, isFullscreen) {
+    const maximizeIcon = button.querySelector('.fullscreen-icon');
+    const minimizeIcon = button.querySelector('.exit-fullscreen-icon');
+    
+    maximizeIcon.classList.toggle('d-none', isFullscreen);
+    minimizeIcon.classList.toggle('d-none', !isFullscreen);
+    button.setAttribute('aria-expanded', isFullscreen);
+}
+
+if (fullscreenEnabled) {
+    document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            try {
+                const containerId = btn.getAttribute('data-fullscreen-btn');
+                const container = document.querySelector(`[data-fullscreen-container="${containerId}"]`);
+                
+                if (!container) {
+                    throw new Error(`Container with id "${containerId}" not found`);
+                }
+
+                if (!getFullscreenElement()) {
+                    await requestFullscreen(container);
+                } else {
+                    await exitFullscreen();
+                }
+            } catch (error) {
+                console.error('Fullscreen error:', error);
+                // Optionally show user-friendly error message
+            }
+        });
+
+        // Update button state when fullscreen changes
+        document.addEventListener('fullscreenchange', () => {
+            updateFullscreenButton(btn, !!getFullscreenElement());
+        });
+    });
+} else {
+    // Hide fullscreen buttons if not supported
+    document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
+        btn.style.display = 'none';
+    });
+}

 document.querySelectorAll('[data-fullscreen-btn]').forEach(btn => {
+    // Handle fullscreen change events
+    const handleFullscreenChange = () => {
+        const isFullscreen = !!document.fullscreenElement;
+        btn.setAttribute('aria-expanded', isFullscreen);
+        // Update icon/visual state
+        btn.classList.toggle('is-fullscreen', isFullscreen);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
     btn.addEventListener('click', () => {
         const containerId = btn.getAttribute('data-fullscreen-btn');
         const container = document.querySelector(`[data-fullscreen-container="${containerId}"]`);
@@ -28,3 +37,8 @@
         }
     });
 });
+
+// Cleanup on page unload
+window.addEventListener('unload', () => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+});