Replace jquery .focus() with .trigger( 'focus' )

See #612
ableplayer · joedolson · Jun 15, 2025 · Nov 11, 2022 · Nov 11, 2022 · Nov 20, 2022
commit 7316ecffa822f6f5f3ee01112e336e0211dd96ee
diff --git a/scripts/buildplayer.js b/scripts/buildplayer.js
@@ -588,20 +588,20 @@
 			if (e.which === 9) { // Tab
 				if (e.shiftKey) {
 					$thisItem.removeClass('able-focus');
-					$prevItem.focus().addClass('able-focus');
+					$prevItem.trigger('focus').addClass('able-focus');
 				}
 				else {
 					$thisItem.removeClass('able-focus');
-					$nextItem.focus().addClass('able-focus');
+					$nextItem.trigger('focus').addClass('able-focus');
 				}
 			}
 			else if (e.which === 40 || e.which === 39) { // down or right arrow
 				$thisItem.removeClass('able-focus');
-				$nextItem.focus().addClass('able-focus');
+				$nextItem.trigger('focus').addClass('able-focus');
 			}
 			else if (e.which == 38 || e.which === 37) { // up or left arrow
 				$thisItem.removeClass('able-focus');
-				$prevItem.focus().addClass('able-focus');
+				$prevItem.trigger('focus').addClass('able-focus');
 			}
 			else if (e.which === 32 || e.which === 13) { // space or enter
 				$thisItem.trigger( 'click' );
@@ -623,7 +623,7 @@
 
 		if (this.chaptersPopup && this.chaptersPopup.is(':visible')) {
 			this.chaptersPopup.hide();
-			this.$chaptersButton.attr('aria-expanded','false').focus();
+			this.$chaptersButton.attr('aria-expanded','false').trigger('focus');
 		}
 		if (this.captionsPopup && this.captionsPopup.is(':visible')) {
 			this.captionsPopup.hide();
@@ -646,14 +646,14 @@
 		}
 		if (this.$volumeSlider && this.$volumeSlider.is(':visible')) {
 			this.$volumeSlider.hide().attr('aria-hidden','true');
-			this.$volumeButton.attr('aria-expanded', 'false').focus();
+			this.$volumeButton.attr('aria-expanded', 'false').trigger('focus');
 		}
 		if (this.$transcriptPopup && this.$transcriptPopup.is(':visible')) {
 			this.hidingPopup = true;
 			this.$transcriptPopup.hide();
 			// restore menu items to their original state
 			this.$transcriptPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
-			this.$transcriptPopupButton.attr('aria-expanded','false').focus();
+			this.$transcriptPopupButton.attr('aria-expanded','false').trigger('focus');
 			// wait briefly, then reset hidingPopup
 			setTimeout(function() {
 				thisObj.hidingPopup = false;
@@ -663,7 +663,7 @@
 			this.$signPopup.hide();
 			// restore menu items to their original state
 			this.$signPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
-			this.$signPopupButton.attr('aria-expanded','false').focus();
+			this.$signPopupButton.attr('aria-expanded','false').trigger('focus');
 		}
 	};
 
@@ -1400,7 +1400,7 @@
 						// if player is being rebuilt because user clicked the Prev button
 						// return focus to that (newly built) button
 						if (this.buttonWithFocus == 'previous') {
-							this.$prevButton.focus();
+							this.$prevButton.trigger('focus');
 							this.buttonWithFocus = null;
 						}
 					}
@@ -1409,7 +1409,7 @@
 						// if player is being rebuilt because user clicked the Next button
 						// return focus to that (newly built) button
 						if (this.buttonWithFocus == 'next') {
-							this.$nextButton.focus();
+							this.$nextButton.trigger('focus');
 							this.buttonWithFocus = null;
 						}
 					}

diff --git a/scripts/chapters.js b/scripts/chapters.js
@@ -266,7 +266,7 @@
 			setTimeout(function() {
 				thisObj.hidingPopup = false;
 			}, 100);
-			thisObj.$chaptersButton.focus();
+			thisObj.$chaptersButton.trigger('focus');
 		}
 	};
 

diff --git a/scripts/control.js b/scripts/control.js
@@ -1259,7 +1259,7 @@
 						thisObj.captionsPopup.css('left', thisObj.$ccButton.position().left)
 						// Place focus on the first button (even if another button is checked)
 						thisObj.captionsPopup.find('li').removeClass('able-focus');
-						thisObj.captionsPopup.find('li').first().focus().addClass('able-focus');
+						thisObj.captionsPopup.find('li').first().trigger('focus').addClass('able-focus');
 					}, 50);
 				}
 			}
@@ -1279,7 +1279,7 @@
 		var _timeout = (timeout === undefined || timeout === null) ? 50 : timeout;
 
 		setTimeout(function() {
-			$el.focus();
+			$el.trigger('focus');
 		}, _timeout);
 	}
 
@@ -1293,7 +1293,7 @@
 		if (this.chaptersPopup.is(':visible')) {
 			this.chaptersPopup.hide();
 			this.hidingPopup = false;
-			this.$chaptersButton.attr('aria-expanded','false').focus();
+			this.$chaptersButton.attr('aria-expanded','false').trigger('focus');
 		}
 		else {
 			this.closePopups();
@@ -1306,10 +1306,10 @@
 			// Otherwise, place focus on the first chapter
 			this.chaptersPopup.find('li').removeClass('able-focus');
 			if (this.chaptersPopup.find('li[aria-checked="true"]').length) {
-				this.chaptersPopup.find('li[aria-checked="true"]').focus().addClass('able-focus');
+				this.chaptersPopup.find('li[aria-checked="true"]').trigger('focus').addClass('able-focus');
 			}
 			else {
-				this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').focus();
+				this.chaptersPopup.find('li').first().addClass('able-focus').attr('aria-checked','true').trigger('focus');
 			}
 		}
 	};
@@ -1360,7 +1360,7 @@
 			// restore each menu item to original hidden state
 			this.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
 			if (!this.showingPrefsDialog) {
-				this.$prefsButton.focus();
+				this.$prefsButton.trigger('focus');
 			}
 			// wait briefly, then reset hidingPopup
 			setTimeout(function() {
@@ -1371,7 +1371,7 @@
 			this.closePopups();
 			this.prefsPopup.show();
 			this.$prefsButton.attr('aria-expanded','true');
-			this.$prefsButton.focus(); // focus first on prefs button to announce expanded state
+			this.$prefsButton.trigger('focus'); // focus first on prefs button to announce expanded state
 			// give time for focus on button then adjust popup settings and focus
 			setTimeout(function() {
 				prefsButtonPosition = thisObj.$prefsButton.position();
@@ -1381,7 +1381,7 @@
 				thisObj.prefsPopup.css('left', prefsMenuLeft);
 				// remove prior focus and set focus on first item; also change tabindex from -1 to 0
 				thisObj.prefsPopup.find('li').removeClass('able-focus').attr('tabindex','0');
-				thisObj.prefsPopup.find('li').first().focus().addClass('able-focus');
+				thisObj.prefsPopup.find('li').first().trigger('focus').addClass('able-focus');
 			}, 50);
 		}
 	};
@@ -1400,7 +1400,7 @@
 			this.$transcriptButton.addClass('buttonOff').attr('aria-label',this.tt.showTranscript);
 			this.$transcriptButton.find('span.able-clipped').text(this.tt.showTranscript);
 			this.prefTranscript = 0;
-			this.$transcriptButton.focus().addClass('able-focus');
+			this.$transcriptButton.trigger('focus').addClass('able-focus');
 			// wait briefly before resetting stopgap var
 			// otherwise the keypress used to select 'Close' will trigger the transcript button
 			// Benchmark tests: If this is gonna happen, it typically happens in around 3ms; max 12ms
@@ -1420,7 +1420,7 @@
 			this.prefTranscript = 1;
 			// move focus to first focusable element (window options button)
 			this.focusNotClick = true;
-			this.$transcriptArea.find('button').first().focus();
+			this.$transcriptArea.find('button').first().trigger('focus');
 			// wait briefly before resetting stopgap var
 			setTimeout(function() {
 				thisObj.focusNotClick = false;
@@ -1438,7 +1438,7 @@
 			this.$signButton.addClass('buttonOff').attr('aria-label',this.tt.showSign);
 			this.$signButton.find('span.able-clipped').text(this.tt.showSign);
 			this.prefSign = 0;
-			this.$signButton.focus().addClass('able-focus');
+			this.$signButton.trigger('focus').addClass('able-focus');
 			// wait briefly before resetting stopgap var
 			// otherwise the keypress used to select 'Close' will trigger the transcript button
 			setTimeout(function() {
@@ -1455,7 +1455,7 @@
 			this.$signButton.find('span.able-clipped').text(this.tt.hideSign);
 			this.prefSign = 1;
 			this.focusNotClick = true;
-			this.$signWindow.find('button').first().focus();
+			this.$signWindow.find('button').first().trigger('focus');
 			// wait briefly before resetting stopgap var
 			// otherwise the keypress used to select 'Close' will trigger the transcript button
 			setTimeout(function() {

diff --git a/scripts/dialog.js b/scripts/dialog.js
@@ -79,13 +79,13 @@
 				if (e.shiftKey) {
 					// If backwards from first element, go to last.
 					if (currentIndex === 0) {
-						focusable.get(focusable.length - 1).focus();
+						focusable.get(focusable.length - 1).trigger('focus');
 						e.preventDefault();
 					}
 				}
 				else {
 					if (currentIndex === focusable.length - 1) {
-						focusable.get(0).focus();
+						focusable.get(0).trigger('focus');
 						e.preventDefault();
 					}
 				}
@@ -128,7 +128,7 @@
 		var thisObj = this;
 		setTimeout(function () {
 			// set focus on the first focusable element
-			thisObj.modal.find('button.modalCloseButton').first().focus();
+			thisObj.modal.find('button.modalCloseButton').first().trigger('focus');
 		}, 300);
 	};
 
@@ -140,7 +140,7 @@
 		this.modal.attr('aria-hidden', 'true');
 		$('body > *').not('.able-modal-overlay').not('.able-modal-dialog').removeAttr('aria-hidden');
 
-		this.focusedElementBeforeModal.focus();
+		this.focusedElementBeforeModal.trigger('focus');
 	};
 
 	AccessibleDialog.prototype.getInputs = function () {

diff --git a/scripts/dragdrop.js b/scripts/dragdrop.js
@@ -339,12 +339,12 @@
 			}
 			resizeDialog.hide();
 			$windowPopup.hide();
-			$windowButton.focus();
+			$windowButton.trigger('focus');
 		});
 		$cancelButton.on('click',function () {
 			resizeDialog.hide();
 			$windowPopup.hide();
-			$windowButton.focus();
+			$windowButton.trigger('focus');
 		});
 
 		// Now assemble all the parts
@@ -406,7 +406,7 @@
 						// also restore menu items to their original state
 						$windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
 						// also return focus to window options button
-						$windowButton.focus();
+						$windowButton.trigger('focus');
 					});
 				}
 				else {
@@ -433,7 +433,7 @@
 				thisObj.windowMenuClickRegistered = false; // reset
 			});
 			$windowPopup.find('li').removeClass('able-focus');
-			$windowButton.attr('aria-expanded','false').focus();
+			$windowButton.attr('aria-expanded','false').trigger('focus');
 		}
 		else {
 			// first, be sure window is on top
@@ -442,7 +442,7 @@
 			$windowPopup.css('top', popupTop);
 			$windowPopup.show(200,'',function() {
 				$windowButton.attr('aria-expanded','true');
-				$(this).find('li').first().focus().addClass('able-focus');
+				$(this).find('li').first().trigger('focus').addClass('able-focus');
 				thisObj.windowMenuClickRegistered = false; // reset
 			});
 		}
@@ -477,7 +477,7 @@
 					$windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
 					$windowButton.attr('aria-expanded','false');
 					// also return focus to window options button
-					$windowButton.focus();
+					$windowButton.trigger('focus');
 				});
 				return false;
 			}
@@ -499,7 +499,7 @@
 			$windowButton.attr('aria-expanded','false');
 		});
 		if (choice !== 'close') {
-			$windowButton.focus();
+			$windowButton.trigger('focus');
 		}
 		if (choice === 'move') {
 
@@ -523,7 +523,7 @@
 				this.dragDevice = 'mouse';
 			}
 			this.startDrag(which, $window);
-			$windowPopup.hide().parent().focus();
+			$windowPopup.hide().parent().trigger('focus');
 		}
 		else if (choice == 'resize') {
 			// resize through the menu uses a form, not drag
@@ -608,7 +608,7 @@
 			'position': 'absolute',
 			'top': this.dragStartY + 'px',
 			'left': this.dragStartX + 'px'
-		}).focus();
+		}).trigger('focus');
 
 		// add device-specific event listeners
 		if (this.dragDevice === 'mouse') { // might also be a touchpad
@@ -725,7 +725,7 @@
 		this.$activeWindow = null;
 
 		if (this.dragDevice === 'keyboard') {
-			$windowButton.focus();
+			$windowButton.trigger('focus');
 		}
 		this.dragging = false;
 
@@ -786,7 +786,7 @@
 
 		// if window's popup menu is open, close it & place focus on button (???)
 		if ($windowPopup.is(':visible')) {
-			$windowPopup.hide().parent().focus();
+			$windowPopup.hide().parent().trigger('focus');
 		}
 
 		// get starting width and height
@@ -823,7 +823,7 @@
 
 		$(document).off('mousemove mouseup touchmove touchup');
 		this.$activeWindow.off('keydown');
-		$windowButton.show().focus();
+		$windowButton.show().trigger('focus');
 		this.resizing = false;
 		this.$activeWindow.removeClass('able-resize');
 

diff --git a/scripts/event.js b/scripts/event.js
@@ -253,7 +253,7 @@
 				classList = this.$focusedElement.attr("class").split(/\s+/);
 				$.each(classList, function(index, item) {
 					if (item.substring(0,20) === 'able-button-handler-') {
-						$('div.able-controller div.' + item).focus();
+						$('div.able-controller div.' + item).trigger('focus');
 					}
 				});
 			}

diff --git a/scripts/metadata.js b/scripts/metadata.js
@@ -54,7 +54,7 @@
             } else if (line.toLowerCase().substring(0, 6) == "focus:") {
               focusTarget = line.substring(6).trim();
               if ($(focusTarget).length) {
-                $(focusTarget).focus();
+                $(focusTarget).trigger('focus');
               }
             } else {
               if ($(line).length) {

diff --git a/scripts/vts.js b/scripts/vts.js
@@ -739,7 +739,7 @@
 		this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this
 
 		// Place focus in new select field
-		$select.focus();
+		$select.trigger('focus');
 
 	};