From c8baf3d1491d6e7952ab98e4e62dc2f6d58dc862 Mon Sep 17 00:00:00 2001
From: Cory Francis Myers <cory@freedom.press>
Date: Tue, 27 Jul 2021 16:56:44 -0700
Subject: [PATCH] refactors SECTION#codename-hint as DETAILS (per review
 feedback)

::{before,after} pseudo-elements must be used to style the
expand/collapse links ("Show"/"Hide", respectively) because under DIR="ltr"
the ::marker pseudo-element will be displayed to the left of the
SUMMARY.

thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r674263579
squash/fixup: 1f6964061a1e434077ef7509189713aa18a70c20
---
 securedrop/sass/source.sass                   | 46 +++++++++----------
 .../first_submission_flashed_message.html     |  2 +-
 securedrop/source_templates/lookup.html       | 19 ++------
 3 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass
index d3a0ee331c..2feb951b64 100644
--- a/securedrop/sass/source.sass
+++ b/securedrop/sass/source.sass
@@ -34,37 +34,33 @@
   text-align: center
   width: 80%
 
-@media only screen and (max-width: 880px)
+@media only screen
   #codename-hint
-    width: 100%
+    summary
+      cursor: pointer
 
-#codename-hint-visible
-  .visible-codename
-    margin: auto
-    padding: auto
-    height: auto
-    overflow: visible
+      &:after
+        content: "Show"
+        display: block
+        float: right
 
-  .hidden-codename
-    margin: 0
-    padding: 0
-    height: 0
-    overflow: hidden
+        text-decoration: none
+        color: $color_securedrop_blue
+        border-bottom: 1px solid rgba(0, 117, 247, 0.4)
 
-  &:target
+      &:hover, &:active
+        &:after
+          color: $color_grimace_blue
+          border-bottom: 1px solid rgba(42, 49, 157, 1)
 
-    .visible-codename
-      margin: 0
-      padding: 0
-      height: 0
-      overflow: hidden
-      border: 0
+    &[open]
+      summary
+        &:after
+          content: "Hide"
 
-    .hidden-codename
-      margin: auto
-      padding: auto
-      height: auto
-      overflow: visible
+@media only screen and (max-width: 880px)
+  #codename-hint
+    width: 100%
 
 input.codename-box
   width: 100%
diff --git a/securedrop/source_templates/first_submission_flashed_message.html b/securedrop/source_templates/first_submission_flashed_message.html
index 53926883cd..629e47db72 100644
--- a/securedrop/source_templates/first_submission_flashed_message.html
+++ b/securedrop/source_templates/first_submission_flashed_message.html
@@ -1,7 +1,7 @@
 <section class="message">
   <h2>{{ gettext('Success!') }}</h2>
   <p>{{ gettext('Thank you for sending this information to us. Please check back later for replies.') }}
-    <a href="#codename-hint-visible">
+    <a href="#codename-hint">
     {{ gettext('Forgot your codename?') }}
     </a>
   </p>
diff --git a/securedrop/source_templates/lookup.html b/securedrop/source_templates/lookup.html
index da3d3931b0..af68bbec8c 100644
--- a/securedrop/source_templates/lookup.html
+++ b/securedrop/source_templates/lookup.html
@@ -2,21 +2,10 @@
 
 {% block body %}
 {% if new_user %}
-<section class="code-reminder pull-left" id="codename-hint" aria-label="{{ gettext('Codename') }}">
-  <div id="codename-hint-visible">
-    <label id="codename-label" for="codename" aria-hidden="true">{{ gettext('Remember, your codename is:') }}</label>
-    {# ARIA-HIDDEN violates axe rule aria-hidden-focus, because we (a) want to
-    hide the superfluous "show"/"hide" links from screen-readers, (b) do not
-    want to remove these elements from sequential navigation with TABINDEX="-1",
-    and (c) do not have recourse in the Source Interface to scripting the
-    ARIA-HIDDEN value dynamically.  Cf. #6031. #}
-    <a id="codename-hint-show" class="show pull-right visible-codename" href="#codename-hint-visible" aria-hidden="true" tabindex="-1">{{ gettext('Show') }}</a>
-    <div id="codename-hint-content" class="hidden-codename codename">
-      <a id="codename-hint-hide" class="pull-right" href="#codename-hint" aria-hidden="true">{{ gettext('Hide') }}</a>
-      <output id="codename" aria-labelledby="codename-label">{{ codename }}</output>
-    </div>
-  </div>
-</section>
+<details class="code-reminder pull-left" id="codename-hint">
+    <summary>{{ gettext('Remember, your codename is:') }}</summary>
+    <output class="codename">{{ codename }}</output>
+</details>
 {% endif %}
 
 <div class="center">