MediaWiki:Gadget-Accessibility.js

/**
 * Outils de vérification de l'accessibilité des pages.
 * Ajoute une palette de liens, classiquement à gauche.
 * Auteurs : Lgd, Ltrlg
 * {{Projet:JavaScript/Script|Accessibility}}
 */
/* eslint-env browser */
/* jshint esversion: 6 */
/* global $, mw, OO */

( function () {

var
	supportedSkins = [ 'vector', 'monobook', 'timeless', 'vector-2022' ],
	portletId = 'p-accessibility',
	storageId = 'gadget-accessibility',
	messages;

// Literal non-breaking space, for situations where HTML entities can't be used
const NBSP = '\xA0';

/* ----- Translations ----- */

messages = {
	fr: {
		'accessibility-all-disable': 'Tout désactiver',
		'accessibility-alt-empty': 'ALT VIDE',
		'accessibility-alt-flag': 'L’alternative devrait commencer par « Drapeau… » ou « Pavillon… »',
		'accessibility-alt-gallery': 'Indiquez l’alternative de chaque image de la galerie.',
		'accessibility-alt-label': 'Alternatives',
		'accessibility-alt-link': 'Vérifiez si le lien sur l’image peut être désactivé (LINK vide) (ou si l’image peut être transformée en thumb)',
		'accessibility-alt-long': 'Vérifiez si cette alternative de $1 caractères pourrait être plus concise (environ 120' + NBSP + 'caractères au plus) et si l’alternative actuelle pourrait être transférée dans la section description de la page de l’image.',
		'accessibility-alt-missing': 'ALT MANQUANT',
		'accessibility-alt-title': 'Vérifier la présence des alternatives textuelles',
		'accessibility-alt-usemap': 'Indiquez l’alternative de l’image.',
		'accessibility-disclaimer': 'Soyez prudent dans vos modifications et n’hésitez pas à <a href="//fr.wikipedia.org/wiki/Discussion_Wikip%C3%A9dia:Atelier_accessibilit%C3%A9">demander conseil</a>.',
		'accessibility-good-practice-label': 'Bonnes pratiques',
		'accessibility-good-practice-page': 'Wikipédia:Atelier accessibilité/Bonnes pratiques',
		'accessibility-good-practice-title': 'Bonnes pratiques d’accessibilité (nouvelle fenêtre)',
		'accessibility-headers-dl': 'Possible élément de liste de définition utilisé à la place d’un titre de section',
		'accessibility-headers-h1': 'H1',
		'accessibility-headers-h2': 'H2',
		'accessibility-headers-h3': 'H3',
		'accessibility-headers-h4': 'H4',
		'accessibility-headers-h5': 'H5',
		'accessibility-headers-h6': 'H6',
		'accessibility-headers-label': 'Titres',
		'accessibility-headers-title': 'Vérifier l’accessibilité des titres de section',
		'accessibility-help-label': 'Aide gadget',
		'accessibility-help-page': 'Wikipédia:Atelier accessibilité/Aide gadget',
		'accessibility-help-title': 'Aide pour l’utilisation du gadget (nouvelle fenêtre)',
		'accessibility-lang-dk': 'Code de langue erroné' + NBSP + ': utilisez da (danois)',
		'accessibility-lang-empty': 'Code de langue erroné' + NBSP + ': lang ne doit pas être vide',
		'accessibility-lang-foreign-latn': 'Vérifiez que ce qui suit est bien une transcription en caractères latins (et non une traduction)' + NBSP + ':',
		'accessibility-lang-foreign-missing': 'Code de langue manquant pour une citation en langue étrangère',
		'accessibility-lang-gr': 'Code de langue erroné' + NBSP + ': utilisez el (grec moderne) ou grc (grec ancien avant 1453)',
		'accessibility-lang-jp': 'Code de langue erroné' + NBSP + ': utilisez ja (japonais)',
		'accessibility-lang-label': 'Langues',
		'accessibility-lang-lang': 'Lang' + NBSP + ': $1',
		'accessibility-lang-lat': 'Code de langue erroné' + NBSP + ': utilisez la (latin)',
		'accessibility-lang-lu': 'Code de langue erroné' + NBSP + ': utilisez lb (luxembourgeois)',
		'accessibility-lang-mul': 'Code de langue erroné' + NBSP + ': ne pas utiliser le code mul (multiple)',
		'accessibility-lang-oci': 'Code de langue erroné' + NBSP + ': utilisez oc (occitan)',
		'accessibility-lang-title': 'Vérifier la présence des changements de langue',
		'accessibility-lang-und': 'Code de langue erroné' + NBSP + ': ne pas utiliser le code und (undefined)',
		'accessibility-lists-dd': 'Définition' + NBSP + ': ',
		'accessibility-lists-dl': 'Vérifiez le bon usage et la structure de cette liste de définition.',
		'accessibility-lists-dt': 'Terme défini' + NBSP + ': ',
		'accessibility-lists-header': 'Possible élément de liste de définition utilisé à la place d’un titre de section',
		'accessibility-lists-indent': 'Possible élément de liste de définition utilisé uniquement pour indenter le texte',
		'accessibility-lists-label': 'Listes',
		'accessibility-lists-orphean': 'Élément de liste potentiellement orphelin' + NBSP + ': vérifier l’absence de sauts de ligne entre les *',
		'accessibility-lists-title': 'Vérifier l’accessibilité des listes de définition',
		'accessibility-portlet-collapse-title': 'Réduire',
		'accessibility-portlet-expand-title': 'Étendre',
		'accessibility-portlet-fix-title': 'Fixer le gadget',
		'accessibility-portlet-title': 'Accessibilité',
		'accessibility-portlet-unfix-title': 'Détacher',
		'accessibility-quotes-label': 'Citations',
		'accessibility-quotes-ok': 'Citation bien balisée' + NBSP + ': ',
		'accessibility-quotes-title': 'Vérifier l’accessibilité des citations',
		'accessibility-tables-caption-error': 'Ce tableau ne devrait pas avoir de titre caption (code wiki' + NBSP + ': |+)</caption>',
		'accessibility-tables-caption-missing': 'Ce tableau devrait avoir un titre caption (code wiki' + NBSP + ': |+)</caption>',
		'accessibility-tables-imbrication': 'Limitez autant que possible l’imbrication de tableaux.',
		'accessibility-tables-label': 'Tableaux',
		'accessibility-tables-summary': '@summary=$1',
		'accessibility-tables-td-headers': 'HEADERS: $1',
		'accessibility-tables-td-scope': 'ERREUR TD SCOPE: $1',
		'accessibility-tables-th-id': 'ID: $1',
		'accessibility-tables-th-missing-scope': 'Vérifiez s’il faut ajouter un SCOPE ou transformer en TD (code wiki' + NBSP + ': |)',
		'accessibility-tables-th-scope': 'SCOPE: $1',
		'accessibility-tables-th-scope-headers': 'SCOPE: $1 HEADERS: $2',
		'accessibility-tables-th-scope-headers-id': 'SCOPE: $1 HEADERS: $2 ID: $3',
		'accessibility-tables-th-scope-id': 'SCOPE: $1 ID: $2',
		'accessibility-tables-title': 'Vérifier l’accessibilité des tableaux'
	}
};

function selectApplicableMessages() {
	var
		defaultLang = 'fr',
		currentLang = mw.config.get( 'wgUserLanguage' );

	mw.messages.set( messages[ defaultLang ] );

	if ( currentLang !== defaultLang && currentLang in messages ) {
		mw.messages.set( messages[ currentLang ] );
	}
}

/* ----- Storage ----- */

function loadOptions() {
	var res = mw.storage.getObject( storageId );

	return $.isPlainObject( res ) ? res : {};
}

function storeOptions( options ) {
	mw.storage.setObject( storageId, options );
}

function storeBooleanState( name, val ) {
	var options = loadOptions();
	options[ name ] = val;
	storeOptions( options );
}

function loadBooleanState( name ) {
	var options = loadOptions();
	return Object.prototype.hasOwnProperty.call( options, name ) ?
		options[ name ] :
		null;
}

/* ----- Fixed or not ----- */

/** Add a state control to a portlet.
 *
 * @param {object} description Options bag with the following properties:
 *   - `$portlet`: jQuery handler for the portlet;
 *   - `$controls`: jQuery handler for the controls bar;
 *   - `id`: storage id, partial state class id;
 *   - `enableIcon': OOUI icon for enabling;
 *   - `enableTitle`: hover text for enabling;
 *   - `disableIcon': OOUI icon for disabling;
 *   - `disableTitle`: hover text for disabling;
 */
function addStateControlToPortlet( description ) {
	var
		disabledData = {
			title: description.enableTitle,
			icon: description.enableIcon
		},
		enabledData = {
			title: description.disableTitle,
			icon: description.disableIcon
		},

		enabled = loadBooleanState( description.id ),
		currentData = enabled ? enabledData : disabledData,

		button = new OO.ui.ButtonWidget( {
			framed: false,
			icon: currentData.icon,
			title: currentData.title
		} ),

		className = 'acc_' + description.id;

	if ( enabled ) {
		$( '#' + portletId ).addClass( className );
	}

	button.on( 'click', function () {
		var currentData;
		description.$portlet.toggleClass( className );
		enabled = !enabled;
		currentData = enabled ? enabledData : disabledData;
		storeBooleanState( description.id, enabled );

		button.setTitle( currentData.title );
		button.setIcon( currentData.icon );
	} );

	description.$controls.append( button.$element );
}

function addControlsToPortlet( $portlet ) {
	var $controls = $( '<span>' ).attr( 'id', 'acc_controls' );

	addStateControlToPortlet( {
		$portlet: $portlet,
		$controls: $controls,
		id: 'collapsed',
		enableTitle: mw.msg( 'accessibility-portlet-collapse-title' ),
		enableIcon: 'collapse',
		disableTitle: mw.msg( 'accessibility-portlet-expand-title' ),
		disableIcon: 'expand'
	} );

	addStateControlToPortlet( {
		$portlet: $portlet,
		$controls: $controls,
		id: 'fixed',
		enableTitle: mw.msg( 'accessibility-portlet-fix-title' ),
		enableIcon: 'window',
		disableTitle: mw.msg( 'accessibility-portlet-unfix-title' ),
		disableIcon: 'close'
	} );

	if ( ( /vector/ ).test( mw.config.get( 'skin' ) ) === true ) {
		$portlet.find( '.vector-menu-heading' ).before( $controls );
	} else {
		$portlet.find( 'h3' ).before( $controls );
	}
}

/* ----- Portlet creation ----- */

function addDisclaimerToPortlet( $portlet ) {
	var $disc = $( '<p>' )
		.attr( 'id', 'acc_disclaimer' )
		.html( mw.msg( 'accessibility-disclaimer' ) );
	$portlet.find( 'ul' ).after( $disc );
}

function createPortlet( id, title ) {
	var $portlet;
	switch ( mw.config.get( 'skin' ) ) {
		case 'vector-2022':
		case 'vector':
			$portlet = $( '<div>' )
				.attr( { id: id, 'class': 'vector-menu mw-portlet mw-portlet-accessibility vector-menu-portal portal' } )
				.append( $( '<div>' )
					.attr( 'class', 'vector-menu-heading' )
					.append( $( '<span>' )
						.attr( 'class', 'vector-menu-heading-label' )
						.text( title )
					)
				)
				.append( $( '<div>' )
					.attr( 'class', 'vector-menu-content body' )
					.append( $( '<ul>' )
						.attr( 'class', 'vector-menu-content-list' )
					)
				);
			$( '#p-navigation' ).after( $portlet );
			break;


		case 'timeless':
			$portlet = $( '<div>' )
				.attr( { id: id, 'class': 'mw-portlet', role: 'navigation', 'aria-labelledby': id + '-label' } )
				.append( $( '<h3>' )
					.attr( { id: id + '-label' } )
					.text( title )
				)
				.append( $( '<div>' )
					.attr( 'class', 'mw-portlet-body' )
					.append( $( '<ul>' ) )
				);
			$( '#p-navigation' ).after( $portlet );
			break;

		case 'monobook':
			$portlet = $( '<div>' )
				.attr( { id: id, 'class': 'portlet' } )
				.append( $( '<h3>' ).text( title ) )
				.append( $( '<div>' ).attr( 'class', 'pBody' )
					.append( $( '<ul>' ) )
				);
			$( '#p-search' ).after( $portlet );
			break;

		default:
			throw Error( 'Unsupported skin' );
	}
	return $portlet;
}

/* ----- CSS manipulation ----- */
/* We want to keep the code in CSS for now, but make strings translatable…
 * Let’s build a tiny CSS superset for that…
 * We will replace `«msg-name, args…»` (because french quotes are so easy for
 * french people) with `"msg with " arg "."`
 */

function replacesMessagesinCss( extendedCss ) {
	return extendedCss.replace( /«([^»]+)»/g, function ( _, cont ) {
		var
			parts = cont.split( /,\s*/ ),
			msgName = parts[ 0 ],
			msg = mw.msg( msgName ),
			// Obviously, we may need escaping at some point…
			wrappedMessage = '"' + msg + '"',
			finalString = wrappedMessage.replace(
				/\$(\d)/g,
				function ( _, sIndex ) {
					// Exit the string, then add our value.
					return '"' + parts[ Number( sIndex ) ] + '"';
				}
			);
		return finalString;
	} );
}

/* ----- Individual options ----- */

/** Create a option link in the portlet.
 *
 * @param {object} description is an option bag with the following properties:
 *    - [req] `id`: the storage identifier & link identifier;
 *    - [req] `title`: title for the portlet link;
 *    - [req] `label`: label for the portlet link;
 *    - [opt] `activate`: function executed for activating the option;
 *    - [opt] `deactivate`: function executed for deactivating the option.
 *    - [opt] `styles`: extended CSS used by this option (see
 *      `replacesMessagesinCss`).
 *
 *  @return {function} a function to change the state.
 *  Assuming you ran `var setActive = createOptionLink(…)`, you would:
 *    - run `setActive(true)` to activate the option;
 *    - run `setActive(false)` to deactivate the option.
 */
function createOptionLink( description ) {
	var
		active = loadBooleanState( description.id ),

		$portlet = $( mw.util.addPortletLink(
			/*   portlet */ portletId,
			/*      href */ '#',
			/*      text */ description.label,
			/*        id */ 'acc_' + description.id,
			/*   tooltip */ description.title,
			/* accesskey */ undefined,
			/*  nextnode */ undefined
		) );

	if ( description.styles ) {
		$( mw.loader.addStyleTag( replacesMessagesinCss( description.styles ) ) )
			// People should be able to see were styles come from
			.attr( 'id', 'accessibility-option-' + description.id );
	}

	function getPageContentElement( $content = null ) {
		if ( $content ) {
			if ( $content.is( '.mw-parser-output' ) ) {
				// $content est déjà l'élément .mw-parser-output, [[phab:T349298]]
				return $content;
			} else {
				// ça peut ne pas trouver d'élément, notamment si c'est
				// une page de modification n'ayant pas encore de prévisualisation
				return $content.find( '.mw-parser-output' );
			}
		} else {
			// ça peut ne pas trouver d'élément, notamment si c'est
			// une page de modification n'ayant pas encore de prévisualisation
			return $( '#mw-content-text' ).find( '.mw-parser-output' );
		}
	}

	function runCallback( cb, $pageContent ) {
		if ( cb ) {
			cb( $pageContent );
		}
	}

	function activate( $pageContent ) {
		if ( $pageContent.length ) {
			$pageContent.addClass( 'acc_' + description.id );
			runCallback( description.activate, $pageContent );
		}
	}

	function deactivate( $pageContent ) {
		if ( $pageContent.length ) {
			$pageContent.removeClass( 'acc_' + description.id );
			runCallback( description.deactivate, $pageContent );
		}
	}

	function setActive( newState ) {
		if ( newState !== active ) {
			active = newState;
			storeBooleanState( description.id, active );
			var $pageContent = getPageContentElement();
			if ( active ) {
				$portlet.addClass( 'acc_on' );
				activate( $pageContent );
			} else {
				$portlet.removeClass( 'acc_on' );
				deactivate( $pageContent );
			}
		}
	}

	mw.hook( 'wikipage.content' ).add( function ( $content ) {
		if ( active ) {
			var $pageContent = getPageContentElement( $content );
			activate( $pageContent );
		}
	} );

	$portlet.click( function ( e ) {
		e.preventDefault();
		setActive( !active );
	} );

	return setActive;
}

function createTableOption() {
	return createOptionLink( {
		id: 'table',
		title: mw.msg( 'accessibility-tables-title' ),
		label: mw.msg( 'accessibility-tables-label' ),

		activate: function ( $pageContent ) {
			$pageContent.find( 'table:has(th[scope])' )
				.not( ':has(caption)' )
				.prepend( $( '<caption>' )
					.attr( 'class', 'error acc_caption_error' )
					.text( mw.msg( 'accessibility-tables-caption-missing' ) )
				);

			$pageContent.find( 'table:has(caption)' )
				.not( ':has(th[scope])' )
				.prepend( $( '<caption>' )
					.attr( 'class', 'error acc_caption_error' )
					.text( mw.msg( 'accessibility-tables-caption-error' ) )
				);
		},

		deactivate: function ( $pageContent ) {
			$pageContent.find( 'caption.acc_caption_error' ).remove();
		},

		styles: `
			.acc_table table {
				border: 2px solid #FE7707 !important;
			}

			.acc_table table caption {
				display: table-caption !important;
				visibility: visible !important;
				position: static !important;
				height: auto !important;
				width: auto !important;
				font-size: 1em !important;
				line-height: 1em !important;
				text-indent: 0 !important;
				background-color: lightgreen !important;
			}
			.acc_table table caption.error {
				background: transparent !important;
				font-weight: bold !important;
			}
			.acc_table table[summary]:before {
				background-color:#FFFF99 !important;
				border: 1px solid #FFCC66 !important;
				color:#000000 !important;
				opacity:0.9 !important;
				font-size: 10px !important;
				line-height: 12px !important;
				padding: 2px 5px !important;
				content: «accessibility-tables-summary»;
			}
			.acc_table table th {
				background-color: red !important;
			}
			.acc_table table th:before {
				content: «accessibility-tables-th-missing-scope»;
				display: block;
				color: red !important;
				background: #fff !important
			}
			.acc_table table th[scope]:before,
			.acc_table table th[id]:before {
				display: none;
			}
			.acc_table table th[id] {
				background-color: lime !important;
			}
			.acc_table table th[scope] {
				background-color: lime !important;
			}
			.acc_table table th[scope]:after {
				content: "SCOPE " attr(scope);
				color: darkgreen;
				display: block;
			}
			.acc_table table th[id]:after {
				content: «accessibility-tables-th-id, attr(id)»;
				display: block;
				color: darkgreen;
			}
			.acc_table table th[scope][id]:after {
				content: «accessibility-tables-th-scope-id,
					attr(scope),
					attr(id)»;
				display: block;
				color: darkgreen;
			}
			.acc_table table th[scope][headers]:after {
				content: «accessibility-tables-th-scope-headers,
					attr(scope),
					attr(HEADERS)»;
				display: block;
				color: darkgreen;
			}
			.acc_table table th[scope][headers][id]:after {
				content: «accessibility-tables-th-scope-headers-id,
					attr(scope),
					attr(HEADERS),
					attr(ID)»;
				display: block;
				color: darkgreen;
			}

			.acc_table table td[headers] {
				background-color: yellow !important;
			}
			.acc_table table td[headers]:after {
				content: «accessibility-tables-td-headers, attr(HEADERS)»;
				display: block;
				color: darkgreen;
			}

			.acc_table table td[scope] {
				background-color: red !important;
			}
			.acc_table table td[scope]:after {
				content: «accessibility-tables-td-scope, attr(scope)»;
				display: block;
			}

			.acc_table table table {
				border: 5px solid red !important;
			}
			.acc_table table table:before {
				content: «accessibility-tables-imbrication»;
				font-weight: bold;
				color: red;
				background: #fff;
				display: block;
				padding: 5px;
			}

			.acc_table table col {
				width: auto !important;
			}
		`
	} );
}

function createHeaderOption() {
	return createOptionLink( {
		id: 'header',
		title: mw.msg( 'accessibility-headers-title' ),
		label: mw.msg( 'accessibility-headers-label' ),

		styles: `
			/* Headers*/
			.acc_header h1,
			.acc_header h2,
			.acc_header h3,
			.acc_header h4,
			.acc_header h5,
			.acc_header h6 {
				border: 3px solid green !important;
				padding: 3px !important;
				color: #000 !important;
			}
			.acc_header h1:before {
				content: «accessibility-headers-h1» " ";
			}
			.acc_header h2 {
				margin-left: 15px !important;
			}
			.acc_header h2:before {
				content: «accessibility-headers-h2» " ";
			}
			.acc_header h3 {
				margin-left: 30px !important;
			}
			.acc_header h3:before {
				content: «accessibility-headers-h3» " ";
			}
			.acc_header h4 {
				margin-left: 45px !important;
			}
			.acc_header h4:before {
				content: «accessibility-headers-h4» " ";
			}
			.acc_header h5 {
				margin-left: 60px !important;
			}
			.acc_header h5:before {
				content: «accessibility-headers-h5» " ";
			}
			.acc_header h6 {
				margin-left: 75px !important;
			}
			.acc_header h6:before {
				content: «accessibility-headers-h6» " ";
			}

			.acc_header dl dt:only-child:after {
				content: «accessibility-headers-dl»;
				color: red;
				margin: 5px;
				padding: 0 5px;
				border: 1px solid red;
			}
		`
	} );
}

function createListOption() {
	return createOptionLink( {
		id: 'list',
		title: mw.msg( 'accessibility-lists-title' ),
		label: mw.msg( 'accessibility-lists-label' ),

		styles: `
			/* listes */

			.acc_list dl,
			.acc_list dl dt {
				border: 1px solid #FE7707;
			}
			.acc_list dt:before {
				content: «accessibility-lists-dt»;
				color: #FE7707;
			}
			.acc_list dd:before {
				content: «accessibility-lists-dd»;
				color: #FE7707;
			}
			.acc_list dl:before {
				content: «accessibility-lists-dl»;
				color: #FE7707;
				font-weight: bold;
				display: block;
				margin: 5px;
			}
			.acc_list dl dt:only-child:after {
				content: «accessibility-lists-header»;
				color: red !important;
				margin: 5px;
				padding: 0 5px;
				border: 1px solid red;
			}
			.acc_list dl dd:only-child:before {
				content: «accessibility-lists-indent»;
				color: red !important;
				margin: 5px;
				padding: 0 5px;
				border: 1px solid red;
				font-weight: bold;
			}

			.acc_list ul + ul li:only-child {
				border: 1px solid red;
			}
			.acc_list ul + ul li:only-child:before {
				background-color: #fff !important;
				border: 1px solid red !important;
				color: red !important;
				padding: 2px 5px !important;
				content: «accessibility-lists-orphean»;
				display: block;
			}
			`
	} );
}

function createQuoteOption() {
	return createOptionLink( {
		id: 'quote',
		title: mw.msg( 'accessibility-quotes-title' ),
		label: mw.msg( 'accessibility-quotes-label' ),

		styles: `
			/* Quotes */
			.acc_quote .citation,
			.acc_quote blockquote {
				border: 1px solid green;
				background: lightgreen !important;
			}
			.acc_quote .citation:before,
			.acc_quote blockquote:before {
				content: «accessibility-quotes-ok»;
				color: Darkgreen ! important;
				font-weight: bold;
				padding: 5px;
			}
			`
	} );
}

function createLangOption() {
	return createOptionLink( {
		id: 'lang',
		title: mw.msg( 'accessibility-lang-title' ),
		label: mw.msg( 'accessibility-lang-label' ),

		styles: `
			.acc_lang *[lang] {
				border: 1px solid darkgreen;
			}
			.acc_lang *[lang]:after {
				content: «accessibility-lang-lang, attr(lang)» " ";
				border: 1px solid darkgreen;
				padding: 2px 5px;
				margin: 0 5px;
				background: yellow;
			}
			.acc_lang *[lang]:before {
				color: red;
			}

			.acc_lang *[lang=lat]:before {
				content: «accessibility-lang-lat» " ";
			}
			*[lang=gr]:before,
			*[lang=gr-Latn]:before,
			*[lang=gr-latn]:before {
				content: «accessibility-lang-gr» " ";
			}
			.acc_lang *[lang=oci]:before {
				content: «accessibility-lang-oci» " ";
			}
			.acc_lang *[lang=lu]:before {
				content: «accessibility-lang-lu» " ";
			}
			.acc_lang *[lang=jp]:before {
				content: «accessibility-lang-jp» " ";
			}
			.acc_lang *[lang=dk]:before {
				content: «accessibility-lang-dk» " ";
			}
			.acc_lang *[lang=mul]:before {
				content: «accessibility-lang-mul» " ";
			}
			.acc_lang *[lang=und]:before {
				content: «accessibility-lang-und» " ";
			}
			.acc_lang *[lang=""]:before {
				content: «accessibility-lang-empty» " ";
			}

			/* Modèle Citation étrangère */
			.acc_lang .not_fr_quote {
				border: 1px solid darkgreen;
			}
			.acc_lang .not_fr_quote:before {
				color: red;
				content: «accessibility-lang-foreign-missing» " ";
			}
			.acc_lang .not_fr_quote[lang]:not([lang=""]):before {
				content: "";
			}
			.acc_lang .transcription:before {
				content: «accessibility-lang-foreign-latn» " ";
			}
		`
	} );
}

/* ----- Alternatives (a bit longer…) ----- */

function missingAltMessage() {
	return $( '<span>' )
		.attr( 'class', 'error' )
		.text( mw.msg( 'accessibility-alt-missing' ) );
}

function $text( text ) {
	return $( document.createTextNode( text ) );
}

function joinJqArray( arr ) {
	var res, i;
	switch ( arr.length ) {
		case 0:
			return $( [] );
		case 1:
			return arr[ 0 ];
		default:
			res = arr[ 0 ];
			for ( i = 1; i < arr.length; ++i ) {
				res = res
					.add( $( '<br>' ) )
					.add( arr[ i ] );
			}
			return res;
	}
}

function getMessageForImage( $img, $parent, $grandparent, $great_grandparent ) {
	var
		alt = $img.attr( 'alt' ) || '',
		parts = [];

	if ( alt === '' ) {
		if ( !$great_grandparent.is( '.bandeau-icone' ) ) {
			if ( $parent.is( 'a' ) ) {
				parts.push( missingAltMessage() );
			} else {
				parts.push( $text( mw.msg( 'accessibility-alt-empty' ) ) );
			}
		}
	} else {
		parts.push( $text( alt ) );
		if ( alt.length > 120 ) {
			parts.push( $( '<span>' )
				.attr( 'class', 'error' )
				.text( mw.msg( 'accessibility-alt-long', alt.length ) )
			);
		}
	}

	if ( !$grandparent.is( 'figure[typeof~="mw:File/Thumb"]' ) ) {
		if ( /\.(png|svg|jpg|gif)$/i.test( alt ) ) {
			return missingAltMessage();
		}
		if ( $parent.is( '.mw-file-description' ) && !$great_grandparent.is( '.smiley' ) ) {
			if ( $great_grandparent.is( '.flagicon' ) ) {
				if ( !/^(Drapeau|Pavillon)/i.test( alt ) ) {
					parts.push( $( '<span>' )
						.attr( 'class', 'error' )
						.text( mw.msg( 'accessibility-alt-flag' ) )
					);
				}

			} else {
				parts.push( $( '<span>' )
					.attr( 'class', 'error' )
					.text( mw.msg( 'accessibility-alt-link' ) )
				);
			}
		}
	}

	return joinJqArray( parts );
}

function processSingleImageForAlternative( $img ) {
	var
		$parent = $img.parent(),
		$grandparent = $parent.parent(),
		$great_grandparent = $grandparent.parent(),
		$msg, $wrapped;

	$msg = getMessageForImage( $img, $parent, $grandparent, $great_grandparent );

	if ( $msg.length < 1 ) {
		return;
	}

	$wrapped = $( '<span>' )
		.attr( 'class', 'acc_attr_show' )
		.append( $msg );

	// override du "line-height: 0" hérité de l'élément figure
	if ( $grandparent.is( 'figure[typeof~="mw:File/Thumb"]' ) ) {
		$wrapped.css( 'line-height', '1.4em' );
	}

	if ( $parent.is( 'a' ) ) {
		$parent.before( $wrapped );
	} else {
		$img.before( $wrapped );
	}
}

function insertBeforeElements( $targets, $element ) {
	var i;

	try {
		$targets.eq( 0 ).before( $element );
		for ( i = 1; i < $targets.length; ++i ) {
			$targets.eq( i ).before( $element.clone );
		}
	} catch (e) {
		// avoid TypeError: this.map is not a function (seen in VisualEditor)
	}
}

function createAltOption() {
	return createOptionLink( {
		id: 'alt',
		title: mw.msg( 'accessibility-alt-title' ),
		label: mw.msg( 'accessibility-alt-label' ),

		activate: function ( $pageContent ) {
			$pageContent.find( 'img' ).each( function () {
				processSingleImageForAlternative( $( this ) );
			} );

			// TODO Are these double spans necessary?

			insertBeforeElements(
				$pageContent.find( 'ul.gallery' ),
				$( '<span>' )
					.attr( 'class', 'acc_attr_show' )
					.append( $( '<span>' )
						.attr( 'class', 'error' )
						.text( mw.msg( 'accessibility-alt-gallery' ) )
					)
			);

			insertBeforeElements(
				$pageContent.find( 'img[usemap]' ),
				$( '<span>' )
					.attr( 'class', 'acc_attr_show' )
					.append( $( '<span>' )
						.attr( 'class', 'error' )
						.text( mw.msg( 'accessibility-alt-usemap' ) )
					)
			);
		},

		deactivate: function ( $pageContent ) {
			$pageContent.find( 'span.acc_attr_show' ).remove();
		}
	} );
}

/* ----- Global links ----- */

function createGlobalDisabler( optionsActivators ) {
	var portlet = mw.util.addPortletLink(
		/*   portlet */ portletId,
		/*      href */ '#',
		/*      text */ mw.msg( 'accessibility-all-disable' ),
		/*        id */ 'acc_all',
		/*   tooltip */ undefined,
		/* accesskey */ undefined,
		/*  nextnode */ undefined
	);

	$( portlet ).click( function ( e ) {
		e.preventDefault();
		optionsActivators.forEach( function ( setActive ) {
			setActive( false );
		} );
	} );
}

function createNewWindowPortletLink( description ) {
	var portlet = mw.util.addPortletLink(
		/*   portlet */ portletId,
		/*      href */ mw.util.getUrl( description.page ),
		/*      text */ description.label,
		/*        id */ description.id,
		/*   tooltip */ description.title,
		/* accesskey */ undefined,
		/*  nextnode */ undefined
	);
	$( portlet ).find( 'a' ).attr( 'target', '_blank' );
}

/* ----- Startup ----- */

function runAccessibilityGadget( $ ) { // eslint-disable-line no-unused-vars
	var $portlet, optionsActivators;

	if ( !supportedSkins.includes( mw.config.get( 'skin' ) ) ) { return; }

	mw.loader.load(
		'//fr.wikipedia.org/w/index.php?title=MediaWiki:Gadget-Accessibility.css&action=raw&ctype=text/css',
		'text/css'
	);

	selectApplicableMessages();

	$portlet = createPortlet(
		portletId,
		mw.msg( 'accessibility-portlet-title' )
	);
	addControlsToPortlet( $portlet );
	addDisclaimerToPortlet( $portlet );

	optionsActivators = [
		createTableOption(),
		createHeaderOption(),
		createListOption(),
		createQuoteOption(),
		createLangOption(),
		createAltOption()
	];

	createGlobalDisabler( optionsActivators );

	createNewWindowPortletLink( {
		id: 'acc_bp',
		page: mw.msg( 'accessibility-good-practice-page' ),
		title: mw.msg( 'accessibility-good-practice-title' ),
		label: mw.msg( 'accessibility-good-practice-label' )
	} );

	createNewWindowPortletLink( {
		id: 'acc_help',
		page: mw.msg( 'accessibility-help-page' ),
		title: mw.msg( 'accessibility-help-title' ),
		label: mw.msg( 'accessibility-help-label' )
	} );
}

if ( mw.config.get( 'wgNamespaceNumber' ) >= 0 ) {
	mw.loader.using( [ 'mediawiki.storage', 'oojs-ui-core' ], function () {
		$( runAccessibilityGadget );
	} );
}

} )();