Prevent Focus Loss When Skip Button is Pressed (#6413)

* Prevent Focus Loss When Skip Button is Pressed

* Implement the suggested changes

* Update index.js

* Ensures focus shifts to the pause button

* Apply suggested changes

---------

Co-authored-by: rlauu <46294892+rlauu@users.noreply.github.com>

src/components/focusManager.js

@@ -93,6 +93,7 @@ function isCurrentlyFocusableInternal(elem) {
 
 // Determines if a focusable element can be focused at a given point in time
 function isCurrentlyFocusable(elem) {
+    if (!elem.classList?.contains('focusable')) {
         if (elem.disabled) {
             return false;
         }
@@ -110,6 +111,7 @@ function isCurrentlyFocusable(elem) {
                 return false;
             }
         }
+    }
 
     return isCurrentlyFocusableInternal(elem);
 }

src/components/playback/skipsegment.ts

@@ -20,6 +20,15 @@ interface ShowOptions {
 
 function onHideComplete(this: HTMLButtonElement) {
     if (this) {
+        // Handle focus after the hide transition completes
+        if (document.activeElement === this) {
+            this.blur();
+            const pauseButton = document.querySelector('.btnPause');
+            if (pauseButton && focusManager.isCurrentlyFocusable(pauseButton)) {
+                focusManager.focus(pauseButton);
+            }
+        }
+
         this.classList.add('hide');
     }
 }

src/controllers/playback/video/index.js

@@ -304,11 +304,15 @@ export default function (view) {
     }
 
     function slideDownToShow(elem) {
+        clearHideAnimationEventListeners(elem);
+        elem.classList.remove('hide');
         elem.classList.remove('osdHeader-hidden');
     }
 
     function slideUpToHide(elem) {
+        clearHideAnimationEventListeners(elem);
         elem.classList.add('osdHeader-hidden');
+        elem.addEventListener(transitionEndEventName, onHideAnimationComplete);
     }
 
     function clearHideAnimationEventListeners(elem) {
@@ -317,7 +321,7 @@ export default function (view) {
 
     function onHideAnimationComplete(e) {
         const elem = e.target;
-        if (elem != osdBottomElement) return;
+        if (elem !== osdBottomElement && elem !== headerElement) return;
         elem.classList.add('hide');
         elem.removeEventListener(transitionEndEventName, onHideAnimationComplete);
     }
@@ -338,8 +342,17 @@ export default function (view) {
                 _focus(focusElement);
             }
             toggleSubtitleSync();
-        } else if (currentVisibleMenu === 'osd' && focusElement && !layoutManager.mobile) {
+        } else if (currentVisibleMenu === 'osd' && !layoutManager.mobile) {
-            _focus(focusElement);
+            // If no focus element is provided, try to keep current focus if it's valid,
+            // otherwise default to pause button
+            if (!focusElement) {
+                const currentFocus = document.activeElement;
+                if (!currentFocus || !focusManager.isCurrentlyFocusable(currentFocus)) {
+                    focusElement = osdBottomElement.querySelector('.btnPause');
+                }
+            }
+
+            if (focusElement) _focus(focusElement);
         }
     }
 
@@ -354,7 +367,8 @@ export default function (view) {
             toggleSubtitleSync('hide');
 
             // Firefox does not blur by itself
-            if (document.activeElement) {
+            if (osdBottomElement.contains(document.activeElement)
+                || headerElement.contains(document.activeElement)) {
                 document.activeElement.blur();
             }
         }