Add aria-label to network canvas

Author: JeroenDeDauw

README.md

@@ -182,7 +182,6 @@ Array of [vis.js options](https://visjs.github.io/vis-network/docs/network/#opti
  | options=
 {
     "autoResize": true,
-    "width": "50%",
     "nodes": {
         "color": "lightblue",
         "shape": "box",
@@ -253,6 +252,12 @@ The JavaScript tests can only be run by going to the [`Special:JavaScriptTest` p
 
 ## Release notes
 
+### Version 1.3.0
+
+Released on September 8, 2020.
+
+* Added WAI compliance by adding an aria-label attribute to the network canvas
+
 ### Version 1.2.1
 
 Released on September 7, 2020.

extension.json

@@ -1,7 +1,7 @@
 {
 	"name": "Network",
 
-	"version": "1.2.0",
+	"version": "1.3.0",
 
 	"author": [
 		"[https://www.entropywins.wtf/mediawiki Jeroen De Dauw]",
@@ -62,7 +62,8 @@
 		"ext.network": {
 			"dependencies": [
 				"mediawiki.api.edit",
-				"mediawiki.Title"
+				"mediawiki.Title",
+				"mediawiki.jqueryMsg"
 			],
 			"scripts": [
 				"lib/vis-network.js",
@@ -77,6 +78,9 @@
 			"styles": [
 				"network.css"
 			],
+			"messages": [
+				"network-aria"
+			],
 			"targets": [ "desktop", "mobile" ]
 		}
 	},

i18n/en.json

@@ -6,5 +6,6 @@
 		]
 	},
 	"network-name": "Network",
-	"network-desc": "Allows adding interactive network visualizations in your wiki pages"
+	"network-desc": "Allows adding interactive network visualizations in your wiki pages",
+	"network-aria": "Network visualization showing the outgoing and incoming links for {{PLURAL:$1|page|pages}} $2"
 }

resources/js/index.js

@@ -2,9 +2,9 @@
 ( function ( mw, netw ) {
 	"use strict"
 
-	mw.hook( 'wikipage.content' ).add( function( $content ) {
-		$content.find( 'div.network-visualization' ).each( function() {
-			let $this = $( this );
+	mw.hook('wikipage.content').add(function($content) {
+		$content.find('div.network-visualization').each(function() {
+			let $this = $(this);
 
 			let network = new netw.Network(
 				$this.attr('id'),
@@ -17,7 +17,16 @@
 				$this.data('options')
 			);
 
-			network.showPages($this.data('pages'));
+			network.showPages($this.data('pages')).then(function() {
+				$this.find('canvas:first').attr(
+					'aria-label',
+					mw.message(
+						'network-aria',
+						$this.data('pages').length,
+						$this.data('pages').join(', ')
+					).parse()
+				);
+			});
 		} );
 	} );