From 9332cecfc56d8f0fdcff60fef175d231e20438b7 Mon Sep 17 00:00:00 2001
From: Caesar Kabalan <caesar.kabalan@gmail.com>
Date: Sun, 13 Oct 2024 21:58:25 -0700
Subject: [PATCH] Improve Accessibility In Preparation For UI Testing

---
 dist/index.html | 23 +++++++++++------------
 dist/js/main.js | 19 ++++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index afeb584..92c1e7d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -95,29 +95,28 @@
 
 
 
-    <table id="calc" class="table table-bordered font-monospace">
+    <table id="calc" class="table table-bordered font-monospace" aria-label="Subnet Table">
         <thead>
             <tr>
                 <th id="subnetHeader" style="display: table-cell;">Subnet address</th>
-                <th id="netmaskHeader" style="display: none;">Netmask</th>
                 <th id="rangeHeader" style="display: table-cell;">Range of addresses</th>
                 <th id="useableHeader" style="display: table-cell;">Usable IPs</th>
                 <th id="hostsHeader" style="display: table-cell;">Hosts</th>
-                <th id="noteHeader" colspan="100%" style="display: table-cell;">
+                <th id="noteHeader" aria-label="Note" colspan="100%" style="display: table-cell;">
                     Note
-                    <div style="float:right;"><span class="split">Split</span>/<span class="join">Join</span></div>
+                    <div style="float:right;"><span id="splitHeader" aria-label="Split" class="split">Split</span>/<span id="joinHeader" aria-label="Join" class="join">Join</span></div>
                 </th>
             </tr>
         </thead>
         <tbody id="calcbody">
-            <tr id="row_10-0-0-0_17">
-                <td class="row_address">Loading...</td>
-                <td class="row_range"></td>
-                <td class="row_usable"></td>
-                <td class="row_hosts"></td>
-                <td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
-                <td rowspan="1" colspan="13" class="split rotate"><span></span></td>
-                <td rowspan="14" colspan="1" class="join rotate"><span></span></td>
+            <tr id="row_10-0-0-0_16" aria-label="10.0.0.0/16">
+                <td aria-labelledby="subnetHeader" class="row_address">Loading...</td>
+                <td aria-labelledby="rangeHeader" class="row_range"></td>
+                <td aria-labelledby="useableHeader" class="row_usable"></td>
+                <td aria-labelledby="hostsHeader" class="row_hosts"></td>
+                <td aria-labelledby="noteHeader" class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td>
+                <td aria-labelledby="splitHeader" rowspan="1" colspan="13" class="split rotate"><span></span></td>
+                <td aria-labelledby="joinHeader" rowspan="14" colspan="1" class="join rotate"><span></span></td>
             </tr>
         </tbody>
     </table>
diff --git a/dist/js/main.js b/dist/js/main.js
index 84d081c..36e28fc 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -276,15 +276,16 @@ function addRow(network, netSize, colspan, note, notesWidth, color, operatingMod
         rangeCol = int2ip(addressFirst);
         usableCol = int2ip(usableFirst);
     }
-
+    let rowId = 'row_' + network.replace('.', '-') + '_' + netSize
+    let rowCIDR = network + '/' + netSize
     let newRow =
-        '            <tr id="row_' + network.replace('.', '-') + '_' + netSize + '"' + styleTag + '>\n' +
-        '                <td data-subnet="' + network + '/' + netSize + '" class="row_address">' + network + '/' + netSize + '</td>\n' +
-        '                <td data-subnet="' + network + '/' + netSize + '" class="row_range">' + rangeCol + '</td>\n' +
-        '                <td data-subnet="' + network + '/' + netSize + '" class="row_usable">' + usableCol + '</td>\n' +
-        '                <td data-subnet="' + network + '/' + netSize + '" class="row_hosts">' + hostCount + '</td>\n' +
-        '                <td class="note" style="width:' + notesWidth + '"><label><input type="text" class="form-control shadow-none p-0" data-subnet="' + network + '/' + netSize + '" value="' + note + '"></label></td>\n' +
-        '                <td rowspan="1" colspan="' + colspan + '" class="split rotate" data-subnet="' + network + '/' + netSize + '" data-mutate-verb="split"><span>/' + netSize + '</span></td>\n'
+        '            <tr id="' + rowId + '"' + styleTag + '  aria-label="' + rowCIDR + '">\n' +
+        '                <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' subnetHeader" class="row_address">' + rowCIDR + '</td>\n' +
+        '                <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' rangeHeader" class="row_range">' + rangeCol + '</td>\n' +
+        '                <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' useableHeader" class="row_usable">' + usableCol + '</td>\n' +
+        '                <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' hostsHeader" class="row_hosts">' + hostCount + '</td>\n' +
+        '                <td aria-labelledby="' + rowId + ' noteHeader" class="note" style="width:' + notesWidth + '"><label><input type="text" class="form-control shadow-none p-0" data-subnet="' + rowCIDR + '" value="' + note + '"></label></td>\n' +
+        '                <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' splitHeader" rowspan="1" colspan="' + colspan + '" class="split rotate" data-mutate-verb="split"><span>/' + netSize + '</span></td>\n'
     if (netSize > maxNetSize) {
         // This is wrong. Need to figure out a way to get the number of children so you can set rowspan and the number
         // of ancestors so you can set colspan.
@@ -295,7 +296,7 @@ function addRow(network, netSize, colspan, note, notesWidth, color, operatingMod
         for (const i in matchingNetworkList) {
             let matchingNetwork = matchingNetworkList[i]
             let networkChildrenCount = count_network_children(matchingNetwork, subnetMap, [])
-            newRow += '                <td rowspan="' + networkChildrenCount + '" colspan="1" class="join rotate" data-subnet="' + matchingNetwork + '" data-mutate-verb="join"><span>/' + matchingNetwork.split('/')[1] + '</span></td>\n'
+            newRow += '                <td aria-label="' + matchingNetwork + ' Join" rowspan="' + networkChildrenCount + '" colspan="1" class="join rotate" data-subnet="' + matchingNetwork + '" data-mutate-verb="join"><span>/' + matchingNetwork.split('/')[1] + '</span></td>\n'
         }
     }
     newRow += '            </tr>';