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.

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

Consider using sentence case instead of title case in UI elements #5821

Open
rmol opened this issue Feb 25, 2021 · 3 comments
Open

Consider using sentence case instead of title case in UI elements #5821

rmol opened this issue Feb 25, 2021 · 3 comments
Assignees

Comments

@rmol
Copy link
Contributor

rmol commented Feb 25, 2021

Description

It was pointed out (thanks @ekcnl) during translation for 1.8.0 that the button label Yes, Delete Selected Source Accounts looks odd.

We use a mix of ALL CAPS and Title Case for button labels. Title case looks all right for Shorter Labels, but Can Start Looking Eccentric When Longer.

The Material Design guidelines, to which we've referred in some recent design discussions, suggest either all caps or sentence case. We may not want to pick one or the other exclusively: we sometimes use mixed case for safe options like Cancel and all caps for irrevocable actions like DELETE. Or perhaps we should indicate danger with other cues, as long labels would also look odd and heavy in all caps. But in any event, sentence case generally works better than title case, and I think we should consider switching.

@ninavizz @zenmonkeykstop

@AO-LocLab
Copy link
Contributor

It is also the case for " Yes, Delete Source Account".

@eloquence eloquence self-assigned this Feb 25, 2021
@eloquence
Copy link
Member

I'm not in favor of making this change for 1.8.0. All buttons in the source list of the Journalist Interface ("Select All", "Select None", "Files and Messages" in the deletion flow, etc.) currently use title case. We should not selectively change it here, but rather agree on style guidelines, and then consistently apply them. We should reserve that discussion for 1.9.0 or later, IMO.

@ninavizz
Copy link
Member

We use a mix of ALL CAPS and Title Case for button labels. Title case looks all right for Shorter Labels, but Can Start Looking Eccentric When Longer.

You make me giggle in the best of ways sometimes, John. :)

I totally agree with everyone on this thread. It's emerged over quite a period, that an absence of clear Style Guidelines has contributed to ongoing friction that would be really nice to alleviate by taking the time to commit to making some.

Likewise, all the web UIs are horribly inconsistent; which I am as guilty of, as anyone, for wanting to implement best practices on spots where code is being modified—while leaving it well enough alone, elsewhere. I like the idea of doing a styleguide across a few sprints, then implementing its rules, in another sprint.

@eloquence eloquence added this to the 1.9.0 milestone Mar 5, 2021
@zenmonkeykstop zenmonkeykstop modified the milestones: 2.0.0, 2.1.0 Jun 8, 2021
cfm added a commit that referenced this issue Jul 27, 2021
Adds explicit ARIA-LABEL attributes to elements whose strings are in
all caps to support idiomatic translation (cf. #5821, #6003).

thread: #6041 (comment)
cfm added a commit that referenced this issue Jul 27, 2021
Adds explicit title-case ARIA-LABEL attributes to elements whose strings
are in all caps to support idiomatic translation (cf. #5821, #6003).

thread: #6041 (comment)
cfm added a commit that referenced this issue Jul 27, 2021
Adds explicit title-case ARIA-LABEL attributes to elements whose strings
are in all caps to support idiomatic translation (cf. #5821, #6003).

thread: #6041 (comment)
cfm added a commit that referenced this issue Jul 27, 2021
Adds explicit title-case ARIA-LABEL attributes to elements whose strings
are in all caps to support idiomatic translation (cf. #5821, #6003).

thread: #6041 (comment)
cfm added a commit that referenced this issue Aug 9, 2021
addresses review feedback

Corrects 876bfa2's removal of these decorative IMGs without replacing
their semantic content.

thread: #6041 (comment)
squash/fixup: 876bfa2

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: #6041 (comment)

addresses review feedback

Refactors MAIN.index-row rather than wrapping the whole DIV.grid in
MAIN.

thread: #6041 (comment)
squash/fixup: 80547cd

removes stray ARIA-LABELS (per review feedback)

thread: #6041 (comment)

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: #6041 (comment)
squash/fixup: ae56f49

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

adds "button" role to non-navigating links (per review feedback)

thread: #6041 (comment)

undoes autoformatting

squash/fixup: 1f69640

fixes tests for refactored DETAILS#codename-hint

squash/fixup: c8baf3d

fixes unclosed ARIA-LABEL attribute (per review feedback)

thread: #6041 (comment)
squash/fixup: d6116a2

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 1f69640.

thread: #6041 (comment)
squash/fixup: 1f69640

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: #6041 (review)
squash/fixup: 1f69640
squash/fixup: f37fc17
squash/fixup: ae56f49
cfm added a commit that referenced this issue Aug 16, 2021
addresses review feedback

Corrects 876bfa2's removal of these decorative IMGs without replacing
their semantic content.

thread: #6041 (comment)
squash/fixup: 876bfa2

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: #6041 (comment)

addresses review feedback

Refactors MAIN.index-row rather than wrapping the whole DIV.grid in
MAIN.

thread: #6041 (comment)
squash/fixup: 80547cd

removes stray ARIA-LABELS (per review feedback)

thread: #6041 (comment)

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: #6041 (comment)
squash/fixup: ae56f49

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

adds "button" role to non-navigating links (per review feedback)

thread: #6041 (comment)

undoes autoformatting

squash/fixup: 1f69640

fixes tests for refactored DETAILS#codename-hint

squash/fixup: c8baf3d

fixes unclosed ARIA-LABEL attribute (per review feedback)

thread: #6041 (comment)
squash/fixup: d6116a2

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 1f69640.

thread: #6041 (comment)
squash/fixup: 1f69640

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: #6041 (review)
squash/fixup: 1f69640
squash/fixup: f37fc17
squash/fixup: ae56f49
@zenmonkeykstop zenmonkeykstop removed this from the 2.1.0 milestone Sep 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants