From 96fc24209a359adcb61a001dc079016d83df8c7d Mon Sep 17 00:00:00 2001
From: Caesar Kabalan <caesar.kabalan@gmail.com>
Date: Mon, 14 Oct 2024 16:07:25 -0700
Subject: [PATCH] Add more accessibility features

---
 dist/index.html | 10 +++++-----
 dist/js/main.js |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 54becc8..e1fd252 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -114,7 +114,7 @@
                 <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 class="note"><label><input aria-labelledby="noteHeader" 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>
@@ -153,19 +153,19 @@
         </div>
     </div>
 
-    <div class="modal fade" id="importExportModal" tabindex="-1" aria-labelledby="importExportModalLabel" aria-hidden="true">
+    <div class="modal fade" id="importExportModal" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog modal-xl modal-dialog-centered">
-            <div class="modal-content">
+            <div class="modal-content" role="alertdialog" aria-labelledby="importExportModalLabel" aria-describedby="importExportModalDescription">
                 <div class="modal-header border-bottom-0 pb-1">
                     <h3 class="modal-title" id="importExportModalLabel">Import/Export</h3>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body pt-1">
-                    <div class="alert alert-primary show mt-3" role="alert">
+                    <div class="alert alert-primary show mt-3" id="importExportModalDescription">
                         Copy the content from the box below to EXPORT the current subnet configuration. Or, overwrite/paste a previously exported configuration into the box below and click IMPORT.
                     </div>
                     <div class="form-floating font-monospace">
-                        <textarea class="form-control pt-3" id="importExportArea" style="height: 510px"></textarea>
+                        <textarea class="form-control pt-3" id="importExportArea" style="height: 510px" aria-label="Import/Export Content"></textarea>
                         <label for="importExportArea"></label>
                     </div>
                 </div>
diff --git a/dist/js/main.js b/dist/js/main.js
index 36e28fc..b587241 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -284,7 +284,7 @@ function addRow(network, netSize, colspan, note, notesWidth, color, operatingMod
         '                <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 class="note" style="width:' + notesWidth + '"><label><input aria-labelledby="' + rowId + ' noteHeader" 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