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: #6041 (comment) squash/fixup: 1f69640
freedomofpress · Jul 28, 2021 · c8baf3d · c8baf3d
1 parent f9c8184
commit c8baf3d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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">