style(lib/checks): var -> let and const codemod (#4451)

This is a piece of a larger creative time PR so it's easier to review,
the full scope can be seen here and includes eslint adjustments not seen
here #4444

---

Who else does this?
- Google (JS style guide)
https://google.github.io/styleguide/jsguide.html#features-local-variable-declarations
  - Airbnb (popular JS style guide) https://github.com/airbnb/javascript

Why do this?

Gaiety's explanation: "`let` works the way most devs think `var` works.
scope leaking and variable hoisting is a messy confusing idea, JS got
updated for a reason" also it's 2024, this isn't too controversial
anymore

-
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
- https://blog.javascripttoday.com/blog/var-vs-let-vs-const/ "The var
keyword was originally used for declaring variables in JavaScript. If
you’ve browsed an old codebase or an older JavaScript tutorial, you have
probably seen it."
-
https://medium.com/@rithinmenezes/understanding-let-var-and-const-in-javascript-a-guide-to-variable-declarations-f271c5b8dc79
- Airbnb's why https://airbnb.io/javascript/#variables

lib/checks/aria/aria-required-parent-evaluate.js

@@ -48,8 +48,8 @@ function getMissingContext(
 }
 
 function getAriaOwners(element) {
-  var owners = [],
-    o = null;
+  const owners = [];
+  let o = null;
 
   while (element) {
     if (element.getAttribute('id')) {

lib/checks/aria/valid-scrollable-semantics-evaluate.js

@@ -51,7 +51,7 @@ function validScrollableTagName(node) {
  *		 region.
  */
 function validScrollableRole(node, options) {
-  var role = getExplicitRole(node);
+  const role = getExplicitRole(node);
   if (!role) {
     return false;
   }

lib/checks/color/link-in-text-block-evaluate.js

@@ -6,8 +6,8 @@ import {
 } from '../../commons/color';
 
 function getContrast(color1, color2) {
-  var c1lum = color1.getRelativeLuminance();
-  var c2lum = color2.getRelativeLuminance();
+  const c1lum = color1.getRelativeLuminance();
+  const c2lum = color2.getRelativeLuminance();
   return (Math.max(c1lum, c2lum) + 0.05) / (Math.min(c1lum, c2lum) + 0.05);
 }
 
@@ -20,7 +20,7 @@ const blockLike = [
   'inline-block'
 ];
 function isBlock(elm) {
-  var display = window.getComputedStyle(elm).getPropertyValue('display');
+  const display = window.getComputedStyle(elm).getPropertyValue('display');
   return blockLike.indexOf(display) !== -1 || display.substr(0, 6) === 'table-';
 }
 
@@ -31,7 +31,7 @@ function linkInTextBlockEvaluate(node, options) {
     return false;
   }
 
-  var parentBlock = getComposedParent(node);
+  let parentBlock = getComposedParent(node);
   while (parentBlock && parentBlock.nodeType === 1 && !isBlock(parentBlock)) {
     parentBlock = getComposedParent(parentBlock);
   }
@@ -43,13 +43,13 @@ function linkInTextBlockEvaluate(node, options) {
   this.relatedNodes([parentBlock]);
 
   // Capture colors
-  var nodeColor = getForegroundColor(node);
-  var parentColor = getForegroundColor(parentBlock);
-  var nodeBackgroundColor = getBackgroundColor(node);
-  var parentBackgroundColor = getBackgroundColor(parentBlock);
+  const nodeColor = getForegroundColor(node);
+  const parentColor = getForegroundColor(parentBlock);
+  const nodeBackgroundColor = getBackgroundColor(node);
+  const parentBackgroundColor = getBackgroundColor(parentBlock);
 
   // Compute contrasts, giving preference to foreground color and doing as little work as possible
-  var textContrast =
+  let textContrast =
     nodeColor && parentColor ? getContrast(nodeColor, parentColor) : undefined;
   if (textContrast) {
     textContrast = Math.floor(textContrast * 100) / 100;
@@ -59,7 +59,7 @@ function linkInTextBlockEvaluate(node, options) {
     return true;
   }
 
-  var backgroundContrast =
+  let backgroundContrast =
     nodeBackgroundColor && parentBackgroundColor
       ? getContrast(nodeBackgroundColor, parentBackgroundColor)
       : undefined;
@@ -74,7 +74,7 @@ function linkInTextBlockEvaluate(node, options) {
 
   // Report incomplete instead of failure if we're not sure
   if (!backgroundContrast) {
-    var reason = incompleteData.get('bgColor') ?? 'bgContrast';
+    const reason = incompleteData.get('bgColor') ?? 'bgContrast';
     this.data({
       messageKey: reason
     });

lib/checks/color/link-in-text-block-style-evaluate.js

@@ -15,7 +15,7 @@ export default function linkInTextBlockStyleEvaluate(node) {
     return false;
   }
 
-  var parentBlock = getComposedParent(node);
+  let parentBlock = getComposedParent(node);
   while (parentBlock && parentBlock.nodeType === 1 && !isBlock(parentBlock)) {
     parentBlock = getComposedParent(parentBlock);
   }
@@ -37,7 +37,7 @@ export default function linkInTextBlockStyleEvaluate(node) {
 }
 
 function isBlock(elm) {
-  var display = window.getComputedStyle(elm).getPropertyValue('display');
+  const display = window.getComputedStyle(elm).getPropertyValue('display');
   return blockLike.indexOf(display) !== -1 || display.substr(0, 6) === 'table-';
 }
 

lib/checks/keyboard/accesskeys-after.js

@@ -1,11 +1,11 @@
 function accesskeysAfter(results) {
-  var seen = {};
+  const seen = {};
   return results
     .filter(r => {
       if (!r.data) {
         return false;
       }
-      var key = r.data.toUpperCase();
+      const key = r.data.toUpperCase();
       if (!seen[key]) {
         seen[key] = r;
         r.relatedNodes = [];

lib/checks/keyboard/landmark-is-top-level-evaluate.js

@@ -3,14 +3,14 @@ import { getAriaRolesByType } from '../../commons/standards';
 import { getComposedParent } from '../../commons/dom';
 
 function landmarkIsTopLevelEvaluate(node) {
-  var landmarks = getAriaRolesByType('landmark');
-  var parent = getComposedParent(node);
-  var nodeRole = getRole(node);
+  const landmarks = getAriaRolesByType('landmark');
+  let parent = getComposedParent(node);
+  const nodeRole = getRole(node);
 
   this.data({ role: nodeRole });
 
   while (parent) {
-    var role = parent.getAttribute('role');
+    let role = parent.getAttribute('role');
     if (!role && parent.nodeName.toUpperCase() !== 'FORM') {
       role = implicitRole(parent);
     }

lib/checks/label/help-same-as-label-evaluate.js

@@ -2,8 +2,8 @@ import { labelVirtual, accessibleText, sanitize } from '../../commons/text';
 import { idrefs } from '../../commons/dom';
 
 function helpSameAsLabelEvaluate(node, options, virtualNode) {
-  var labelText = labelVirtual(virtualNode),
-    check = node.getAttribute('title');
+  const labelText = labelVirtual(virtualNode);
+  let check = node.getAttribute('title');
 
   if (!labelText) {
     return false;
@@ -13,7 +13,7 @@ function helpSameAsLabelEvaluate(node, options, virtualNode) {
     check = '';
 
     if (node.getAttribute('aria-describedby')) {
-      var ref = idrefs(node, 'aria-describedby');
+      const ref = idrefs(node, 'aria-describedby');
       check = ref
         .map(thing => {
           return thing ? accessibleText(thing) : '';

lib/checks/landmarks/landmark-is-unique-after.js

@@ -1,17 +1,17 @@
 function landmarkIsUniqueAfter(results) {
-  var uniqueLandmarks = [];
+  const uniqueLandmarks = [];
 
   // filter out landmark elements that share the same role and accessible text
   // so every non-unique landmark isn't reported as a failure (just the first)
   return results.filter(currentResult => {
-    var findMatch = someResult => {
+    const findMatch = someResult => {
       return (
         currentResult.data.role === someResult.data.role &&
         currentResult.data.accessibleText === someResult.data.accessibleText
       );
     };
 
-    var matchedResult = uniqueLandmarks.find(findMatch);
+    const matchedResult = uniqueLandmarks.find(findMatch);
     if (matchedResult) {
       matchedResult.result = false;
       matchedResult.relatedNodes.push(currentResult.relatedNodes[0]);

lib/checks/landmarks/landmark-is-unique-evaluate.js

@@ -2,8 +2,8 @@ import { getRole } from '../../commons/aria';
 import { accessibleTextVirtual } from '../../commons/text';
 
 function landmarkIsUniqueEvaluate(node, options, virtualNode) {
-  var role = getRole(node);
-  var accessibleText = accessibleTextVirtual(virtualNode);
+  const role = getRole(node);
+  let accessibleText = accessibleTextVirtual(virtualNode);
   accessibleText = accessibleText ? accessibleText.toLowerCase() : null;
   this.data({ role: role, accessibleText: accessibleText });
   this.relatedNodes([node]);

lib/checks/lists/structured-dlitems-evaluate.js

@@ -7,7 +7,7 @@ function structuredDlitemsEvaluate(node, options, virtualNode) {
   let hasDt = false,
     hasDd = false,
     nodeName;
-  for (var i = 0; i < children.length; i++) {
+  for (let i = 0; i < children.length; i++) {
     nodeName = children[i].props.nodeName.toUpperCase();
     if (nodeName === 'DT') {
       hasDt = true;

lib/checks/navigation/unique-frame-title-after.js

@@ -1,5 +1,5 @@
 function uniqueFrameTitleAfter(results) {
-  var titles = {};
+  const titles = {};
   results.forEach(r => {
     titles[r.data] = titles[r.data] !== undefined ? ++titles[r.data] : 0;
   });

lib/checks/navigation/unique-frame-title-evaluate.js

@@ -1,7 +1,7 @@
 import { sanitize } from '../../commons/text';
 
 function uniqueFrameTitleEvaluate(node, options, vNode) {
-  var title = sanitize(vNode.attr('title')).toLowerCase();
+  const title = sanitize(vNode.attr('title')).toLowerCase();
   this.data(title);
   return true;
 }

lib/checks/parsing/duplicate-id-after.js

@@ -1,5 +1,5 @@
 function duplicateIdAfter(results) {
-  var uniqueIds = [];
+  const uniqueIds = [];
   return results.filter(r => {
     if (uniqueIds.indexOf(r.data) === -1) {
       uniqueIds.push(r.data);

lib/checks/shared/doc-has-title-evaluate.js

@@ -1,7 +1,7 @@
 import { sanitize } from '../../commons/text';
 
 function docHasTitleEvaluate() {
-  var title = document.title;
+  const title = document.title;
   return !!sanitize(title);
 }
 

lib/checks/tables/caption-faked-evaluate.js

@@ -1,8 +1,8 @@
 import { toGrid } from '../../commons/table';
 
 function captionFakedEvaluate(node) {
-  var table = toGrid(node);
-  var firstRow = table[0];
+  const table = toGrid(node);
+  const firstRow = table[0];
 
   if (table.length <= 1 || firstRow.length <= 1 || node.rows.length <= 1) {
     return true;

lib/checks/tables/same-caption-summary-evaluate.js

@@ -7,9 +7,9 @@ function sameCaptionSummaryEvaluate(node, options, virtualNode) {
     return undefined;
   }
 
-  var summary = virtualNode.attr('summary');
-  var captionNode = virtualNode.children.find(isCaptionNode);
-  var caption = captionNode ? sanitize(subtreeText(captionNode)) : false;
+  const summary = virtualNode.attr('summary');
+  const captionNode = virtualNode.children.find(isCaptionNode);
+  const caption = captionNode ? sanitize(subtreeText(captionNode)) : false;
 
   if (!caption || !summary) {
     return false;

lib/checks/tables/scope-value-evaluate.js

@@ -1,5 +1,5 @@
 function scopeValueEvaluate(node, options) {
-  var value = node.getAttribute('scope').toLowerCase();
+  const value = node.getAttribute('scope').toLowerCase();
 
   return options.values.indexOf(value) !== -1;
 }