Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/237505
Change subject: Re-attempt I31ab2bace4: Try to stop user from tabbing outside
of open dialog box
......................................................................
Re-attempt I31ab2bace4: Try to stop user from tabbing outside of open dialog box
Add focus traps before and after the content, and on focusing these,
move the focus back inside the window, using OO.ui.isFocusableElement.
Bug: T69156
Change-Id: Ia49fe741e5d8a380ea60e6fb29286f4ebc77641d
---
M src/Window.js
1 file changed, 27 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/05/237505/1
diff --git a/src/Window.js b/src/Window.js
index 4cff430..1ff40f9 100644
--- a/src/Window.js
+++ b/src/Window.js
@@ -478,6 +478,8 @@
* @chainable
*/
OO.ui.Window.prototype.initialize = function () {
+ var $focusTrapBefore, $focusTrapAfter;
+
if ( !this.manager ) {
throw new Error( 'Cannot initialize window, must be attached to
a manager' );
}
@@ -486,6 +488,9 @@
this.$head = $( '<div>' );
this.$body = $( '<div>' );
this.$foot = $( '<div>' );
+ $focusTrapBefore = $( '<div>' ).prop( 'tabIndex', 0 );
+ $focusTrapAfter = $( '<div>' ).prop( 'tabIndex', 0 );
+ this.$focusTraps = $focusTrapBefore.add( $focusTrapAfter );
this.$document = $( this.getElementDocument() );
// Events
@@ -495,9 +500,26 @@
this.$head.addClass( 'oo-ui-window-head' );
this.$body.addClass( 'oo-ui-window-body' );
this.$foot.addClass( 'oo-ui-window-foot' );
- this.$content.append( this.$head, this.$body, this.$foot );
+ this.$focusTraps.addClass( 'oo-ui-window-focustrap' );
+ this.$content.append( $focusTrapBefore, this.$head, this.$body,
this.$foot, $focusTrapAfter );
return this;
+};
+
+/**
+ * Called when someone tries to focus the hidden element at the end of the
dialog.
+ * Sends focus back to the start of the dialog.
+ *
+ * TODO: send focus to the end of the dialog if focusTrapBefore was focused.
+ */
+OO.ui.Window.prototype.onFocusTrapFocused = function () {
+ this.$content.find( '*:not( .oo-ui-window-focustrap )' ).each( function
() {
+ var $this = $( this );
+ if ( OO.ui.isFocusableElement( $this ) ) {
+ $this.focus();
+ return false;
+ }
+ } );
};
/**
@@ -559,6 +581,9 @@
deferred = $.Deferred();
this.toggle( true );
+
+ this.focusTrapHandler = OO.ui.bind( this.onFocusTrapFocused, this );
+ this.$focusTraps.on( 'focus', this.focusTrapHandler );
this.getSetupProcess( data ).execute().done( function () {
// Force redraw by asking the browser to measure the elements'
widths
@@ -642,6 +667,7 @@
// Force redraw by asking the browser to measure the
elements' widths
win.$element.removeClass( 'oo-ui-window-active
oo-ui-window-setup' ).width();
win.$content.removeClass( 'oo-ui-window-content-setup'
).width();
+ win.$focusTraps.off( 'focus', win.focusTrapHandler );
win.toggle( false );
} );
};
--
To view, visit https://gerrit.wikimedia.org/r/237505
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia49fe741e5d8a380ea60e6fb29286f4ebc77641d
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
