Simplify AccessibleDialog, remove fullscreen polyfill

Removes five arguments from the AccessibleDialog: dialogRole (all Able Player dialogs have the dialog role), isModal (all Able Player's dialogs are modal), $descDiv, unused; width; replaced with CSS; escapeHook - only used by fullscreen, which is already know from the 'fullscreen' arg. This allows width to be fully controlled in CSS; also changes default width to `fit-content`. Also removes the polyfill of fullscreen mode. This was only used by iOS, but it really hasn't worked in years. Better to remove it than to have a broken feature. See #493, #48.
joedolson · Jan 11, 2026 · Sep 24, 2025 · Sep 26, 2025 · Sep 26, 2025 · Sep 28, 2025
commit 3b5ef730c42a0e791d739dabad2092d31eb48587
diff --git a/scripts/buildplayer.js b/scripts/buildplayer.js
@@ -895,7 +895,7 @@
 			controlLayout[1].push('preferences');
 		}
 
-		if (this.mediaType === 'video' && this.allowFullscreen) {
+		if (this.mediaType === 'video' && this.allowFullscreen && this.nativeFullscreenSupported() ) {
 			if (this.skin === 'legacy') {
 				controlLayout[3].push('fullscreen');
 			} else {

diff --git a/scripts/control.js b/scripts/control.js
@@ -1196,28 +1196,9 @@
 		this.updatePreferences('prefSign');
 	};
 
-	AblePlayer.prototype.isFullscreen = function () {
-
-		// NOTE: This has been largely replaced as of 3.2.5 with a Boolean this.fullscreen,
-		// which is defined in setFullscreen()
-		// This function returns true if *any* element is fullscreen
-		// but doesn't tell us whether a particular element is in fullscreen
-		// (e.g., if there are multiple players on the page)
-		// The Boolean this.fullscreen is defined separately for each player instance
-
-		if (this.nativeFullscreenSupported()) {
-			return (document.fullscreenElement ||
-					document.webkitFullscreenElement ||
-					document.webkitCurrentFullscreenElement ) ? true : false;
-		} else {
-			return this.modalFullscreenActive ? true : false;
-		}
-	}
-
 	AblePlayer.prototype.setFullscreen = function (fullscreen) {
 
 		if (this.fullscreen == fullscreen) {
-			// replace isFullscreen() with a Boolean. see function for explanation
 			return;
 		}
 		var thisObj = this;
@@ -1252,61 +1233,9 @@
 				this.fullscreen = false;
 			}
 		} else {
-			// Non-native fullscreen support through modal dialog.
-			// Create dialog on first run through.
-			if (!this.fullscreenDialog) {
-				var $dialogDiv = $('<div>');
-				// create a hidden alert, communicated to screen readers via aria-describedby
-				var $fsDialogAlert = $('<p>',{
-					'class': 'able-screenreader-alert'
-				}).text( this.translate( 'fullScreen', 'Full screen' ) ); // TODO: Add alert text that is more descriptive
-				$dialogDiv.append($fsDialogAlert);
-				// now render this as a dialog
-				this.fullscreenDialog = new AccessibleDialog(
-					$dialogDiv,
-					this.$fullscreenButton,
-					'dialog',
-					true,
-					this.translate( 'fullScreenTitle', 'Full screen video player' ),
-					$fsDialogAlert,
-					this.translate( 'exitFullscreen', 'Exit full screen' ),
-					'100%',
-					true,
-					function () {
-						thisObj.handleFullscreenToggle()
-					}
-				);
-				$('body').append($dialogDiv);
-			}
-
-			// Track whether paused/playing before moving element; moving the element can stop playback.
-			var wasPaused = this.paused;
-
-			if (fullscreen) {
-				this.modalFullscreenActive = true;
-				this.fullscreenDialog.show();
-
-				// Move player element into fullscreen dialog, then show.
-				// Put a placeholder element where player was.
-				this.$modalFullscreenPlaceholder = $('<div class="placeholder">');
-				this.$modalFullscreenPlaceholder.insertAfter($el);
-				$el.appendTo(this.fullscreenDialog.modal);
-
-				var newHeight = $(window).height() - this.$playerDiv.height();
-				if (typeof this.$descDiv !== 'undefined' && (!this.$descDiv.is(':hidden')) ) {
-					newHeight -= this.$descDiv.height();
-				}
-			} else {
-				this.modalFullscreenActive = false;
-				$el.insertAfter(this.$modalFullscreenPlaceholder);
-				this.$modalFullscreenPlaceholder.remove();
-				this.fullscreenDialog.hide();
-			}
-
-			// Resume playback if moving stopped it.
-			if (!wasPaused && this.paused) {
-				this.playMedia();
-			}
+			// Removed non-native fullscreen mode in 4.8, which only supported iOS.
+			// Native fullscreen is on iOS 18+ devices behind a feature flag
+			// The polyfill hasn't worked for years.
 		}
 		// add event handlers for changes in fullscreen mode.
 		// Browsers natively trigger this event with the Escape key,

diff --git a/scripts/dialog.js b/scripts/dialog.js
@@ -2,69 +2,56 @@
 	var focusableElementsSelector = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
 
 	// Based on the incredible accessible modal dialog.
-	window.AccessibleDialog = function(modalDiv, $returnElement, dialogRole, isModal, title, $descDiv, closeButtonLabel, width, fullscreen, escapeHook) {
+	window.AccessibleDialog = function( modalDiv, $returnElement, title, closeButtonLabel) {
 
 		this.title = title;
 		this.closeButtonLabel = closeButtonLabel;
 		this.focusedElementBeforeModal = $returnElement;
-		this.escapeHook = escapeHook;
 		this.baseId = $(modalDiv).attr('id') || Math.floor(Math.random() * 1000000000).toString();
 		var thisObj = this;
 		var modal = modalDiv;
 		this.modal = modal;
-		if ( width ) {
-			modal.css({
-				'width': width
-			});
-		}
+
 		modal.addClass('able-modal-dialog');
 
-		if (!fullscreen) {
-			var closeButton = $('<button>',{
-				 'class': 'modalCloseButton',
-				 'title': thisObj.closeButtonLabel,
-				 'aria-label': thisObj.closeButtonLabel
-			}).text('×');
-			closeButton.on( 'keydown', function (e) {
-				if (e.key === ' ') {
-					thisObj.hide();
-				}
-			}).on( 'click', function () {
+		var closeButton = $('<button>',{
+				'class': 'modalCloseButton',
+				'title': thisObj.closeButtonLabel,
+				'aria-label': thisObj.closeButtonLabel
+		}).text('×');
+		closeButton.on( 'keydown', function (e) {
+			if (e.key === ' ') {
 				thisObj.hide();
-			});
+			}
+		}).on( 'click', function () {
+			thisObj.hide();
+		});
 
-			var titleH1 = $('<h1></h1>');
-			titleH1.attr('id', 'modalTitle-' + this.baseId);
-			titleH1.text(title);
-			this.titleH1 = titleH1;
+		var titleH1 = $('<h1></h1>');
+		titleH1.attr('id', 'modalTitle-' + this.baseId);
+		titleH1.text(title);
+		this.titleH1 = titleH1;
 
-			modal.attr({
-				'aria-labelledby': 'modalTitle-' + this.baseId,
-			});
-			var modalHeader = $( '<div>', {
-				'class': 'able-modal-header'
-			});
-			modalHeader.prepend(titleH1);
-			modalHeader.prepend(closeButton);
-			modal.prepend(modalHeader);
-		}
+		modal.attr({
+			'aria-labelledby': 'modalTitle-' + this.baseId,
+		});
+		var modalHeader = $( '<div>', {
+			'class': 'able-modal-header'
+		});
+		modalHeader.prepend(titleH1);
+		modalHeader.prepend(closeButton);
+		modal.prepend(modalHeader);
 
 		modal.attr({
 			'aria-hidden': 'true',
-			'role': dialogRole,
+			'role': 'dialog',
+			'aria-modal': 'true'
 		});
-		if (isModal) {
-			modal.attr('aria-modal','true');
-		}
 
 		modal.on( 'keydown', function (e) {
 			if (e.key === 'Escape') {
-				if (thisObj.escapeHook) {
-					thisObj.escapeHook(e, this);
-				} else {
-					thisObj.hide();
-					e.preventDefault();
-				}
+				thisObj.hide();
+				e.preventDefault();
 			} else if (e.key === 'Tab') {
 				// Manually loop tab navigation inside the modal.
 				var parts = modal.find('*');

diff --git a/scripts/dragdrop.js b/scripts/dragdrop.js
@@ -311,12 +311,8 @@
 		resizeDialog = new AccessibleDialog(
 			$resizeForm,
 			$windowButton,
-			'dialog',
-			true,
 			this.translate( 'windowResizeHeading', 'Resize Window' ),
-			$resizeWrapper,
 			this.translate( 'closeButtonLabel', 'Close' ),
-			'20em'
 		);
 		if (which === 'transcript') {
 			this.transcriptResizeDialog = resizeDialog;

diff --git a/scripts/preference.js b/scripts/preference.js
@@ -739,7 +739,12 @@
 
 		// $prefsDiv (dialog) must be appended to the BODY!
 		$('body').append($prefsDiv);
-		dialog = new AccessibleDialog($prefsDiv, this.$prefsButton, 'dialog', true, formTitle, $prefsIntro, thisObj.tt.closeButtonLabel, false);
+		dialog = new AccessibleDialog(
+			$prefsDiv,
+			this.$prefsButton,
+			formTitle,
+			thisObj.tt.closeButtonLabel
+		);
 
 		// Add save and cancel buttons.
 		$buttonContainer = $( '<div class="able-prefs-buttons"></div>' );

diff --git a/styles/ableplayer.css b/styles/ableplayer.css
@@ -574,12 +574,18 @@ div.able-modal-dialog {
 	color: var(--able-modal-color);
 	background-color: var(--able-modal-background);
 	border: var(--able-modal-border);
-	width: 50rem;
+	width: fit-content;
 	max-width: 95%;
 	padding: 1rem;
 	box-sizing: border-box;
 }
 
+@media screen and ( width < 800px ) {
+	div.able-modal-dialog {
+		min-width: 95%;
+	}
+}
+
 body.able-modal-active {
 	overflow: hidden;
 }
@@ -618,6 +624,7 @@ div.able-modal-overlay {
 .able-modal-header {
 	display: flex;
 	justify-content: space-between;
+	gap: 8px;
 }
 
 .able-modal-dialog .modalCloseButton {