beenull/visualsubnetcalc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve Accessibility In Preparation For UI Testing

Browse source
This commit is contained in:
Caesar Kabalan 2024-10-13 21:58:25 -07:00
parent 054a07f84f
commit 9332cecfc5
No known key found for this signature in database
GPG key ID: DDFEF5FF6CFAB608
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
dist/index.html vendored
View file

@ -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> <thead>
<tr> <tr>
<th id="subnetHeader" style="display: table-cell;">Subnet address</th> <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="rangeHeader" style="display: table-cell;">Range of addresses</th>
<th id="useableHeader" style="display: table-cell;">Usable IPs</th> <th id="useableHeader" style="display: table-cell;">Usable IPs</th>
<th id="hostsHeader" style="display: table-cell;">Hosts</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 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> </th>
</tr> </tr>
</thead> </thead>
<tbody id="calcbody"> <tbody id="calcbody">
<tr id="row_10-0-0-0_17"> <tr id="row_10-0-0-0_16" aria-label="10.0.0.0/16">
<td class="row_address">Loading...</td> <td aria-labelledby="subnetHeader" class="row_address">Loading...</td>
<td class="row_range"></td> <td aria-labelledby="rangeHeader" class="row_range"></td>
<td class="row_usable"></td> <td aria-labelledby="useableHeader" class="row_usable"></td>
<td class="row_hosts"></td> <td aria-labelledby="hostsHeader" class="row_hosts"></td>
<td class="note"><label><input type="text" class="form-control shadow-none p-0"></label></td> <td aria-labelledby="noteHeader" 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 aria-labelledby="splitHeader" rowspan="1" colspan="13" class="split rotate"><span></span></td>
<td rowspan="14" colspan="1" class="join rotate"><span></span></td> <td aria-labelledby="joinHeader" rowspan="14" colspan="1" class="join rotate"><span></span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

19
dist/js/main.js vendored
View file

@ -276,15 +276,16 @@ function addRow(network, netSize, colspan, note, notesWidth, color, operatingMod
rangeCol = int2ip(addressFirst); rangeCol = int2ip(addressFirst);
usableCol = int2ip(usableFirst); usableCol = int2ip(usableFirst);
} }
let rowId = 'row_' + network.replace('.', '-') + '_' + netSize
let rowCIDR = network + '/' + netSize
let newRow = let newRow =
' <tr id="row_' + network.replace('.', '-') + '_' + netSize + '"' + styleTag + '>\n' + ' <tr id="' + rowId + '"' + styleTag + ' aria-label="' + rowCIDR + '">\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_address">' + network + '/' + netSize + '</td>\n' + ' <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' subnetHeader" class="row_address">' + rowCIDR + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_range">' + rangeCol + '</td>\n' + ' <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' rangeHeader" class="row_range">' + rangeCol + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_usable">' + usableCol + '</td>\n' + ' <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' useableHeader" class="row_usable">' + usableCol + '</td>\n' +
' <td data-subnet="' + network + '/' + netSize + '" class="row_hosts">' + hostCount + '</td>\n' + ' <td data-subnet="' + rowCIDR + '" aria-labelledby="' + rowId + ' hostsHeader" 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 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 rowspan="1" colspan="' + colspan + '" class="split rotate" data-subnet="' + network + '/' + netSize + '" data-mutate-verb="split"><span>/' + netSize + '</span></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) { 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 // 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. // 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) { for (const i in matchingNetworkList) {
let matchingNetwork = matchingNetworkList[i] let matchingNetwork = matchingNetworkList[i]
let networkChildrenCount = count_network_children(matchingNetwork, subnetMap, []) 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>'; newRow += ' </tr>';