L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-74741 javascript: A11y fix for dialogues visible from beginning

Browse Source
This commit is contained in:
Shamim Rezaie
2022-06-24 14:26:46 +10:00
parent 8303206ae0
commit 544947c9c7
4 changed files with 122 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
Vendored
+40 -26
View File
@@ -176,6 +176,13 @@ Y.extend(DIALOGUE, Y.Panel, {
if (this.get('visible')) {
this.applyZIndex();
this.applyAndTrapFocus();
// Only do accessibility hiding for modals because the ARIA spec
// says that all ARIA dialogues should be modal.
if (this.get('modal')) {
// Make this dialogue visible to screen readers.
this.setAccessibilityVisible();
}
}
// Recalculate the zIndex every time the modal is altered.
this.on('maskShow', this.applyZIndex);
@@ -420,35 +427,12 @@ Y.extend(DIALOGUE, Y.Panel, {
},
show: function() {
var result = null,
content = this.bodyNode,
focusSelector = this.get('focusOnShowSelector'),
focusNode = null;
result = DIALOGUE.superclass.show.call(this);
var result = DIALOGUE.superclass.show.call(this);
if (!this.get('center') && this._originalPosition) {
// Restore the dialogue position to it's location before it was moved at show time.
this.get('boundingBox').setXY(this._originalPosition);
}
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
}
if (!focusNode) {
// Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
if (content && content !== '') {
focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
}
}
require(['core/local/aria/focuslock'], function(FocusLockManager) {
// Trap focus to the current bounding box.
FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
if (focusNode) {
focusNode.focus();
}
}.bind(this));
this.applyAndTrapFocus();
return result;
},
@@ -571,7 +555,37 @@ Y.extend(DIALOGUE, Y.Panel, {
// Clear the cache. No longer need to store these.
this._hiddenSiblings = [];
}
},
/**
* Focuses on the node specified by focusOnShowSelector, or the first focusable node if nothing is specified.
* It also traps the focus to the current bounding box.
*
* @method applyAndTrapFocus
*/
applyAndTrapFocus: function() {
var content = this.bodyNode;
var focusSelector = this.get('focusOnShowSelector');
var focusNode = null;
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
}
if (!focusNode) {
// Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
if (content && content !== '') {
focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
}
}
require(['core/local/aria/focuslock'], function(FocusLockManager) {
// Trap focus to the current bounding box.
FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
if (focusNode) {
focusNode.focus();
}
}.bind(this));
},
}, {
NAME: DIALOGUE_NAME,
CSS_PREFIX: DIALOGUE_PREFIX,
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
Vendored
+40 -26
View File
@@ -176,6 +176,13 @@ Y.extend(DIALOGUE, Y.Panel, {
if (this.get('visible')) {
this.applyZIndex();
this.applyAndTrapFocus();
// Only do accessibility hiding for modals because the ARIA spec
// says that all ARIA dialogues should be modal.
if (this.get('modal')) {
// Make this dialogue visible to screen readers.
this.setAccessibilityVisible();
}
}
// Recalculate the zIndex every time the modal is altered.
this.on('maskShow', this.applyZIndex);
@@ -420,35 +427,12 @@ Y.extend(DIALOGUE, Y.Panel, {
},
show: function() {
var result = null,
content = this.bodyNode,
focusSelector = this.get('focusOnShowSelector'),
focusNode = null;
result = DIALOGUE.superclass.show.call(this);
var result = DIALOGUE.superclass.show.call(this);
if (!this.get('center') && this._originalPosition) {
// Restore the dialogue position to it's location before it was moved at show time.
this.get('boundingBox').setXY(this._originalPosition);
}
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
}
if (!focusNode) {
// Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
if (content && content !== '') {
focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
}
}
require(['core/local/aria/focuslock'], function(FocusLockManager) {
// Trap focus to the current bounding box.
FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
if (focusNode) {
focusNode.focus();
}
}.bind(this));
this.applyAndTrapFocus();
return result;
},
@@ -570,7 +554,37 @@ Y.extend(DIALOGUE, Y.Panel, {
// Clear the cache. No longer need to store these.
this._hiddenSiblings = [];
}
},
/**
* Focuses on the node specified by focusOnShowSelector, or the first focusable node if nothing is specified.
* It also traps the focus to the current bounding box.
*
* @method applyAndTrapFocus
*/
applyAndTrapFocus: function() {
var content = this.bodyNode;
var focusSelector = this.get('focusOnShowSelector');
var focusNode = null;
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
}
if (!focusNode) {
// Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
if (content && content !== '') {
focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
}
}
require(['core/local/aria/focuslock'], function(FocusLockManager) {
// Trap focus to the current bounding box.
FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
if (focusNode) {
focusNode.focus();
}
}.bind(this));
},
}, {
NAME: DIALOGUE_NAME,
CSS_PREFIX: DIALOGUE_PREFIX,
lib/yui/src/notification/js/dialogue.js
Vendored
+40 -26
View File
@@ -146,6 +146,13 @@ Y.extend(DIALOGUE, Y.Panel, {
if (this.get('visible')) {
this.applyZIndex();
this.applyAndTrapFocus();
// Only do accessibility hiding for modals because the ARIA spec
// says that all ARIA dialogues should be modal.
if (this.get('modal')) {
// Make this dialogue visible to screen readers.
this.setAccessibilityVisible();
}
}
// Recalculate the zIndex every time the modal is altered.
this.on('maskShow', this.applyZIndex);
@@ -390,35 +397,12 @@ Y.extend(DIALOGUE, Y.Panel, {
},
show: function() {
var result = null,
content = this.bodyNode,
focusSelector = this.get('focusOnShowSelector'),
focusNode = null;
result = DIALOGUE.superclass.show.call(this);
var result = DIALOGUE.superclass.show.call(this);
if (!this.get('center') && this._originalPosition) {
// Restore the dialogue position to it's location before it was moved at show time.
this.get('boundingBox').setXY(this._originalPosition);
}
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
}
if (!focusNode) {
// Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
if (content && content !== '') {
focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
}
}
require(['core/local/aria/focuslock'], function(FocusLockManager) {
// Trap focus to the current bounding box.
FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
if (focusNode) {
focusNode.focus();
}
}.bind(this));
this.applyAndTrapFocus();
return result;
},
@@ -541,7 +525,37 @@ Y.extend(DIALOGUE, Y.Panel, {
// Clear the cache. No longer need to store these.
this._hiddenSiblings = [];
}
},
/**
* Focuses on the node specified by focusOnShowSelector, or the first focusable node if nothing is specified.
* It also traps the focus to the current bounding box.
*
* @method applyAndTrapFocus
*/
applyAndTrapFocus: function() {
var content = this.bodyNode;
var focusSelector = this.get('focusOnShowSelector');
var focusNode = null;
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
}
if (!focusNode) {
// Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
if (content && content !== '') {
focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
}
}
require(['core/local/aria/focuslock'], function(FocusLockManager) {
// Trap focus to the current bounding box.
FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
if (focusNode) {
focusNode.focus();
}
}.bind(this));
},
}, {
NAME: DIALOGUE_NAME,
CSS_PREFIX: DIALOGUE_PREFIX,