style(lib/commons): var -> let and const codemod (#4455)

Just like #4451 but for
`lib/commons`

Smaller part of the full vision:
#4444

lib/commons/color/element-is-distinct.js

@@ -25,17 +25,17 @@ function _getFonts(style) {
  * @return {Boolean}
  */
 function elementIsDistinct(node, ancestorNode) {
-  var nodeStyle = window.getComputedStyle(node);
+  const nodeStyle = window.getComputedStyle(node);
 
   // Check if the link has a background
   if (nodeStyle.getPropertyValue('background-image') !== 'none') {
     return true;
   }
 
   // Check if the link has a border or outline
-  var hasBorder = ['border-bottom', 'border-top', 'outline'].reduce(
+  const hasBorder = ['border-bottom', 'border-top', 'outline'].reduce(
     (result, edge) => {
-      var borderClr = new Color();
+      const borderClr = new Color();
       borderClr.parseString(nodeStyle.getPropertyValue(edge + '-color'));
 
       // Check if a border/outline was specified
@@ -54,13 +54,13 @@ function elementIsDistinct(node, ancestorNode) {
     return true;
   }
 
-  var parentStyle = window.getComputedStyle(ancestorNode);
+  const parentStyle = window.getComputedStyle(ancestorNode);
   // Compare fonts
   if (_getFonts(nodeStyle)[0] !== _getFonts(parentStyle)[0]) {
     return true;
   }
 
-  var hasStyle = [
+  let hasStyle = [
     'text-decoration-line',
     'text-decoration-style',
     'font-weight',
@@ -74,7 +74,7 @@ function elementIsDistinct(node, ancestorNode) {
     );
   }, false);
 
-  var tDec = nodeStyle.getPropertyValue('text-decoration');
+  const tDec = nodeStyle.getPropertyValue('text-decoration');
   if (tDec.split(' ').length < 3) {
     // old style CSS text decoration
     hasStyle =

lib/commons/color/flatten-shadow-colors.js

@@ -11,11 +11,11 @@ import Color from './color';
  * @return {Color} Blended color
  */
 export default function flattenShadowColors(fgColor, bgColor) {
-  var alpha = fgColor.alpha;
-  var r = (1 - alpha) * bgColor.red + alpha * fgColor.red;
-  var g = (1 - alpha) * bgColor.green + alpha * fgColor.green;
-  var b = (1 - alpha) * bgColor.blue + alpha * fgColor.blue;
-  var a = fgColor.alpha + bgColor.alpha * (1 - fgColor.alpha);
+  const alpha = fgColor.alpha;
+  const r = (1 - alpha) * bgColor.red + alpha * fgColor.red;
+  const g = (1 - alpha) * bgColor.green + alpha * fgColor.green;
+  const b = (1 - alpha) * bgColor.blue + alpha * fgColor.blue;
+  const a = fgColor.alpha + bgColor.alpha * (1 - fgColor.alpha);
 
   return new Color(r, g, b, a);
 }

lib/commons/color/get-background-stack.js

@@ -98,7 +98,7 @@ function shallowArraysEqual(a, b) {
     return false;
   }
 
-  for (var i = 0; i < a.length; ++i) {
+  for (let i = 0; i < a.length; ++i) {
     if (a[i] !== b[i]) {
       return false;
     }

lib/commons/color/get-contrast.js

@@ -18,8 +18,8 @@ function getContrast(bgColor, fgColor) {
     fgColor = flattenColors(fgColor, bgColor);
   }
 
-  var bL = bgColor.getRelativeLuminance();
-  var fL = fgColor.getRelativeLuminance();
+  const bL = bgColor.getRelativeLuminance();
+  const fL = fgColor.getRelativeLuminance();
 
   return (Math.max(fL, bL) + 0.05) / (Math.min(fL, bL) + 0.05);
 }

lib/commons/color/has-valid-contrast-ratio.js

@@ -14,11 +14,11 @@ import getContrast from './get-contrast';
  * @deprecated
  */
 function hasValidContrastRatio(bg, fg, fontSize, isBold) {
-  var contrast = getContrast(bg, fg);
-  var isSmallFont =
+  const contrast = getContrast(bg, fg);
+  const isSmallFont =
     (isBold && Math.ceil(fontSize * 72) / 96 < 14) ||
     (!isBold && Math.ceil(fontSize * 72) / 96 < 18);
-  var expectedContrastRatio = isSmallFont ? 4.5 : 3;
+  const expectedContrastRatio = isSmallFont ? 4.5 : 3;
 
   return {
     isValid: contrast > expectedContrastRatio,

lib/commons/dom/get-composed-parent.js

@@ -13,7 +13,7 @@ function getComposedParent(element) {
     // we'll skip this part for now.
     return getComposedParent(element.assignedSlot); // parent of a shadow DOM slot
   } else if (element.parentNode) {
-    var parentNode = element.parentNode;
+    const parentNode = element.parentNode;
     if (parentNode.nodeType === 1) {
       return parentNode; // Regular node
     } else if (parentNode.host) {

lib/commons/dom/get-element-coordinates.js

@@ -20,7 +20,7 @@ import getScrollOffset from './get-scroll-offset';
  * @property {Number} height The height of the element
  */
 function getElementCoordinates(element) {
-  var scrollOffset = getScrollOffset(document),
+  const scrollOffset = getScrollOffset(document),
     xOffset = scrollOffset.left,
     yOffset = scrollOffset.top,
     coords = element.getBoundingClientRect();

lib/commons/dom/get-scroll-offset.js

@@ -13,7 +13,7 @@ function getScrollOffset(element) {
 
   // 9 === Node.DOCUMENT_NODE
   if (element.nodeType === 9) {
-    var docElement = element.documentElement,
+    const docElement = element.documentElement,
       body = element.body;
 
     return {

lib/commons/dom/has-content-virtual.js

@@ -42,12 +42,12 @@ export function hasChildTextNodes(elm) {
 function hasContentVirtual(elm, noRecursion, ignoreAria) {
   return (
     // It has text
+    // or one of it's descendants does
     hasChildTextNodes(elm) ||
     // It is a graphical element
     isVisualContent(elm.actualNode) ||
     // It has an ARIA label
     (!ignoreAria && !!labelVirtual(elm)) ||
-    // or one of it's descendants does
     (!noRecursion &&
       elm.children.some(
         child => child.actualNode.nodeType === 1 && hasContentVirtual(child)

lib/commons/dom/is-focusable.js

@@ -23,7 +23,7 @@ export default function isFocusable(el) {
     return true;
   }
   // check if the tabindex is specified and a parseable number
-  var tabindex = vNode.attr('tabindex');
+  const tabindex = vNode.attr('tabindex');
   if (tabindex && !isNaN(parseInt(tabindex, 10))) {
     return true;
   }

lib/commons/dom/is-in-text-block.js

@@ -19,7 +19,7 @@ const blockLike = [
 ];
 
 function isBlock(elm) {
-  var display = window.getComputedStyle(elm).getPropertyValue('display');
+  const display = window.getComputedStyle(elm).getPropertyValue('display');
   return blockLike.includes(display) || display.substr(0, 6) === 'table-';
 }
 
@@ -72,7 +72,7 @@ function isInTextBlock(node, options) {
       return;
     }
 
-    var nodeName = (currNode.nodeName || '').toUpperCase();
+    const nodeName = (currNode.nodeName || '').toUpperCase();
     if (currNode === node) {
       inBrBlock = 1;
     }

lib/commons/dom/visually-overlaps.js

@@ -8,10 +8,10 @@
  * @return {boolean} True if rect is visually contained within parent
  */
 function visuallyOverlaps(rect, parent) {
-  var parentRect = parent.getBoundingClientRect();
-  var parentTop = parentRect.top;
-  var parentLeft = parentRect.left;
-  var parentScrollArea = {
+  const parentRect = parent.getBoundingClientRect();
+  const parentTop = parentRect.top;
+  const parentLeft = parentRect.left;
+  const parentScrollArea = {
     top: parentTop - parent.scrollTop,
     bottom: parentTop - parent.scrollTop + parent.scrollHeight,
     left: parentLeft - parent.scrollLeft,
@@ -29,7 +29,7 @@ function visuallyOverlaps(rect, parent) {
     return false;
   }
 
-  var style = window.getComputedStyle(parent);
+  const style = window.getComputedStyle(parent);
 
   if (rect.left > parentRect.right || rect.top > parentRect.bottom) {
     return (

lib/commons/index.js

@@ -17,7 +17,7 @@ import * as table from './table';
 import * as text from './text';
 import * as utils from '../core/utils';
 
-var commons = {
+const commons = {
   aria,
   color,
   dom,

lib/commons/table/get-all-cells.js

@@ -7,8 +7,8 @@
  * @return {Array<HTMLTableCellElement>}
  */
 function getAllCells(tableElm) {
-  var rowIndex, cellIndex, rowLength, cellLength;
-  var cells = [];
+  let rowIndex, cellIndex, rowLength, cellLength;
+  const cells = [];
   for (
     rowIndex = 0, rowLength = tableElm.rows.length;
     rowIndex < rowLength;

lib/commons/table/get-cell-position.js

@@ -11,7 +11,7 @@ import { memoize } from '../../core/utils';
  * @return {Object} Object with `x` and `y` properties of the coordinates
  */
 function getCellPosition(cell, tableGrid) {
-  var rowIndex, index;
+  let rowIndex, index;
   if (!tableGrid) {
     tableGrid = toGrid(findUp(cell, 'table'));
   }

lib/commons/table/is-data-table.js

@@ -14,7 +14,7 @@ import getViewportSize from '../dom/get-viewport-size';
  * @see http://asurkov.blogspot.co.uk/2011/10/data-vs-layout-table.html
  */
 function isDataTable(node) {
-  var role = (node.getAttribute('role') || '').toLowerCase();
+  const role = (node.getAttribute('role') || '').toLowerCase();
 
   // The element is not focusable and has role=presentation
   if ((role === 'presentation' || role === 'none') && !isFocusable(node)) {
@@ -55,7 +55,7 @@ function isDataTable(node) {
   }
   // colgroup / col - colgroup is magically generated
   for (
-    var childIndex = 0, childLength = node.children.length;
+    let childIndex = 0, childLength = node.children.length;
     childIndex < childLength;
     childIndex++
   ) {
@@ -64,14 +64,14 @@ function isDataTable(node) {
     }
   }
 
-  var cells = 0;
-  var rowLength = node.rows.length;
-  var row, cell;
-  var hasBorder = false;
-  for (var rowIndex = 0; rowIndex < rowLength; rowIndex++) {
+  let cells = 0;
+  const rowLength = node.rows.length;
+  let row, cell;
+  let hasBorder = false;
+  for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
     row = node.rows[rowIndex];
     for (
-      var cellIndex = 0, cellLength = row.cells.length;
+      let cellIndex = 0, cellLength = row.cells.length;
       cellIndex < cellLength;
       cellIndex++
     ) {
@@ -122,7 +122,7 @@ function isDataTable(node) {
   }
 
   // Table having only one row or column is layout table (column)
-  var sampleRow = node.rows[Math.ceil(rowLength / 2)];
+  const sampleRow = node.rows[Math.ceil(rowLength / 2)];
   if (sampleRow.cells.length === 1 && sampleRow.cells[0].colSpan === 1) {
     return false;
   }
@@ -138,8 +138,8 @@ function isDataTable(node) {
   }
 
   // Table having differently colored rows is data table
-  var bgColor, bgImage;
-  for (rowIndex = 0; rowIndex < rowLength; rowIndex++) {
+  let bgColor, bgImage;
+  for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
     row = node.rows[rowIndex];
     if (
       bgColor &&

lib/commons/table/to-grid.js

@@ -9,16 +9,16 @@ import { memoize } from '../../core/utils';
  * @return {Array<HTMLTableCellElement>} Array of HTMLTableCellElements
  */
 function toGrid(node) {
-  var table = [];
-  var rows = node.rows;
-  for (var i = 0, rowLength = rows.length; i < rowLength; i++) {
-    var cells = rows[i].cells;
+  const table = [];
+  const rows = node.rows;
+  for (let i = 0, rowLength = rows.length; i < rowLength; i++) {
+    const cells = rows[i].cells;
     table[i] = table[i] || [];
 
-    var columnIndex = 0;
+    let columnIndex = 0;
 
-    for (var j = 0, cellLength = cells.length; j < cellLength; j++) {
-      for (var colSpan = 0; colSpan < cells[j].colSpan; colSpan++) {
+    for (let j = 0, cellLength = cells.length; j < cellLength; j++) {
+      for (let colSpan = 0; colSpan < cells[j].colSpan; colSpan++) {
         // if [the rowSpan] value is set to 0, it extends until the
         // end of the table section
         // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-rowspan
@@ -30,7 +30,7 @@ function toGrid(node) {
             ? rows.length
             : cells[j].rowSpan;
 
-        for (var rowSpan = 0; rowSpan < rowspanValue; rowSpan++) {
+        for (let rowSpan = 0; rowSpan < rowspanValue; rowSpan++) {
           table[i + rowSpan] = table[i + rowSpan] || [];
           while (table[i + rowSpan][columnIndex]) {
             columnIndex++;

lib/commons/text/label-virtual.js

@@ -14,7 +14,7 @@ import { closest, escapeSelector } from '../../core/utils';
  * @return {Mixed} String of visible text, or `null` if no label is found
  */
 function labelVirtual(virtualNode) {
-  var ref, candidate, doc;
+  let ref, candidate, doc;
 
   candidate = ariaLabelVirtual(virtualNode);
   if (candidate) {