Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

implemented aria attributes to faq section. moved anchors into buttons #31

Merged
merged 2 commits into from
Aug 2, 2024
Merged

implemented aria attributes to faq section. moved anchors into buttons #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c2c17c
implemented aria attributes to faq section. moved anchors into buttons
ispykenny Jul 26, 2024
a782299
resolved merge conflicts
ispykenny Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -886,6 +886,25 @@ p.badge {
}

.faq-question {
display: flex;
padding: 1rem 0;
cursor: pointer;
align-items: center;
width: fit-content;
text-decoration: none;
background: none;
text-align: left;
color: var(--color-text);
margin: 0;
font-size: var(--font-size-3);
border-radius: 0px;
}

.faq-question:focus {
outline: none;
border: none;
box-shadow: none;
color: var(--color-brand);
display: flex;
padding: 1rem 0;
cursor: pointer;
Expand Down
5 changes: 5 additions & 0 deletions src/assets/js/faq.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@ document.addEventListener('DOMContentLoaded', function() {
if (currentlyOpen && currentlyOpen !== answer) {
currentlyOpen.style.display = 'none';
currentlyOpen.classList.remove('active');
currentlyOpen.hidden = true;
// Reset the arrow of the previously active question
var activeQuestion = document.querySelector('.faq-question.active');
if (activeQuestion) {
activeQuestion.classList.remove('active');
activeQuestion.setAttribute('aria-expanded', 'false');
var activeArrow = activeQuestion.querySelector('.arrow');
activeArrow.style.transform = ''; // Reset rotation
}
Expand All @@ -29,11 +31,14 @@ document.addEventListener('DOMContentLoaded', function() {
answer.classList.remove('active');
this.classList.remove('active'); // Update question active state
arrow.style.transform = ''; // Reset rotation
answer.hidden = true;
} else {
answer.style.display = 'block';
answer.classList.add('active');
this.classList.add('active'); // Update question active state
this.setAttribute('aria-expanded', 'true');
arrow.style.transform = 'rotate(-180deg)'; // Rotate arrow
answer.hidden = false;
}
});
});
Expand Down
73 changes: 37 additions & 36 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,10 +194,11 @@ <h2>Frequently Asked Questions</h2>
</div>
<ul class="faq-list">
<li>
<h3><a href="#" class="faq-question">
<h3>
<button type="button" class="faq-question" aria-controls="faq1" aria-expanded="false">
<img class="arrow" src="assets/img/icon-chevron.png" alt="chevron arrow"> How
anonymous is Hush Line?</a></h3>
<div class="faq-answer">
anonymous is Hush Line?</button></h3>
<div class="faq-answer" id="faq1" hidden>
<p>Hush Line requires no personally identifying information (PII) for tip line owners to use
the service, including an email address.</p>
<p>We offer an Onion service for users with advanced privacy needs, which can be accessed
Expand All @@ -215,10 +216,10 @@ <h3><a href="#" class="faq-question">
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq2"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Is
Hush Line end-to-end encrypted?</a></h3>
<div class="faq-answer">
Hush Line end-to-end encrypted?</button></h3>
<div class="faq-answer" id="faq2" hidden>
<p>Hush Line uses <a href="https://github.com/openpgpjs/openpgpjs" target="_blank"
rel="noopener noreferrer">OpenPGP.js</a> for client-side encryption, giving users
who add their public PGP key end-to-end encryption for their messages. Users who disable
Expand All @@ -235,10 +236,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq3"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Is
two-way communication available?</a></h3>
<div class="faq-answer">
two-way communication available?</button></h3>
<div class="faq-answer" id="faq3" hidden>
<p>If the individual submitting a message feels comfortable enough to include a contact
method, they may choose to.</p>
<p>For anonymous, indirect two-way communication through Hush Line, someone submitting a
Expand All @@ -254,10 +255,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq4"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow">Can I
be deanonymized?</a></h3>
<div class="faq-answer">
be deanonymized?</button></h3>
<div class="faq-answer" id="faq4" hidden>
<p>Neither us scrubbing IPs nor you using Tor and Signal are silver bullets, and there are
many ways to deanonymize yourself. <a
href="https://github.com/scidsg/project-info/blob/main/hush-line/5.%20Research/2.%20Legal/apple-v-andrew-aude.pdf"
Expand Down Expand Up @@ -312,10 +313,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq5"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Why
not just use Signal?</a></h3>
<div class="faq-answer">
not just use Signal?</button></h3>
<div class="faq-answer" id="faq5" hidden>
<p>Signal is great, but it's not anonymous. For someone to send you a message, they must
first:</p>
<ol>
Expand All @@ -342,10 +343,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq6"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> How
is Hush Line different from SecureDrop?</a></h3>
<div class="faq-answer">
is Hush Line different from SecureDrop?</button></h3>
<div class="faq-answer" id="faq6">
<p>SecureDrop is a robust whistleblowing platform whose architecture is necessitated by very
specific use cases: A.) To safely manage files sent by anonymous people so that a device
or network isn't accidentally compromised, and B.) To provide a censorship-resistant and
Expand Down Expand Up @@ -391,30 +392,30 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq7"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Why
not fork SecureDrop's code?</a></h3>
<div class="faq-answer">
not fork SecureDrop's code?</button></h3>
<div class="faq-answer" id="faq7" hidden>
<p>While open-source, forking SecureDrop would require significant rework. Building a new
solution allows us to optimize Hush Line as an easy-to-use hosted service.</p>
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq8"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Why
Python?</a></h3>
<div class="faq-answer">
Python?</button></h3>
<div class="faq-answer" id="faq8" hidden>
<p>We use Python and the Flask framework because they're well-documented and supported. The
developer ecosystem is rich with extensions for everything from user authentication to
message encryption. Python is also one of the most used languages, making the project
accessible to a greater number of engineers.</p>
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq9"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Why
can't I receive files?</a></h3>
<div class="faq-answer">
can't I receive files?</button></h3>
<div class="faq-answer" id="faq9" hidden>
<p>Receiving files comes with significant risk, and the functionality is only sometimes
necessary. It can lead to compromising your device, network, and any other device
connected to it.</p>
Expand All @@ -438,10 +439,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq10"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> How
do I verify a recipient is legitimate?</a></h3>
<div class="faq-answer">
do I verify a recipient is legitimate?</button></h3>
<div class="faq-answer" id="faq10" hidden>
<p>Hush Line offers human-verified accounts for journalists, organizations, and public
figures so you can ensure you're communicating with the right recipient. Do you need to
<a href="https://github.com/scidsg/hushline/blob/main/docs/3-managed-service.md#verified-accounts"
Expand All @@ -452,10 +453,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq11"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Has
Hush Line received an independent security audit?</a></h3>
<div class="faq-answer">
Hush Line received an independent security audit?</button></h3>
<div class="faq-answer" id="faq11" hidden>
<p>Yes! In 2024, Hush Line's managed service, Personal Server, and self-hosted version
received a security audit from <a href="https://subgraph.com/" rel="noopener noreferrer"
target="_blank">Subgraph</a>, sponsored by <a href="https://www.opentech.fund/"
Expand All @@ -466,10 +467,10 @@ <h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-che
</div>
</li>
<li>
<h3><a href="#" class="faq-question"><img class="arrow" src="assets/img/icon-chevron.png"
<h3><button type="button" class="faq-question" aria-expanded="false" aria-controls="faq12"><img class="arrow" src="assets/img/icon-chevron.png"
alt="chevron arrow"> Where
can I submit a vulnerability report?</a></h3>
<div class="faq-answer">
can I submit a vulnerability report?</button></h3>
<div class="faq-answer" id="faq12" hidden>
<p>See something, say something! Submit a vulnerability report if you find a security issue,
and we'll address it immediately! <a
href="https://tips.hushline.app/submit_message/scidsg" target="_blank"
Expand Down