fix: use focus ring rather than background for status/notifications (#1030)

I don't like clicking on a status, clicking back, and suddenly it has a
different background. The focus ring is less distracting. Unfortunately
it doesn't look right on the article element itself, so we have to apply
the style to its parent, but that's not too hard.
This commit is contained in:
Nolan Lawson 2019-02-22 20:35:04 -08:00 committed by GitHub
parent 42e466f3c2
commit e16c312788
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 25 additions and 8 deletions

View file

@ -10,6 +10,9 @@
aria-label={ariaLabel} aria-label={ariaLabel}
focus-key={focusKey} focus-key={focusKey}
shortcut-key={shortcutScope} shortcut-key={shortcutScope}
on:focus="onFocus()"
on:blur="onBlur()"
ref:article
> >
<StatusHeader {notification} {notificationId} {status} {statusId} {timelineType} <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
{account} {accountId} {uuid} isStatusInNotification="true" /> {account} {accountId} {uuid} isStatusInNotification="true" />
@ -27,8 +30,7 @@
border-bottom: 1px solid var(--main-border); border-bottom: 1px solid var(--main-border);
} }
.notification-article:focus { .notification-article:focus {
background-color: var(--status-active-background); outline: none; /* focus is on the parent instead */
outline: none;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.notification-article { .notification-article {
@ -84,6 +86,13 @@
async mentionAuthor () { async mentionAuthor () {
let { account } = this.get() let { account } = this.get()
await composeNewStatusMentioning(account) await composeNewStatusMentioning(account)
},
// apply focus styles to parent rather than article because it shows up better
onFocus () {
this.refs.article.parentElement.classList.toggle('focus', true)
},
onBlur () {
this.refs.article.parentElement.classList.toggle('focus', false)
} }
} }
} }

View file

@ -6,7 +6,11 @@
aria-posinset={index} aria-posinset={index}
aria-setsize={length} aria-setsize={length}
aria-label={ariaLabel} aria-label={ariaLabel}
on:recalculateHeight> on:recalculateHeight
on:focus="onFocus()"
on:blur="onBlur()"
ref:article
>
{#if showHeader} {#if showHeader}
<StatusHeader {...params} /> <StatusHeader {...params} />
{/if} {/if}
@ -76,8 +80,7 @@
} }
.status-article:focus { .status-article:focus {
background-color: var(--status-active-background); outline: none; /* focus is on the parent instead */
outline: none;
} }
.status-article.status-in-own-thread { .status-article.status-in-own-thread {
@ -213,6 +216,13 @@
async mentionAuthor () { async mentionAuthor () {
let { accountForShortcut } = this.get() let { accountForShortcut } = this.get()
await composeNewStatusMentioning(accountForShortcut) await composeNewStatusMentioning(accountForShortcut)
},
// apply focus styles to parent rather than article because it shows up better
onFocus () {
this.refs.article.parentElement.classList.toggle('focus', true)
},
onBlur () {
this.refs.article.parentElement.classList.toggle('focus', false)
} }
}, },
computed: { computed: {

View file

@ -173,7 +173,7 @@ ul, li, p {
opacity: 0; opacity: 0;
} }
*:focus { *:focus, .focus {
outline: 2px solid var(--focus-outline); outline: 2px solid var(--focus-outline);
} }

View file

@ -82,7 +82,6 @@
--very-deemphasized-text-color: #{rgba(#666, 0.6)}; --very-deemphasized-text-color: #{rgba(#666, 0.6)};
--status-direct-background: #{darken($body-bg-color, 5%)}; --status-direct-background: #{darken($body-bg-color, 5%)};
--status-active-background: #{lighten($body-bg-color, 2%)};
--main-theme-color: #{$main-theme-color}; --main-theme-color: #{$main-theme-color};
--warning-color: #{#e01f19}; --warning-color: #{#e01f19};
--alt-input-bg: #{rgba($main-bg-color, 0.7)}; --alt-input-bg: #{rgba($main-bg-color, 0.7)};

View file

@ -16,7 +16,6 @@
--very-deemphasized-text-color: #{lighten($main-bg-color, 32%)}; --very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
--status-direct-background: #{darken($body-bg-color, 5%)}; --status-direct-background: #{darken($body-bg-color, 5%)};
--status-active-background: #{lighten($body-bg-color, 10%)};
--main-theme-color: #{$main-theme-color}; --main-theme-color: #{$main-theme-color};
--warning-color: #{#c7423d}; --warning-color: #{#c7423d};
--alt-input-bg: #{rgba($main-bg-color, 0.7)}; --alt-input-bg: #{rgba($main-bg-color, 0.7)};