From 6dd4a5c421b46e478033c7828bf2351acf177fa1 Mon Sep 17 00:00:00 2001 From: Cory Francis Myers Date: Tue, 27 Jul 2021 11:25:38 -0700 Subject: [PATCH] addresses review feedback addresses review feedback Corrects 876bfa2's removal of these decorative IMGs without replacing their semantic content. thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r673875533 squash/fixup: 876bfa23fa540b0fcd1b72a669851929591cdffd addresses review feedback Adds explicit title-case ARIA-LABEL attributes to elements whose strings are in all caps to support idiomatic translation (cf. #5821, #6003). thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r673878829 addresses review feedback Refactors MAIN.index-row rather than wrapping the whole DIV.grid in MAIN. thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r673896426 squash/fixup: 80547cdc12721a91605e76331277d0db80d5e1ab removes stray ARIA-LABELS (per review feedback) thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r673900985 addresses review feedback LABEL[for="codename"] was marked HIDDEN to prevent redundant narration in screen readers. Refactoring the LABEL to an H2 that ARIA-labels the containing section streamlines the narration and makes for a more-logical outline. thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r674255604 squash/fixup: ae56f49245c1b83cc284fc37204a3557495487d1 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 adds "button" role to non-navigating links (per review feedback) thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r674289745 undoes autoformatting squash/fixup: 1f6964061a1e434077ef7509189713aa18a70c20 fixes tests for refactored DETAILS#codename-hint squash/fixup: c8baf3d1491d6e7952ab98e4e62dc2f6d58dc862 fixes unclosed ARIA-LABEL attribute (per review feedback) thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r683734312 squash/fixup: d6116a2740109d8728ff5c38b0fe30bb9b72bb86 refactors TIME as H3 of reply ARTICLE (per review feedback) Each reply now consists of an ARTICLE automatically labeled by its H3 TIME. These implicit ARIA semantics are more fluent than those marked explicitly in 1f696406. thread: https://github.com/freedomofpress/securedrop/pull/6041#discussion_r683735790 squash/fixup: 1f6964061a1e434077ef7509189713aa18a70c20 refactors OUTPUTs as MARKs or Ps (per review feedback) Some "browser / screen reader pairings may not announce or make available the accessible name of the output, even though its a labelable element"[1], apparently including Orca (i.e., on Tails). These elements give the next-best semantics without implying a live region. [1]: https://www.scottohara.me/blog/2019/07/10/the-output-element.html thread: https://github.com/freedomofpress/securedrop/pull/6041#pullrequestreview-723661645 squash/fixup: 1f6964061a1e434077ef7509189713aa18a70c20 squash/fixup: f37fc17e19e83400dccfc612e88d065f1ad1a9a7 squash/fixup: ae56f49245c1b83cc284fc37204a3557495487d1 --- securedrop/sass/source.sass | 50 +++++++++---------- securedrop/source_app/forms.py | 34 +++++-------- securedrop/source_templates/base.html | 2 +- .../first_submission_flashed_message.html | 2 +- securedrop/source_templates/flashed.html | 2 +- securedrop/source_templates/generate.html | 8 +-- securedrop/source_templates/index.html | 14 +++--- securedrop/source_templates/login.html | 4 +- securedrop/source_templates/logout.html | 2 +- securedrop/source_templates/lookup.html | 43 ++++++---------- .../functional/source_navigation_steps.py | 24 +++++---- securedrop/tests/functional/test_source.py | 20 ++++---- securedrop/tests/test_source.py | 4 +- 13 files changed, 93 insertions(+), 116 deletions(-) diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass index d3a0ee331c..c2c4b25b5f 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% @@ -72,6 +68,7 @@ input.codename-box font-weight: bold .codename + background-color: transparent font-family: monospace letter-spacing: 0.15em font-weight: normal @@ -160,6 +157,7 @@ p#codename font-size: 10px font-weight: bold padding: 5px + margin: 0 a.delete float: right @@ -217,7 +215,7 @@ p#codename margin: 0 2% padding: 5px 15px - output#no-replies + #no-replies display: block font-weight: bold text-align: center diff --git a/securedrop/source_app/forms.py b/securedrop/source_app/forms.py index 6fb47b6329..90701dc035 100644 --- a/securedrop/source_app/forms.py +++ b/securedrop/source_app/forms.py @@ -11,31 +11,21 @@ class LoginForm(FlaskForm): - codename = PasswordField( - "codename", - validators=[ - InputRequired(message=gettext("This field is required.")), - Length( - 1, - PassphraseGenerator.MAX_PASSPHRASE_LENGTH, - message=gettext( - "Field must be between 1 and " - "{max_codename_len} characters long.".format( - max_codename_len=PassphraseGenerator.MAX_PASSPHRASE_LENGTH - ) - ), - ), - # Make sure to allow dashes since some words in the wordlist have them - Regexp(r"[\sA-Za-z0-9-]+$", message=gettext("Invalid input.")), - ], - ) + codename = PasswordField('codename', validators=[ + InputRequired(message=gettext('This field is required.')), + Length(1, PassphraseGenerator.MAX_PASSPHRASE_LENGTH, + message=gettext( + 'Field must be between 1 and ' + '{max_codename_len} characters long.'.format( + max_codename_len=PassphraseGenerator.MAX_PASSPHRASE_LENGTH))), + # Make sure to allow dashes since some words in the wordlist have them + Regexp(r'[\sA-Za-z0-9-]+$', message=gettext('Invalid input.')) + ]) class SubmissionForm(FlaskForm): - msg = TextAreaField("msg", - render_kw={"aria-label": gettext("Write a message."), - "placeholder": gettext("Write a message."), - }) + msg = TextAreaField("msg", render_kw={"placeholder": gettext("Write a message."), + "aria-label": gettext("Write a message.")}) fh = FileField("fh", render_kw={"aria-label": gettext("Select a file to upload.")}) def validate_msg(self, field: wtforms.Field) -> None: diff --git a/securedrop/source_templates/base.html b/securedrop/source_templates/base.html index f309e4514d..bfb75f8115 100644 --- a/securedrop/source_templates/base.html +++ b/securedrop/source_templates/base.html @@ -37,7 +37,7 @@

{{ gettext("We're sorry, our SecureDrop is currently offline.") }}

{% if 'logged_in' in session %} {% endif %} 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 @@

{{ gettext('Success!') }}

{{ gettext('Thank you for sending this information to us. Please check back later for replies.') }} - + {{ gettext('Forgot your codename?') }}

diff --git a/securedrop/source_templates/flashed.html b/securedrop/source_templates/flashed.html index deeabfe20b..2ff82ac231 100644 --- a/securedrop/source_templates/flashed.html +++ b/securedrop/source_templates/flashed.html @@ -4,7 +4,7 @@