fix: improve focus styles (#1526)

* fix: improve focus styles

* fixup
This commit is contained in:
Nolan Lawson 2019-09-24 00:50:35 -07:00 committed by GitHub
parent fbed5b8ac8
commit 1bbe2a5612
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 28 additions and 14 deletions

View file

@ -1,4 +1,4 @@
<a class='main-nav-link {selected ? "selected" : ""}' <a class='main-nav-link focus-fix {selected ? "selected" : ""}'
aria-label={ariaLabel} aria-label={ariaLabel}
aria-current={selected} aria-current={selected}
on:click="onClick(event)" on:click="onClick(event)"
@ -22,7 +22,6 @@
align-items: center; align-items: center;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
outline-offset: calc(-1 * var(--focus-width)); /* TODO: this is hacky, switch to box-sizing:border-box */
} }
.nav-icon-and-label { .nav-icon-and-label {

View file

@ -3,6 +3,7 @@
{#each tabs as tab (tab.name)} {#each tabs as tab (tab.name)}
<li class="{currentTabName === tab.name ? 'current' : 'not-current'}"> <li class="{currentTabName === tab.name ? 'current' : 'not-current'}">
<a aria-label="{tab.label} { currentTabName === tab.name ? '(Current)' : ''}" <a aria-label="{tab.label} { currentTabName === tab.name ? '(Current)' : ''}"
class="focus-fix"
href={tab.href} href={tab.href}
rel="prefetch"> rel="prefetch">
{tab.label} {tab.label}

View file

@ -2,7 +2,7 @@
{#each items as item (item.key)} {#each items as item (item.key)}
<li class="generic-dialog-list-item"> <li class="generic-dialog-list-item">
<button <button
class="generic-dialog-list-button focus-after" class="generic-dialog-list-button focus-fix"
on:click="fire('click', item)"> on:click="fire('click', item)">
<!-- Extra wrapper inside button is required for KaiOS. Seems old Firefox does not like flex buttons. --> <!-- Extra wrapper inside button is required for KaiOS. Seems old Firefox does not like flex buttons. -->
<div class="generic-dialog-list-button-inner"> <div class="generic-dialog-list-button-inner">

View file

@ -13,7 +13,7 @@
<h1 class="modal-dialog-title">{title}</h1> <h1 class="modal-dialog-title">{title}</h1>
{/if} {/if}
<div class="close-dialog-button-wrapper"> <div class="close-dialog-button-wrapper">
<button class="close-dialog-button focus-after" <button class="close-dialog-button focus-fix"
data-a11y-dialog-hide aria-label="Close dialog"> data-a11y-dialog-hide aria-label="Close dialog">
<SvgIcon className="close-dialog-button-svg" href="#fa-times" /> <SvgIcon className="close-dialog-button-svg" href="#fa-times" />
</button> </button>

View file

@ -2,7 +2,7 @@
on:click="fire('click', event)" on:click="fire('click', event)"
rel="prefetch" rel="prefetch"
aria-label={ariaLabel || label} aria-label={ariaLabel || label}
class="settings-list-button focus-after {className ? className : ''}" class="settings-list-button focus-fix {className ? className : ''}"
> >
<span> <span>
{label} {label}

View file

@ -85,6 +85,10 @@
cursor: zoom-in; cursor: zoom-in;
} }
.inline-media {
position: relative;
}
@media (max-width: 240px) { @media (max-width: 240px) {
.inline-media { .inline-media {
min-height: 100px; /* TODO: hack for KaiOS, which renders the grouped-images style as 0 height */ min-height: 100px; /* TODO: hack for KaiOS, which renders the grouped-images style as 0 height */

View file

@ -70,7 +70,7 @@
className: ({ $underlineLinks }) => (classname( className: ({ $underlineLinks }) => (classname(
'notification-article', 'notification-article',
'shortcut-list-item', 'shortcut-list-item',
'focus-after', 'focus-fix',
$underlineLinks && 'underline-links' $underlineLinks && 'underline-links'
)) ))
}, },

View file

@ -294,7 +294,7 @@
className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname( className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname(
'status-article', 'status-article',
'shortcut-list-item', 'shortcut-list-item',
'focus-after', 'focus-fix',
timelineType !== 'direct' && visibility === 'direct' && 'status-direct', timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
timelineType !== 'search' && 'status-in-timeline', timelineType !== 'search' && 'status-in-timeline',
isStatusInOwnThread && 'status-in-own-thread', isStatusInOwnThread && 'status-in-own-thread',

View file

@ -47,6 +47,7 @@
</li> </li>
<li class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}"> <li class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}">
<button id={refreshElementId} <button id={refreshElementId}
class="focus-fix"
aria-label="Refresh"> aria-label="Refresh">
<SvgIcon className="poll-icon" href="#fa-refresh" /> <SvgIcon className="poll-icon" href="#fa-refresh" />
<span class="poll-stat-text poll-stat-text-refresh" aria-hidden="true"> <span class="poll-stat-text poll-stat-text-refresh" aria-hidden="true">

View file

@ -1,6 +1,6 @@
*:focus, .focus { *:focus {
outline: var(--focus-width) solid var(--focus-outline); outline: var(--focus-width) solid var(--focus-outline);
} }
@ -13,6 +13,11 @@
/* Special class to make focus outlines easier to see in some odd /* Special class to make focus outlines easier to see in some odd
* cases where the outline would be clipped. */ * cases where the outline would be clipped. */
/* TODO: use box-sizing:border-box everywhere so we can get rid of this hack */ /* TODO: use box-sizing:border-box everywhere so we can get rid of this hack */
.focus-fix:focus {
outline-offset: calc(-1 * var(--focus-width)); /* TODO: this is hacky, switch to box-sizing:border-box */
}
/* Another hack to make some focus styles appear better */
.focus-after { .focus-after {
position: relative; position: relative;
} }
@ -35,24 +40,28 @@
// For KaiOS, do some additional things to improve the focus styles, which don't show up well // For KaiOS, do some additional things to improve the focus styles, which don't show up well
// for some reason // for some reason
@media (max-width: 240px) { @media (max-width: 240px) {
a:focus, span:focus { a:not(.button):focus, span:focus {
background: var(--focus-bg) !important; background: var(--focus-bg) !important;
} }
button:focus { button:focus, .button:focus {
opacity: 0.7; opacity: 0.7;
} }
// add extra "focus-after"-like styles for buttons to increase visibility button.primary:focus, .button.primary:focus {
button.icon-button { opacity: 0.8;
}
button, .button {
position: relative; position: relative;
} }
button.icon-button:focus { // add extremely visible styles for buttons, ala .focus-after
button:focus, .button:focus {
outline: none; outline: none;
} }
button.icon-button:focus::after { button:focus::after, .button:focus::after {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;