mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 14:56:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

added full functionality to support-model with arrows tab and enter/space.

Browse source
This commit is contained in:
j264415 2024-03-06 17:03:23 +00:00
parent b2cc35dcd0
commit 6cc0d05e78
3 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -573,22 +573,22 @@
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab"> <a id="tab-1" class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
FAQs FAQs
</a> </a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab"> <a id="tab-2" class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
Report a bug Report a bug
</a> </a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab"> <a id="tab-3" class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
About About
</a> </a>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<a class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab"> <a id="tab-4" class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
Keybindings Keybindings
</a> </a>
</li> </li>

5
src/web/stylesheets/layout/_modals.css
View file

@ -78,6 +78,11 @@
border-left: 2px solid var(--primary-border-colour); border-left: 2px solid var(--primary-border-colour);
} }
p a:focus{
color: #0a6ebd;
text-decoration: underline;
}
.checkbox label input[type=checkbox]+.checkbox-decorator .check, .checkbox label input[type=checkbox]+.checkbox-decorator .check,
.checkbox label input[type=checkbox]+.checkbox-decorator .check::before { .checkbox label input[type=checkbox]+.checkbox-decorator .check::before {
border-color: var(--input-border-colour); border-color: var(--input-border-colour);

38
src/web/waiters/ControlsWaiter.mjs
View file

@ -355,13 +355,14 @@ class ControlsWaiter {
const faqsAElement = faqs.getElementsByTagName("a"); const faqsAElement = faqs.getElementsByTagName("a");
for (let i = 0; i < faqsAElement.length; i++) { for (let i = 0; i < faqsAElement.length; i++) {
faqsAElement[i].setAttribute("tabindex", "0"); faqsAElement[i].setAttribute("tabindex", "0");
faqsAElement[i].addEventListener("keydown", this.navigateFAQList, false);
} }
const tabs = document.querySelectorAll('[role="tab"]'); const tabs = document.querySelectorAll('[role="tab"]');
for (let i = 0; i < tabs.length; i++) { for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("keydown", this.changeTabs, false); tabs[i].addEventListener("keydown", this.changeTabs, false);
tabs[i].addEventListener("keydown", this.navigateTabsList, false); // tabs[i].addEventListener("keydown", this.navigateFAQList, false);
} }
const reportBugInfo = document.getElementById("report-bug-info"); const reportBugInfo = document.getElementById("report-bug-info");
@ -403,26 +404,35 @@ ${navigator.userAgent}
} else { } else {
prevTab.previousElementSibling.firstElementChild.focus(); prevTab.previousElementSibling.firstElementChild.focus();
} }
} else if (ev.key === "Tab" && !ev.shiftKey) { } else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-1")) {
tab.parentElement.parentElement.nextElementSibling.firstElementChild.querySelector("[class='btn btn-primary']").focus(); document.getElementById("faqs").querySelector("[class='btn btn-primary']").focus();
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-2")) {
document.getElementById("report-bug").querySelector("[class='btn btn-primary']").focus();
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-3")) {
document.getElementById("about").querySelector("[href]").focus();
} else if (ev.key === "Tab" && !ev.shiftKey && ev.target === document.getElementById("tab-4")) {
const button = document.getElementById("support-modal").getElementsByClassName("modal-footer");
const close = button[0].firstElementChild;
close.focus();
} else if (ev.key === "Enter" || ev.key === "Space" ||ev.key === " ") {
tab.click();
} }
} }
/** /**
* @param {Event} ev * @param {Event} ev
*/ */
navigateTabsList(ev) { navigateFAQList(ev) {
const el = ev.target.nextElementSibling;
if (ev.key === "Enter" || ev.key === "Space"|| ev.key === " "){
ev.preventDefault(); ev.preventDefault();
if (ev.key === "Enter" || ev.key === "Space" ||ev.key === " ") { const question = el.classList;
const el = ev.target; if(question !== undefined && question.value){
const targetElement = el.parentElement.parentElement; if (!question.value.includes("show")) {
ev.preventDefault(); question.add("show");
for (let i = 0; i < targetElement.children.length; i++) { } else if (question.contains("show")) {
const targetChild = targetElement.children[i]; question.remove("show");
if (targetChild.children !== undefined && targetChild.children.classList.querySelectorAll("nav-link")) {
if (!targetChild.contains("active")) {
targetChild.add("active");
}
} }
} }
} }