vidply 1.0.21 → 1.0.24

package/src/utils/DOMUtils.js

@@ -149,6 +149,73 @@ export const DOMUtils = {
     
     temp.innerHTML = safeHtml;
     return temp.innerHTML;
+  },
+
+  /**
+   * Create a tooltip element that is aria-hidden (not read by screen readers)
+   * @param {string} text - Tooltip text
+   * @param {string} classPrefix - Class prefix for styling
+   * @returns {HTMLElement} Tooltip element
+   */
+  createTooltip(text, classPrefix = 'vidply') {
+    const tooltip = this.createElement('span', {
+      className: `${classPrefix}-tooltip`,
+      textContent: text,
+      attributes: {
+        'aria-hidden': 'true'
+      }
+    });
+    return tooltip;
+  },
+
+  /**
+   * Attach a tooltip to an element
+   * @param {HTMLElement} element - Element to attach tooltip to
+   * @param {string} text - Tooltip text
+   * @param {string} classPrefix - Class prefix for styling
+   */
+  attachTooltip(element, text, classPrefix = 'vidply') {
+    if (!element || !text) return;
+    
+    // Remove existing tooltip if any
+    const existingTooltip = element.querySelector(`.${classPrefix}-tooltip`);
+    if (existingTooltip) {
+      existingTooltip.remove();
+    }
+    
+    const tooltip = this.createTooltip(text, classPrefix);
+    element.appendChild(tooltip);
+    
+    // Show tooltip on hover/focus
+    const showTooltip = () => {
+      tooltip.classList.add(`${classPrefix}-tooltip-visible`);
+    };
+    
+    const hideTooltip = () => {
+      tooltip.classList.remove(`${classPrefix}-tooltip-visible`);
+    };
+    
+    element.addEventListener('mouseenter', showTooltip);
+    element.addEventListener('mouseleave', hideTooltip);
+    element.addEventListener('focus', showTooltip);
+    element.addEventListener('blur', hideTooltip);
+  },
+
+  /**
+   * Create visible button text that is hidden by CSS but visible when CSS is disabled
+   * @param {string} text - Button text
+   * @param {string} classPrefix - Class prefix for styling
+   * @returns {HTMLElement} Button text element
+   */
+  createButtonText(text, classPrefix = 'vidply') {
+    const buttonText = this.createElement('span', {
+      className: `${classPrefix}-button-text`,
+      textContent: text,
+      attributes: {
+        'aria-hidden': 'true'
+      }
+    });
+    return buttonText;
   }
 };
 

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);
     }