Merge branch 'MDL-74741-master' of https://github.com/rezaies/moodle

This commit is contained in:
Jun Pataleta 2022-07-06 16:46:05 +08:00
commit ce043a452e
8 changed files with 127 additions and 82 deletions

View File

@ -483,6 +483,7 @@ Y.extend(DRAGDROP, Y.Base, {
listlink.setAttribute('data-drop-target', node.get('id'));
// Allow tabbing to the link.
listlink.setAttribute('tabindex', '0');
listlink.setAttribute('role', 'button');
// Set the event listeners for enter, space or click.
listlink.on('click', this.global_keyboard_drop, this);

File diff suppressed because one or more lines are too long

View File

@ -483,6 +483,7 @@ Y.extend(DRAGDROP, Y.Base, {
listlink.setAttribute('data-drop-target', node.get('id'));
// Allow tabbing to the link.
listlink.setAttribute('tabindex', '0');
listlink.setAttribute('role', 'button');
// Set the event listeners for enter, space or click.
listlink.on('click', this.global_keyboard_drop, this);

View File

@ -177,6 +177,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);
@ -421,35 +428,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;
},
@ -572,7 +556,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,

File diff suppressed because one or more lines are too long

View File

@ -177,6 +177,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);
@ -421,35 +428,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,

View File

@ -481,6 +481,7 @@ Y.extend(DRAGDROP, Y.Base, {
listlink.setAttribute('data-drop-target', node.get('id'));
// Allow tabbing to the link.
listlink.setAttribute('tabindex', '0');
listlink.setAttribute('role', 'button');
// Set the event listeners for enter, space or click.
listlink.on('click', this.global_keyboard_drop, this);

View File

@ -147,6 +147,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);
@ -391,35 +398,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;
},
@ -542,7 +526,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,