MDL-44765 Atto: Fix the accessibility warning events for image dialogue

This commit is contained in:
Jason Fowler
2014-04-07 07:59:45 +08:00
parent 1a727e121e
commit 9754ab92da
4 changed files with 95 additions and 26 deletions
@@ -335,6 +335,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._applyImageProperties(this._form);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
this._form.one('.' + CSS.IMAGEPRESENTATION).on('change', this._updateWarning, this);
this._form.one('.' + CSS.INPUTALT).on('change', this._updateWarning, this);
this._form.one('.' + CSS.INPUTWIDTH).on('blur', this._autoAdjustHeight, this);
this._form.one('.' + CSS.INPUTHEIGHT).on('blur', this._autoAdjustWidth, this);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
@@ -555,15 +557,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
e.preventDefault();
if (alt === '' && !presentation) {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'block');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', true);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', true);
// Check if there are any accessibility issues.
if (this._updateWarning()) {
return;
} else {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'none');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', false);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', false);
}
this.getDialogue({
@@ -592,6 +588,33 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.markUpdated();
}
},
/**
* Update the alt text warning live.
*
* @method _updateWarning
* @return {boolean} whether a warning should be displayed.
* @private
*/
_updateWarning: function() {
var form = this._form,
state = true,
alt = form.one('.' + CSS.INPUTALT).get('value'),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked');
if (alt === '' && !presentation) {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'block');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', true);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', true);
state = true;
} else {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'none');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', false);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', false);
state = fakse;
}
this.getDialogue().centerDialogue();
return state;
}
});
File diff suppressed because one or more lines are too long
@@ -335,6 +335,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._applyImageProperties(this._form);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
this._form.one('.' + CSS.IMAGEPRESENTATION).on('change', this._updateWarning, this);
this._form.one('.' + CSS.INPUTALT).on('change', this._updateWarning, this);
this._form.one('.' + CSS.INPUTWIDTH).on('blur', this._autoAdjustHeight, this);
this._form.one('.' + CSS.INPUTHEIGHT).on('blur', this._autoAdjustWidth, this);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
@@ -555,15 +557,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
e.preventDefault();
if (alt === '' && !presentation) {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'block');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', true);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', true);
// Check if there are any accessibility issues.
if (this._updateWarning()) {
return;
} else {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'none');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', false);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', false);
}
this.getDialogue({
@@ -592,6 +588,33 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.markUpdated();
}
},
/**
* Update the alt text warning live.
*
* @method _updateWarning
* @return {boolean} whether a warning should be displayed.
* @private
*/
_updateWarning: function() {
var form = this._form,
state = true,
alt = form.one('.' + CSS.INPUTALT).get('value'),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked');
if (alt === '' && !presentation) {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'block');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', true);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', true);
state = true;
} else {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'none');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', false);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', false);
state = fakse;
}
this.getDialogue().centerDialogue();
return state;
}
});
+31 -8
View File
@@ -333,6 +333,8 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this._applyImageProperties(this._form);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
this._form.one('.' + CSS.IMAGEPRESENTATION).on('change', this._updateWarning, this);
this._form.one('.' + CSS.INPUTALT).on('change', this._updateWarning, this);
this._form.one('.' + CSS.INPUTWIDTH).on('blur', this._autoAdjustHeight, this);
this._form.one('.' + CSS.INPUTHEIGHT).on('blur', this._autoAdjustWidth, this);
this._form.one('.' + CSS.INPUTURL).on('blur', this._urlChanged, this);
@@ -553,15 +555,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
e.preventDefault();
if (alt === '' && !presentation) {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'block');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', true);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', true);
// Check if there are any accessibility issues.
if (this._updateWarning()) {
return;
} else {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'none');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', false);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', false);
}
this.getDialogue({
@@ -590,5 +586,32 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
this.markUpdated();
}
},
/**
* Update the alt text warning live.
*
* @method _updateWarning
* @return {boolean} whether a warning should be displayed.
* @private
*/
_updateWarning: function() {
var form = this._form,
state = true,
alt = form.one('.' + CSS.INPUTALT).get('value'),
presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked');
if (alt === '' && !presentation) {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'block');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', true);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', true);
state = true;
} else {
form.one('.' + CSS.IMAGEALTWARNING).setStyle('display', 'none');
form.one('.' + CSS.INPUTALT).setAttribute('aria-invalid', false);
form.one('.' + CSS.IMAGEPRESENTATION).setAttribute('aria-invalid', false);
state = false;
}
this.getDialogue().centerDialogue();
return state;
}
});