updating a11y files to use let and const

accessibility/aria/aria-div-buttons.html

@@ -33,15 +33,15 @@ <h2>ARIA div buttons</h2>
     <div data-message="This is from the third button" tabindex="0" role="button">And me!</div>
 
     <script>
-      var buttons = document.querySelectorAll('div');
+      const buttons = document.querySelectorAll('div');
 
-      for(var i = 0; i < buttons.length; i++) {
+      for(let i = 0; i < buttons.length; i++) {
         addHandler(buttons[i]);
       }
 
       function addHandler(button) {
         button.onclick = function(e) {
-          var message = e.target.getAttribute('data-message');
+          let message = e.target.getAttribute('data-message');
           alert(message);
         }
       }

accessibility/aria/aria-live.html

@@ -40,16 +40,16 @@ <h1>Random quote</h1>
       </blockquote>
     </section>
     <script>
-    var quotePara = document.querySelector('section p');
+    const quotePara = document.querySelector('section p');
 
-    var quoteJson;
+    let quoteJson;
 
     getQuotes('quotes.json', populateJson);
 
-    var intervalID = window.setInterval(showQuote, 10000);
+    let intervalID = window.setInterval(showQuote, 10000);
 
     function getQuotes(url, callback) {
-      var request = new XMLHttpRequest();
+      let request = new XMLHttpRequest();
       request.open('GET', url);
       request.responseType = 'json';
       request.send();
@@ -66,7 +66,7 @@ <h1>Random quote</h1>
     }
 
     function showQuote() {
-      var random = Math.floor((Math.random()*25));
+      let random = Math.floor((Math.random()*25));
       quotePara.textContent = quoteJson[random].quote + ' -- ' + quoteJson[random].author;
     }
     </script>

accessibility/aria/aria-no-live.html

@@ -40,16 +40,16 @@ <h1>Random quote</h1>
       </blockquote>
     </section>
     <script>
-    var quotePara = document.querySelector('section p');
+    const quotePara = document.querySelector('section p');
 
-    var quoteJson;
+    let quoteJson;
 
     getQuotes('quotes.json', populateJson);
 
-    var intervalID = window.setInterval(showQuote, 10000);
+    let intervalID = window.setInterval(showQuote, 10000);
 
     function getQuotes(url, callback) {
-      var request = new XMLHttpRequest();
+      let request = new XMLHttpRequest();
       request.open('GET', url);
       request.responseType = 'json';
       request.send();

accessibility/aria/aria-tabbed-info-box.html

@@ -116,11 +116,11 @@ <h2>The third tab</h2>
 
 <script>
 
-var tabs = document.querySelectorAll('.info-box li');
-var panels = document.querySelectorAll('.info-box article');
+let tabs = document.querySelectorAll('.info-box li');
+let panels = document.querySelectorAll('.info-box article');
 
-for(i = 0; i < tabs.length; i++) {
-  var tab = tabs[i];
+for(let i = 0; i < tabs.length; i++) {
+  let tab = tabs[i];
   setTabHandler(tab, i);
 }
 
@@ -130,7 +130,7 @@ <h2>The third tab</h2>
   }
 
   let tabPos = Number(this.getAttribute('aria-posinset'))-1;
-  for(i = 0; i < tabs.length; i++) {
+  for(let i = 0; i < tabs.length; i++) {
     if(tabs[i].getAttribute('class')) {
       tabs[i].removeAttribute('class');
     }
@@ -141,7 +141,7 @@ <h2>The third tab</h2>
   this.setAttribute('class', 'active');
   this.setAttribute('aria-selected', 'true');
 
-  for(i = 0; i < panels.length; i++) {
+  for(let i = 0; i < panels.length; i++) {
     if(panels[i].getAttribute('class')) {
       panels[i].removeAttribute('class');
     }

accessibility/aria/validation-checkbox-disabled.js

@@ -1,20 +1,20 @@
-var inputs = document.querySelectorAll('input');
-var labels = document.querySelectorAll('label');
-var form = document.querySelector('form');
+const inputs = document.querySelectorAll('input');
+const labels = document.querySelectorAll('label');
+const form = document.querySelector('form');
 
-var formItems = [];
+let formItems = [];
 
-var errorField = document.querySelector('.errors');
-var errorList = document.querySelector('.errors ul');
+const errorField = document.querySelector('.errors');
+const errorList = document.querySelector('.errors ul');
 
-var checkbox;
-var checkboxLabel;
+let checkbox;
+let checkboxLabel;
 
-var hiddenAlert = document.querySelector('.hidden-alert');
+const hiddenAlert = document.querySelector('.hidden-alert');
 
-for(var i = 0; i < inputs.length-1; i++) {
+for(let i = 0; i < inputs.length-1; i++) {
   if(inputs[i].type !== 'checkbox') {
-    var obj = {};
+    let obj = {};
     obj.label = labels[i];
     obj.input = inputs[i];
     formItems.push(obj);
@@ -32,8 +32,8 @@ form.onsubmit = validate;
 
 function validate(e) {
   errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
+  for(let i = 0; i < formItems.length; i++) {
+    let testItem = formItems[i];
     if(testItem.input.value === '' && testItem.input.disabled === false) {
       errorField.style.left = '390px';
       createLink(testItem);
@@ -46,8 +46,8 @@ function validate(e) {
 }
 
 function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
+  const listItem = document.createElement('li');
+  const anchor = document.createElement('a');
   anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
   anchor.href = '#' + testItem.input.name;
   anchor.onclick = function() {
@@ -66,7 +66,7 @@ checkbox.onchange = function() {
 };
 
 function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length-1];
+  let instruItem = formItems[formItems.length-1];
   if(bool) {
     instruItem.input.disabled = false;
     instruItem.label.style.color = '#000';

accessibility/aria/validation.js

@@ -1,14 +1,14 @@
-var inputs = document.querySelectorAll('input');
-var labels = document.querySelectorAll('label');
-var form = document.querySelector('form');
+const inputs = document.querySelectorAll('input');
+const labels = document.querySelectorAll('label');
+const form = document.querySelector('form');
 
-var formItems = [];
+let formItems = [];
 
-var errorField = document.querySelector('.errors');
-var errorList = document.querySelector('.errors ul');
+const errorField = document.querySelector('.errors');
+const errorList = document.querySelector('.errors ul');
 
-for(var i = 0; i < inputs.length-1; i++) {
-  var obj = {};
+for(let i = 0; i < inputs.length-1; i++) {
+  let obj = {};
   obj.label = labels[i];
   obj.input = inputs[i];
   formItems.push(obj);
@@ -20,8 +20,8 @@ form.onsubmit = validate;
 
 function validate(e) {
   errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
+  for(let i = 0; i < formItems.length; i++) {
+    let testItem = formItems[i];
     if(testItem.input.value === '') {
       errorField.style.left = '360px';
       createLink(testItem);
@@ -34,8 +34,8 @@ function validate(e) {
 }
 
 function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
+  const listItem = document.createElement('li');
+  const anchor = document.createElement('a');
   anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
   anchor.href = '#' + testItem.input.name;
   anchor.onclick = function() {

accessibility/assessment-finished/main.js

@@ -1,12 +1,12 @@
 // functionality for showing/hiding the comments section
 
-var showHideBtn = document.querySelector('.show-hide');
-var commentWrapper = document.querySelector('.comment-wrapper');
+const showHideBtn = document.querySelector('.show-hide');
+const commentWrapper = document.querySelector('.comment-wrapper');
 
 commentWrapper.style.display = 'none';
 
 showHideBtn.onclick = function() {
-  var showHideText = showHideBtn.textContent;
+  let showHideText = showHideBtn.textContent;
   if(showHideText === 'Show comments') {
     showHideBtn.textContent = 'Hide comments';
     commentWrapper.style.display = 'block';
@@ -18,22 +18,22 @@ showHideBtn.onclick = function() {
 
 // functionality for adding a new comment via the comments form
 
-var form = document.querySelector('.comment-form');
-var nameField = document.querySelector('#name');
-var commentField = document.querySelector('#comment');
-var list = document.querySelector('.comment-container');
+const form = document.querySelector('.comment-form');
+const nameField = document.querySelector('#name');
+const commentField = document.querySelector('#comment');
+const list = document.querySelector('.comment-container');
 
 form.onsubmit = function(e) {
   e.preventDefault();
   submitComment();
 };
 
 function submitComment() {
-  var listItem = document.createElement('li');
-  var namePara = document.createElement('p');
-  var commentPara = document.createElement('p');
-  var nameValue = nameField.value;
-  var commentValue = commentField.value;
+  const listItem = document.createElement('li');
+  const namePara = document.createElement('p');
+  const commentPara = document.createElement('p');
+  const nameValue = nameField.value;
+  const commentValue = commentField.value;
 
   namePara.textContent = nameValue;
   commentPara.textContent = commentValue;