-
Notifications
You must be signed in to change notification settings - Fork 687
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
Comments
It is also the case for " Yes, Delete Source Account". |
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. |
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. |
Adds explicit ARIA-LABEL attributes to elements whose strings are in all caps to support idiomatic translation (cf. #5821, #6003). thread: #6041 (comment)
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)
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)
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 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
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
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
The text was updated successfully, but these errors were encountered: