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

Add More Accessibility Labels

Browse source
This commit is contained in:
Caesar Kabalan 2024-10-14 10:25:30 -07:00
parent 9332cecfc5
commit 7f378b7582
No known key found for this signature in database
GPG key ID: DDFEF5FF6CFAB608
1 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
dist/index.html vendored
View file

@ -19,12 +19,12 @@
<body> <body>
<div class="container-xxl mt-3"> <div class="container-xxl mt-3">
<div class="float-end" id="navigation"> <div class="float-end" id="navigation">
<a href="#" id="info_icon" data-bs-toggle="modal" data-bs-target="#aboutModal"> <a href="#" id="info_icon" data-bs-toggle="modal" data-bs-target="#aboutModal" aria-label="About">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg> </svg>
</a><a href="https://github.com/ckabalan/visualsubnetcalc" target="_blank"> </a><a href="https://github.com/ckabalan/visualsubnetcalc" target="_blank" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg> </svg>
@ -98,11 +98,11 @@
<table id="calc" class="table table-bordered font-monospace" aria-label="Subnet Table"> <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 aria-label="Subnet Address" id="subnetHeader" style="display: table-cell;">Subnet Address</th>
<th id="rangeHeader" style="display: table-cell;">Range of addresses</th> <th aria-label="Range of Addresses" id="rangeHeader" style="display: table-cell;">Range of Addresses</th>
<th id="useableHeader" style="display: table-cell;">Usable IPs</th> <th aria-label="Usable IPs" id="useableHeader" style="display: table-cell;">Usable IPs</th>
<th id="hostsHeader" style="display: table-cell;">Hosts</th> <th aria-label="Hosts" id="hostsHeader" style="display: table-cell;">Hosts</th>
<th id="noteHeader" aria-label="Note" colspan="100%" style="display: table-cell;"> <th aria-label="Note" id="noteHeader" colspan="100%" style="display: table-cell;">
Note Note
<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> <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>
@ -121,32 +121,32 @@
</tbody> </tbody>
</table> </table>
<div id="bottom_nav"> <div id="bottom_nav">
<div class="d-inline-block align-top pt-1" id="colors_word_open"><span>Change Colors &#187;</span></div> <div class="d-inline-block align-top pt-1" id="colors_word_open" aria-label="Change Colors"><span>Change Colors &#187;</span></div>
<div class="d-inline-block d-none" id="color_palette"> <div class="d-inline-block d-none" id="color_palette" aria-label="Color Palette">
<div id="palette_picker_1"></div> <div role="button" aria-label="Color 1" id="palette_picker_1"></div>
<div id="palette_picker_2"></div> <div role="button" aria-label="Color 2" id="palette_picker_2"></div>
<div id="palette_picker_3"></div> <div role="button" aria-label="Color 3" id="palette_picker_3"></div>
<div id="palette_picker_4"></div> <div role="button" aria-label="Color 4" id="palette_picker_4"></div>
<div id="palette_picker_5"></div> <div role="button" aria-label="Color 5" id="palette_picker_5"></div>
<div id="palette_picker_6"></div> <div role="button" aria-label="Color 6" id="palette_picker_6"></div>
<div id="palette_picker_7"></div> <div role="button" aria-label="Color 7" id="palette_picker_7"></div>
<div id="palette_picker_8"></div> <div role="button" aria-label="Color 8" id="palette_picker_8"></div>
<div id="palette_picker_9"></div> <div role="button" aria-label="Color 9" id="palette_picker_9"></div>
<div id="palette_picker_10"></div> <div role="button" aria-label="Color 10" id="palette_picker_10"></div>
</div> </div>
<div class="d-inline-block align-top align-top pt-1 ps-2 d-none" id="colors_word_close"><span>&#171; Stop Changing Colors</span></div> <div class="d-inline-block align-top align-top pt-1 ps-2 d-none" id="colors_word_close" aria-label="Stop Changing Colors"><span>&#171; Stop Changing Colors</span></div>
<div class="d-inline-block align-top pt-1 ps-3" id="copy_url"><span>Copy Shareable URL</span></div> <div class="d-inline-block align-top pt-1 ps-3" id="copy_url"><span>Copy Shareable URL</span></div>
</div> </div>
<div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true"> <div class="modal fade" id="notifyModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-md"> <div class="modal-dialog modal-md">
<div class="modal-content alert-warning"> <div class="modal-content alert-warning" role="alertdialog" aria-labelledby="notifyModalLabel" aria-describedby="notifyModalDescription">
<div class="modal-header border-bottom-0 pb-1"> <div class="modal-header border-bottom-0 pb-1">
<h3 class="modal-title" id="notifyModalLabel">Warning!</h3> <h3 class="modal-title" id="notifyModalLabel">Warning!</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body pt-1"> <div class="modal-body pt-1" id="notifyModalDescription">
Notification Text Here Notification Text Here
</div> </div>
</div> </div>