fix(a11y): solve some issues (#1240)

- Tabindex on the network is 0 now. - All pages now declare their language. - Manipulation buttons are buttons now. - Manipulation buttons are tabbable now. - Manipulation buttons can be triggered by the keyboard (enter, space). - Manipulation close button has aria label.
visjs · Dec 18, 2020 · 979488e · 979488e
1 parent 699da56
commit 979488e
Show file tree

Hide file tree

Showing 99 changed files with 192 additions and 155 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ of the project.
 
 ```html
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Network</title>
     <script

diff --git a/cypress/pages/events-target.html b/cypress/pages/events-target.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Cypress | Events Target</title>
 

diff --git a/cypress/pages/pollution.html b/cypress/pages/pollution.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Cypress | Pollution</title>
 

diff --git a/cypress/pages/universal.html b/cypress/pages/universal.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Cypress | Universal</title>
 

diff --git a/docs-kr/index.html b/docs-kr/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="refresh" content="0;url=network/" />

diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="refresh" content="0;url=network/" />

diff --git a/examples/network/basicUsage.html b/examples/network/basicUsage.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Basic usage</title>
 

diff --git a/examples/network/basic_usage/esnext.html b/examples/network/basic_usage/esnext.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Network | Basic Usage | ESNext Build</title>

diff --git a/examples/network/basic_usage/legacy.html b/examples/network/basic_usage/legacy.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Network | Basic Usage | Legacy Build</title>

diff --git a/examples/network/basic_usage/peer.html b/examples/network/basic_usage/peer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Network | Basic Usage | Peer Build</title>

diff --git a/examples/network/basic_usage/standalone.html b/examples/network/basic_usage/standalone.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Network | Basic Usage | Standalone Build</title>

diff --git a/examples/network/data/datasets.html b/examples/network/data/datasets.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | Dynamic Data</title>
 

diff --git a/examples/network/data/dotLanguage/dotEdgeStyles.html b/examples/network/data/dotLanguage/dotEdgeStyles.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | DOT edge styles</title>
 

diff --git a/examples/network/data/dotLanguage/dotLanguage.html b/examples/network/data/dotLanguage/dotLanguage.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | DOT Language</title>
 

diff --git a/examples/network/data/dotLanguage/dotPlayground.html b/examples/network/data/dotLanguage/dotPlayground.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | DOT language playground</title>
 

diff --git a/examples/network/data/dynamicData.html b/examples/network/data/dynamicData.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | DataSet</title>
 

diff --git a/examples/network/data/dynamicFiltering.html b/examples/network/data/dynamicFiltering.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | Dynamic filtering</title>
 

diff --git a/examples/network/data/importingFromGephi.html b/examples/network/data/importingFromGephi.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
-<html>
+<html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF8" />
     <title>Vis Network | Data | Importing from Gephi (JSON)</title>

diff --git a/examples/network/data/scalingCustom.html b/examples/network/data/scalingCustom.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | Custom Scaling</title>
 

diff --git a/examples/network/data/scalingNodesEdges.html b/examples/network/data/scalingNodesEdges.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | Scaling Nodes and Edges</title>
 

diff --git a/examples/network/data/scalingNodesEdgesLabels.html b/examples/network/data/scalingNodesEdgesLabels.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Data | Scaling Labels</title>
 

diff --git a/examples/network/edgeStyles/arrowAlignment.html b/examples/network/edgeStyles/arrowAlignment.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Arrow Alignment</title>
 

diff --git a/examples/network/edgeStyles/arrowTypes.html b/examples/network/edgeStyles/arrowTypes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Arrow Types</title>
 

diff --git a/examples/network/edgeStyles/arrows.html b/examples/network/edgeStyles/arrows.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Arrows</title>
 

diff --git a/examples/network/edgeStyles/background.html b/examples/network/edgeStyles/background.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Edge background</title>
 

diff --git a/examples/network/edgeStyles/colors.html b/examples/network/edgeStyles/colors.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Colors</title>
 

diff --git a/examples/network/edgeStyles/dashes.html b/examples/network/edgeStyles/dashes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Dashes</title>
 

diff --git a/examples/network/edgeStyles/endPointOffsets.html b/examples/network/edgeStyles/endPointOffsets.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Endpoint Offsets</title>
 

diff --git a/examples/network/edgeStyles/imageArrowHeads.html b/examples/network/edgeStyles/imageArrowHeads.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Vis Network | Edge Styles | Image Arrow Heads</title>

diff --git a/examples/network/edgeStyles/selfReference.html b/examples/network/edgeStyles/selfReference.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Self Reference</title>
 

diff --git a/examples/network/edgeStyles/smooth.html b/examples/network/edgeStyles/smooth.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Edge Styles | Static smooth curves</title>
 

diff --git a/examples/network/edgeStyles/smoothWorldCup.html b/examples/network/edgeStyles/smoothWorldCup.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
-<html>
+<html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF8" />
     <title>

diff --git a/examples/network/events/interactionEvents.html b/examples/network/events/interactionEvents.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Events | Interaction events</title>
 

diff --git a/examples/network/events/physicsEvents.html b/examples/network/events/physicsEvents.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Events | Physics Events</title>
 

diff --git a/examples/network/events/renderEvents.html b/examples/network/events/renderEvents.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Events | Rendering Events</title>
 

diff --git a/examples/network/exampleApplications/disassemblerExample.html b/examples/network/exampleApplications/disassemblerExample.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Example Applications | Disassembler</title>
     <style type="text/css">

diff --git a/examples/network/exampleApplications/lesMiserables.html b/examples/network/exampleApplications/lesMiserables.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Example Applications | Les miserables</title>
 

diff --git a/examples/network/exampleApplications/loadingBar.html b/examples/network/exampleApplications/loadingBar.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Example Applications | Loading Bar</title>
 

diff --git a/examples/network/exampleApplications/neighbourhoodHighlight.html b/examples/network/exampleApplications/neighbourhoodHighlight.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
-<html>
+<html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF8" />
     <title>

diff --git a/examples/network/exampleApplications/nodeLegend.html b/examples/network/exampleApplications/nodeLegend.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
-<html>
+<html lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
     <title>Vis Network | Example Applications | Node Legend</title>

diff --git a/examples/network/exampleApplications/worldCupPerformance.html b/examples/network/exampleApplications/worldCupPerformance.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
-<html>
+<html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF8" />
     <title>Vis Network | Example Applications | World Cup Network</title>

diff --git a/examples/network/imageSelected/imageSelected.html b/examples/network/imageSelected/imageSelected.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>Vis Network | Node Styles | Selected/Unselected Image</title>
 

diff --git a/examples/network/labels/labelAlignment.html b/examples/network/labels/labelAlignment.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Label Alignment</title>
 

diff --git a/examples/network/labels/labelBackground.html b/examples/network/labels/labelBackground.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Label Background</title>
 

diff --git a/examples/network/labels/labelColorAndSize.html b/examples/network/labels/labelColorAndSize.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Label Color and Size</title>
 

diff --git a/examples/network/labels/labelMargins.html b/examples/network/labels/labelMargins.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Label Margins</title>
 

diff --git a/examples/network/labels/labelMultifont.html b/examples/network/labels/labelMultifont.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Multifont Labels</title>
 

diff --git a/examples/network/labels/labelStroke.html b/examples/network/labels/labelStroke.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Label stroke</title>
 

diff --git a/examples/network/labels/multilineText.html b/examples/network/labels/multilineText.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Labels | Multiline text</title>
 

diff --git a/examples/network/layout/hierarchicalLayout.html b/examples/network/layout/hierarchicalLayout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Layouts | Hierarchical Layout</title>
 

diff --git a/examples/network/layout/hierarchicalLayoutBigUserDefined.html b/examples/network/layout/hierarchicalLayoutBigUserDefined.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>
       Vis Network | Layouts | User Defined Hierarchical Layout (Big)

diff --git a/examples/network/layout/hierarchicalLayoutDynamicChanges.html b/examples/network/layout/hierarchicalLayoutDynamicChanges.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Layouts | Dynamic Hierarchical Layout Changes</title>
 

diff --git a/examples/network/layout/hierarchicalLayoutMethods.html b/examples/network/layout/hierarchicalLayoutMethods.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Layouts | Hierarchical Layout Methods</title>
 

diff --git a/examples/network/layout/hierarchicalLayoutOverlapAvoidance.html b/examples/network/layout/hierarchicalLayoutOverlapAvoidance.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Vis Network | Layouts | Hierarchical Layout Overlap Avoidance</title>
 

diff --git a/examples/network/layout/hierarchicalLayoutUserdefined.html b/examples/network/layout/hierarchicalLayoutUserdefined.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>
       Vis Network | Layouts | User Defined Hierarchical Layout (Configurable)

diff --git a/examples/network/layout/hierarchicalLayoutWithoutPhysics.html b/examples/network/layout/hierarchicalLayoutWithoutPhysics.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Vis Network | Layouts | Hierarchical Layout without Physics</title>