Adding Custom Quick Fixes

Note: The following instructions work starting with Accessibility Checker 1.1.1 version.

Before reading this guide please make sure you read the "Creating Custom Issue Types" guide.

To register a custom Quick Fix you need to:

• Register the Quick Fix type (class) - this defines the Quick Fix logic.
• Bind the Quick Fix with Issue IDs - so that Accessibility Checker knows that a given Quick Fix applies to a particular issue type.

Quick Fixes are stored as JavaScript types in the static CKEDITOR.plugins.a11ychecker.quickFixes namespace. New Quick Fix type must extend base QuickFix (or inheriting) type.

Sample Code

Below is a code that adds a simple issue for each strong element. It suggest changing it into an em element.

The Quick Fix does the transformation for the user.

Note that this Quick Fix extends the ElementReplace type, to avoid repeating the logic.

var config = {
	height: 150,

	on: {
		instanceReady: function() {
			var editor = this,
				a11ychecker = editor._.a11ychecker;

			// Depending on whether it's a dev version or not AC might not yet be available (#246).
			if ( a11ychecker.exec ) {
				a11yCheckerReady( editor )
			} else {
				a11ychecker.once( 'loaded', function() {
					a11yCheckerReady( editor );
				} );
			}

			function a11yCheckerReady( editor ) {
				var a11ychecker = editor._.a11ychecker,
					a11ycheckerStatic = CKEDITOR.plugins.a11ychecker;

				// Register Quick Fix.
				a11ycheckerStatic.quickFixes.get( {
					name: 'ElementReplace',
					callback: function( ElementReplace ) {
						/**
						 * Replaces `strong` elements with `em`.
						 *
						 * @member CKEDITOR.plugins.a11ychecker.ElementReplace
						 * @class StrongReplace
						 * @constructor
						 * @param {CKEDITOR.plugins.a11ychecker.Issue} issue
						 */
						function StrongReplace( issue ) {
							ElementReplace.call( this, issue );
						}

						StrongReplace.prototype = new ElementReplace();
						StrongReplace.prototype.constructor = StrongReplace;

						/**
						 * Returns the name of the tag that issue.element should be converted to.
						 *
						 * @member CKEDITOR.plugins.a11ychecker.ElementReplace.StrongReplace
						 * @param {Object} formAttributes Form attributes from {@link #fix}.
						 * @returns {String}
						 */
						StrongReplace.prototype.getTargetName = function( formAttributes ) {
							return 'em';
						};

						a11ycheckerStatic.quickFixes.add( 'StrongReplace', StrongReplace );
					}
				} );

				// Bind Quick Fix.
				a11ychecker.engine.fixesMapping.avoidStrongs = [ 'StrongReplace' ];

				a11ychecker.engine.on( 'process', function( evt ) {
					var Issue = a11ycheckerStatic.Issue,
						strongs = evt.data.contentElement.find( 'strong' ),
						issues = evt.data.issues;

					a11ychecker.engine.issueDetails.avoidStrongs = {
						title: 'Avoid strongs',
						descr: 'Our customers do not like <strong>strongs</strong>, use <em>emphasize</em> instead 😉'
					}

					CKEDITOR.tools.array.forEach( strongs.toArray(), function( strong ) {
						issues.addItem( new Issue( {
							originalElement: strong,
							testability: Issue.testability.ERROR,
							id: 'avoidStrongs'
						}, a11ychecker.engine ) );
					} );
				} );
			};
		}
	}
}