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

Merge branch 'MDL-35918-29' of git://github.com/ryanwyllie/moodle into MOODLE_29_STABLE

Browse Source
This commit is contained in:
Andrew Nicols
2015-09-29 13:42:58 +08:00
parent 0e1967f0ef 7dd1a2adff
commit cbd5cc6c97
4 changed files with 230 additions and 5 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
+76 -1
View File
@@ -57,7 +57,7 @@ DIALOGUE = function(c) {
config.COUNT = Y.stamp(this);
var id = 'moodle-dialogue-' + config.COUNT;
config.notificationBase =
Y.Node.create('<div class="'+CSS.BASE+'">')
Y.Node.create('<div class="'+CSS.BASE+'" aria-hidden="true">')
.append(Y.Node.create('<div id="' + id + '" role="dialog" ' +
'aria-labelledby="' + id + '-header-text" class="' + CSS.WRAP + '"></div>')
.append(Y.Node.create('<div id="' + id + '-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
@@ -364,6 +364,9 @@ Y.extend(DIALOGUE, Y.Panel, {
this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
}
// Make this dialogue visible to screen readers.
this.setAccessibilityVisible();
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
@@ -391,6 +394,9 @@ Y.extend(DIALOGUE, Y.Panel, {
}
}
// Hide this dialogue from screen readers.
this.setAccessibilityHidden();
// Unlock scroll if the plugin is present.
if (this.lockScroll) {
this.lockScroll.disableScrollLock();
@@ -435,6 +441,75 @@ Y.extend(DIALOGUE, Y.Panel, {
} else if (target === firstitem && direction === 'backward') { // Tab+shift key.
return lastitem.focus();
}
},
/**
* Sets the appropriate aria attributes on this dialogue and the other
* elements in the DOM to ensure that screen readers are able to navigate
* the dialogue popup correctly.
*
* @method setAccessibilityVisible
*/
setAccessibilityVisible : function() {
var thisDialogue = this;
// Get the element that contains this dialogue because we need it
// to filter out from the document.body child elements.
var container = thisDialogue.get(BASE);
// Keep a record of any elements we change so that they can be reverted later.
thisDialogue.hiddenSiblings = [];
// We need to get a list containing each sibling element and the shallowest
// non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
// the fact that this dialogue is always appended to the document body therefore
// it's siblings are the shallowest non-ancestral nodes. If that changes then
// this code should also be updated.
Y.one(document.body).get('children').each(function(node) {
// Skip the element that contains us.
if (node !== container) {
var hidden = node.get('aria-hidden');
// If they are already hidden we can ignore them.
if (hidden !== 'true') {
// Save their current state.
thisDialogue.hiddenSiblings.push({
oldValue: hidden,
node: node
});
// Hide this node from screen readers.
node.set('aria-hidden', 'true');
}
}
});
// Make us visible to screen readers.
container.set('aria-hidden', 'false');
},
/**
* Restores the aria visibility on the DOM elements changed when displaying
* the dialogue popup and makes the dialogue aria hidden to allow screen
* readers to navigate the main page correctly when the dialogue is closed.
*
* @method setAccessibilityHidden
*/
setAccessibilityHidden : function() {
var container = this.get(BASE);
container.set('aria-hidden', 'true');
// Restore the sibling nodes back to their original values.
Y.Array.each(this.hiddenSiblings, function(sibling) {
// If the element didn't previously have an aria-hidden attribute
// then we can just remove the one we set.
if (sibling.oldValue === null) {
sibling.node.removeAttribute('aria-hidden');
} else {
// Otherwise set it back to the old value (which will be false).
sibling.node.set('aria-hidden', sibling.oldValue);
}
});
// Clear the cache. No longer need to store these.
this.hiddenSiblings = [];
}
}, {
NAME : DIALOGUE_NAME,
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
+76 -1
View File
@@ -57,7 +57,7 @@ DIALOGUE = function(c) {
config.COUNT = Y.stamp(this);
var id = 'moodle-dialogue-' + config.COUNT;
config.notificationBase =
Y.Node.create('<div class="'+CSS.BASE+'">')
Y.Node.create('<div class="'+CSS.BASE+'" aria-hidden="true">')
.append(Y.Node.create('<div id="' + id + '" role="dialog" ' +
'aria-labelledby="' + id + '-header-text" class="' + CSS.WRAP + '"></div>')
.append(Y.Node.create('<div id="' + id + '-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
@@ -364,6 +364,9 @@ Y.extend(DIALOGUE, Y.Panel, {
this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
}
// Make this dialogue visible to screen readers.
this.setAccessibilityVisible();
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
@@ -391,6 +394,9 @@ Y.extend(DIALOGUE, Y.Panel, {
}
}
// Hide this dialogue from screen readers.
this.setAccessibilityHidden();
// Unlock scroll if the plugin is present.
if (this.lockScroll) {
this.lockScroll.disableScrollLock();
@@ -435,6 +441,75 @@ Y.extend(DIALOGUE, Y.Panel, {
} else if (target === firstitem && direction === 'backward') { // Tab+shift key.
return lastitem.focus();
}
},
/**
* Sets the appropriate aria attributes on this dialogue and the other
* elements in the DOM to ensure that screen readers are able to navigate
* the dialogue popup correctly.
*
* @method setAccessibilityVisible
*/
setAccessibilityVisible : function() {
var thisDialogue = this;
// Get the element that contains this dialogue because we need it
// to filter out from the document.body child elements.
var container = thisDialogue.get(BASE);
// Keep a record of any elements we change so that they can be reverted later.
thisDialogue.hiddenSiblings = [];
// We need to get a list containing each sibling element and the shallowest
// non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
// the fact that this dialogue is always appended to the document body therefore
// it's siblings are the shallowest non-ancestral nodes. If that changes then
// this code should also be updated.
Y.one(document.body).get('children').each(function(node) {
// Skip the element that contains us.
if (node !== container) {
var hidden = node.get('aria-hidden');
// If they are already hidden we can ignore them.
if (hidden !== 'true') {
// Save their current state.
thisDialogue.hiddenSiblings.push({
oldValue: hidden,
node: node
});
// Hide this node from screen readers.
node.set('aria-hidden', 'true');
}
}
});
// Make us visible to screen readers.
container.set('aria-hidden', 'false');
},
/**
* Restores the aria visibility on the DOM elements changed when displaying
* the dialogue popup and makes the dialogue aria hidden to allow screen
* readers to navigate the main page correctly when the dialogue is closed.
*
* @method setAccessibilityHidden
*/
setAccessibilityHidden : function() {
var container = this.get(BASE);
container.set('aria-hidden', 'true');
// Restore the sibling nodes back to their original values.
Y.Array.each(this.hiddenSiblings, function(sibling) {
// If the element didn't previously have an aria-hidden attribute
// then we can just remove the one we set.
if (sibling.oldValue === null) {
sibling.node.removeAttribute('aria-hidden');
} else {
// Otherwise set it back to the old value (which will be false).
sibling.node.set('aria-hidden', sibling.oldValue);
}
});
// Clear the cache. No longer need to store these.
this.hiddenSiblings = [];
}
}, {
NAME : DIALOGUE_NAME,
lib/yui/src/notification/js/dialogue.js
Vendored
+76 -1
View File
@@ -28,7 +28,7 @@ DIALOGUE = function(c) {
config.COUNT = Y.stamp(this);
var id = 'moodle-dialogue-' + config.COUNT;
config.notificationBase =
Y.Node.create('<div class="'+CSS.BASE+'">')
Y.Node.create('<div class="'+CSS.BASE+'" aria-hidden="true">')
.append(Y.Node.create('<div id="' + id + '" role="dialog" ' +
'aria-labelledby="' + id + '-header-text" class="' + CSS.WRAP + '"></div>')
.append(Y.Node.create('<div id="' + id + '-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
@@ -335,6 +335,9 @@ Y.extend(DIALOGUE, Y.Panel, {
this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
}
// Make this dialogue visible to screen readers.
this.setAccessibilityVisible();
// Try and find a node to focus on using the focusOnShowSelector attribute.
if (focusSelector !== null) {
focusNode = this.get('boundingBox').one(focusSelector);
@@ -362,6 +365,9 @@ Y.extend(DIALOGUE, Y.Panel, {
}
}
// Hide this dialogue from screen readers.
this.setAccessibilityHidden();
// Unlock scroll if the plugin is present.
if (this.lockScroll) {
this.lockScroll.disableScrollLock();
@@ -406,6 +412,75 @@ Y.extend(DIALOGUE, Y.Panel, {
} else if (target === firstitem && direction === 'backward') { // Tab+shift key.
return lastitem.focus();
}
},
/**
* Sets the appropriate aria attributes on this dialogue and the other
* elements in the DOM to ensure that screen readers are able to navigate
* the dialogue popup correctly.
*
* @method setAccessibilityVisible
*/
setAccessibilityVisible : function() {
var thisDialogue = this;
// Get the element that contains this dialogue because we need it
// to filter out from the document.body child elements.
var container = thisDialogue.get(BASE);
// Keep a record of any elements we change so that they can be reverted later.
thisDialogue.hiddenSiblings = [];
// We need to get a list containing each sibling element and the shallowest
// non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
// the fact that this dialogue is always appended to the document body therefore
// it's siblings are the shallowest non-ancestral nodes. If that changes then
// this code should also be updated.
Y.one(document.body).get('children').each(function(node) {
// Skip the element that contains us.
if (node !== container) {
var hidden = node.get('aria-hidden');
// If they are already hidden we can ignore them.
if (hidden !== 'true') {
// Save their current state.
thisDialogue.hiddenSiblings.push({
oldValue: hidden,
node: node
});
// Hide this node from screen readers.
node.set('aria-hidden', 'true');
}
}
});
// Make us visible to screen readers.
container.set('aria-hidden', 'false');
},
/**
* Restores the aria visibility on the DOM elements changed when displaying
* the dialogue popup and makes the dialogue aria hidden to allow screen
* readers to navigate the main page correctly when the dialogue is closed.
*
* @method setAccessibilityHidden
*/
setAccessibilityHidden : function() {
var container = this.get(BASE);
container.set('aria-hidden', 'true');
// Restore the sibling nodes back to their original values.
Y.Array.each(this.hiddenSiblings, function(sibling) {
// If the element didn't previously have an aria-hidden attribute
// then we can just remove the one we set.
if (sibling.oldValue === null) {
sibling.node.removeAttribute('aria-hidden');
} else {
// Otherwise set it back to the old value (which will be false).
sibling.node.set('aria-hidden', sibling.oldValue);
}
});
// Clear the cache. No longer need to store these.
this.hiddenSiblings = [];
}
}, {
NAME : DIALOGUE_NAME,