vidply 1.0.22 → 1.0.25

package/src/utils/MenuUtils.js

@@ -81,7 +81,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === nextIndex ? '0' : '-1');
                 });
-                menuItems[nextIndex].focus();
+                menuItems[nextIndex].focus({ preventScroll: false });
+                menuItems[nextIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'ArrowUp':
@@ -91,7 +92,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === prevIndex ? '0' : '-1');
                 });
-                menuItems[prevIndex].focus();
+                menuItems[prevIndex].focus({ preventScroll: false });
+                menuItems[prevIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'Home':
@@ -100,7 +102,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === 0 ? '0' : '-1');
                 });
-                menuItems[0].focus();
+                menuItems[0].focus({ preventScroll: false });
+                menuItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'End':
@@ -110,7 +113,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === lastIndex ? '0' : '-1');
                 });
-                menuItems[lastIndex].focus();
+                menuItems[lastIndex].focus({ preventScroll: false });
+                menuItems[lastIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'Enter':
@@ -159,6 +163,8 @@ export function focusFirstMenuItem(menu, itemSelector, delay = 0) {
                 item.setAttribute('tabindex', index === 0 ? '0' : '-1');
             });
             focusElement(menuItems[0], { delay: 0 });
+            // Scroll into view for keyboard users
+            menuItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
     }, delay);
 }

package/src/utils/SettingsMenuFactory.js

@@ -190,7 +190,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === nextIndex ? '0' : '-1');
                 });
-                menuItems[nextIndex].focus();
+                menuItems[nextIndex].focus({ preventScroll: false });
+                menuItems[nextIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'ArrowUp':
@@ -199,7 +200,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === prevIndex ? '0' : '-1');
                 });
-                menuItems[prevIndex].focus();
+                menuItems[prevIndex].focus({ preventScroll: false });
+                menuItems[prevIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'Home':
@@ -207,7 +209,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === 0 ? '0' : '-1');
                 });
-                menuItems[0].focus();
+                menuItems[0].focus({ preventScroll: false });
+                menuItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'End':
@@ -216,7 +219,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === lastIndex ? '0' : '-1');
                 });
-                menuItems[lastIndex].focus();
+                menuItems[lastIndex].focus({ preventScroll: false });
+                menuItems[lastIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'Escape':

package/src/utils/WindowComponents.js

@@ -47,15 +47,16 @@ export function createWindowHeader({
     // Add settings button if requested
     let settingsButton = null;
     if (showSettings && onSettingsClick) {
+        const settingsAriaLabel = i18n.t('settings.title');
         settingsButton = DOMUtils.createElement('button', {
             className: `${classPrefix}-icon-button ${headerClass}-settings`,
             attributes: {
                 'type': 'button',
-                'aria-label': i18n.t('settings.title'),
-                'title': i18n.t('settings.title')
+                'aria-label': settingsAriaLabel
             }
         });
         settingsButton.appendChild(createIconElement('settings'));
+        DOMUtils.attachTooltip(settingsButton, settingsAriaLabel, classPrefix);
         settingsButton.addEventListener('click', onSettingsClick);
         leftSide.appendChild(settingsButton);
     }
@@ -74,15 +75,16 @@ export function createWindowHeader({
     leftSide.appendChild(title);
 
     // Create close button
+    const closeAriaLabel = i18n.t('player.close');
     const closeButton = DOMUtils.createElement('button', {
         className: `${classPrefix}-icon-button ${headerClass}-close`,
         attributes: {
             'type': 'button',
-            'aria-label': i18n.t('player.close'),
-            'title': i18n.t('player.close')
+            'aria-label': closeAriaLabel
         }
     });
     closeButton.appendChild(createIconElement('close'));
+    DOMUtils.attachTooltip(closeButton, closeAriaLabel, classPrefix);
     if (onClose) {
         closeButton.addEventListener('click', onClose);
     }