MDL-44765 Atto: Fix the accessibility warning events for image dialogue
This commit is contained in:
Vendored
+31
-8
@@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
Vendored
+31
-8
@@ -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
@@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user