225 lines
7.7 KiB
HTML
225 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
Copyright © 2021 sloum <sloum AT THE HOST rawtext.club>
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this
|
|
software and associated documentation files (the “Software”), to deal in the Software
|
|
without restriction, including without limitation the rights to use, copy, modify,
|
|
merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
|
|
permit persons to whom the Software is furnished to do so, subject to the following
|
|
conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all copies
|
|
or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
|
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
|
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
|
|
OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
|
OTHER DEALINGS IN THE SOFTWARE.
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>a11y attribute helper</title>
|
|
<style>
|
|
.row-element {
|
|
width: 45%;
|
|
max-width: 500px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.row-element.left {
|
|
margin-right: 1%;
|
|
}
|
|
|
|
textarea {
|
|
display: block;
|
|
width: 90%;
|
|
font-family: monospace;
|
|
height: 20ch;
|
|
}
|
|
|
|
table, ol {
|
|
width: 90%;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
th {
|
|
background-color: skyblue;
|
|
color: black;
|
|
}
|
|
|
|
th[scope=row] {
|
|
text-align: left;
|
|
}
|
|
|
|
td {
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.row-element {
|
|
display: block;
|
|
width: 90%;
|
|
}
|
|
|
|
.row-element.left {
|
|
margin: initial;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 3rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>a11y attribute helper</h1>
|
|
<div class="row-element left">
|
|
<h2>Instructions</h2>
|
|
<ol>
|
|
<li>Input your html into the <i>HTML Input</i> text box and press <i>Parse Input</i></li>
|
|
<li>A new form will appear below the <i>HTML Input</i> form. This form will list the attributes that were found in the html input and will provide three radio buttons per attribute: ellipse, initial, and unset. <i>ellipse</i> will convert the attribute's value to: "...". <i>initial</i> will leave the attribute's value as is. <i>unset</i> will remove to the attribute from any element it is found on</li>
|
|
<li>Once you have made your selections for how to process the html, click <i>Get output</i>. The filtering form will disappear</li>
|
|
<li>The output will be rendered in the text box labeled <i>HTML Output</i></li>
|
|
</ol>
|
|
</div>
|
|
<div class="row-element">
|
|
<div class="container">
|
|
<form id="input">
|
|
<label for="inputfield">HTML Input</label>
|
|
<textarea id="inputfield"></textarea>
|
|
<input type="submit" id="inputsubmit" value="Parse Input" />
|
|
</form>
|
|
</div>
|
|
<div class="container" id="form2container"></div>
|
|
<div class="container">
|
|
<label for="output">HTML Output
|
|
<textarea id="output"></textarea>
|
|
<button id="copy">Copy output to clipboard</button>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<hr>
|
|
<p>This accessibility helper was designed by and is © 2021 <a href="https://sloum.colorfield.space" target="_blank">sloum</a>.</p>
|
|
<p>It is available under the terms of the <a href="https://mit-license.org/" target="_blank">MIT License</a>, a copy of which appears in the source code for your convenience. In short: use it, share it, change it, don't hold the creator responsible if it causes you some kind of problem.</p>
|
|
</footer>
|
|
<script>
|
|
var init = (function() {
|
|
var nodes;
|
|
var inputField = document.getElementById('inputfield');
|
|
var inputForm = document.getElementById('input');
|
|
var copyButton = document.getElementById('copy');
|
|
var outputField = document.getElementById('output');
|
|
var form2container = document.getElementById('form2container');
|
|
var atts = {}
|
|
|
|
var copyOutput = function() {
|
|
outputField.focus();
|
|
outputField.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
} catch(err) {
|
|
console.warn("Unable to copy text: " + err);
|
|
}
|
|
}
|
|
|
|
var processInput = function(e) {
|
|
e.preventDefault();
|
|
var text = inputField.value;
|
|
if (!text) return;
|
|
|
|
var parser = new DOMParser();
|
|
nodes = parser.parseFromString(text, "text/html").body;
|
|
buildForm2();
|
|
};
|
|
|
|
var buildForm2 = function() {
|
|
atts = {}; // Reset the attribute information before building it
|
|
var all = nodes.querySelectorAll('*');
|
|
all.forEach((item) => {
|
|
for (att in item.attributes) {
|
|
if (item.attributes[att].specified) {
|
|
if (!atts[item.attributes[att].name]) {
|
|
atts[item.attributes[att].name] = [];
|
|
}
|
|
atts[item.attributes[att].name].push(item)
|
|
}
|
|
}
|
|
});
|
|
var form2 = document.createElement('form');
|
|
form2.id = "form2";
|
|
var inner = '<table><thead><tr><td></td><th scope="col">Ellipses</th><th scope="col">Initial</th><th scope="col">Unset</th></thead><tbody>';
|
|
var template = '<tr id="tr-$$"><th scope="row">$$</th><td><input type="radio" name="radio-$$" value="e" !!></td><td><input type="radio" name="radio-$$" value="i" ^^></td><td><input type="radio" name="radio-$$" value="u"></td></tr>';
|
|
for (key in atts) {
|
|
var a = template;
|
|
a = a.replaceAll('$$', key);
|
|
if (key == "role" || key == "alt" || key.indexOf("aria") == 0 ) {
|
|
a = a.replaceAll('!!', '');
|
|
a = a.replaceAll('^^', 'checked');
|
|
} else {
|
|
a = a.replaceAll('!!', 'checked');
|
|
a = a.replaceAll('^^', '');
|
|
}
|
|
inner += a
|
|
}
|
|
inner += '</tbody></table><input type="submit" value="Get Output">';
|
|
form2.innerHTML = inner;
|
|
form2container.innerHTML = "";
|
|
form2container.appendChild(form2);
|
|
form2.addEventListener('submit', filterAttributes);
|
|
}
|
|
|
|
var filterAttributes = function(e) {
|
|
e.preventDefault();
|
|
for (att in atts) {
|
|
var selector = "radio-" + att;
|
|
var value = document.querySelector('input[name="' + selector + '"]:checked').value;
|
|
switch (value) {
|
|
case 'e':
|
|
atts[att].forEach(function(elem) {
|
|
elem.setAttribute(att, "...");
|
|
});
|
|
break;
|
|
case 'i':
|
|
continue;
|
|
case 'u':
|
|
atts[att].forEach(function(elem) {
|
|
elem.removeAttribute(att);
|
|
});
|
|
break;
|
|
default:
|
|
continue;
|
|
}
|
|
}
|
|
outputField.value = nodes.innerHTML;
|
|
form2container.innerHTML = "";
|
|
}
|
|
|
|
var addClickHandlers = function() {
|
|
inputForm.addEventListener('submit', processInput);
|
|
copy.addEventListener('click', copyOutput);
|
|
}
|
|
|
|
return {run: addClickHandlers};
|
|
})()
|
|
init.run();
|
|
</script>
|
|
</body>
|
|
</html>
|