Mirrors/CyberChef
2
0
Fork 0
mirror of https://github.com/gchq/CyberChef synced 2025-03-13 21:36:56 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add initial support for screenreaders in search

Browse source
This commit is contained in:
Matt C 2024-05-30 09:23:53 +01:00
parent 18159ce806
commit bdeec065bc
3 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/web/HTMLOperation.mjs
View file

@ -43,17 +43,23 @@ class HTMLOperation {
/**
* Renders the operation in HTML as a stub operation with no ingredients.
*
* @param {boolean} removeIcon - show icon for removing operation
* @param {string} elementId - element ID for aria usage
* @returns {string}
*/
toStubHtml(removeIcon) {
toStubHtml(removeIcon = false, elementId = null) {
let html = "<li class='operation'";
if (elementId) {
html += ` id='${elementId}'`;
}
if (this.description) {
const infoLink = this.infoURL ? `<hr>${titleFromWikiLink(this.infoURL)}` : "";
html += ` data-container='body' data-toggle='popover' data-placement='right'
data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover'
data-boundary='viewport'`;
data-boundary='viewport' role='button'`;
}
html += ">" + this.name;

2
src/web/html/index.html
View file

@ -173,7 +173,7 @@
Operations
<span class="op-count"></span>
</div>
<input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>">
<input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off" tabindex="2" data-help-title="Searching for operations" data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>" aria-owns="search-results">
<ul id="search-results" class="op-list"></ul>
<div id="categories" class="panel-group no-select"></div>
</div>

43
src/web/waiters/OperationsWaiter.mjs
View file

@ -28,17 +28,16 @@ class OperationsWaiter {
this.removeIntent = false;
}
/**
* Handler for search events.
* Finds operations which match the given search term and displays them under the search box.
*
* @param {event} e
* @param {KeyboardEvent | ClipboardEvent | Event} e
*/
searchOperations(e) {
let ops, selected;
if (e.type === "search" || e.keyCode === 13) { // Search or Return
if ((e.type === "search" && e.target.value !== "") || e.keyCode === 13) { // Search (non-empty) or Return
e.preventDefault();
ops = document.querySelectorAll("#search-results li");
if (ops.length) {
@ -49,27 +48,43 @@ class OperationsWaiter {
}
}
/**
* Sets up the operation element with the correct attributes when selected
* @param {HTMLElement} element
*/
const _selectOperation = (element) => {
element.classList.add("selected-op");
element.scrollIntoView({block: "nearest"});
$(element).popover("show");
e.target.setAttribute("aria-activedescendant", element.id);
};
/**
* Sets up the operation element with the correct attributes when deselected
* @param {HTMLElement} element
*/
const _deselectOperation = (element) => {
element.classList.remove("selected-op");
$(element).popover("hide");
};
if (e.keyCode === 40) { // Down
e.preventDefault();
ops = document.querySelectorAll("#search-results li");
if (ops.length) {
selected = this.getSelectedOp(ops);
if (selected > -1) {
ops[selected].classList.remove("selected-op");
}
if (selected > -1) _deselectOperation(ops[selected]);
if (selected === ops.length-1) selected = -1;
ops[selected+1].classList.add("selected-op");
_selectOperation(ops[selected+1]);
}
} else if (e.keyCode === 38) { // Up
e.preventDefault();
ops = document.querySelectorAll("#search-results li");
if (ops.length) {
selected = this.getSelectedOp(ops);
if (selected > -1) {
ops[selected].classList.remove("selected-op");
}
if (selected > -1) _deselectOperation(ops[selected]);
if (selected === 0) selected = ops.length;
ops[selected-1].classList.add("selected-op");
_selectOperation(ops[selected-1]);
}
} else {
const searchResultsEl = document.getElementById("search-results");
@ -83,11 +98,13 @@ class OperationsWaiter {
searchResultsEl.removeChild(searchResultsEl.firstChild);
}
document.querySelector("#search").removeAttribute("aria-activedescendant");
$("#categories .show").collapse("hide");
if (str) {
const matchedOps = this.filterOperations(str, true);
const matchedOpsHtml = matchedOps
.map(v => v.toStubHtml())
.map((operation, idx) => operation.toStubHtml(false, `search-result-${idx}`))
.join("");
searchResultsEl.innerHTML = matchedOpsHtml;
@ -103,7 +120,7 @@ class OperationsWaiter {
* @param {string} searchStr
* @param {boolean} highlight - Whether or not to highlight the matching string in the operation
* name and description
* @returns {string[]}
* @returns {HTMLOperation[]}
*/
filterOperations(inStr, highlight) {
const matchedOps = [];