parent
fbed5b8ac8
commit
1bbe2a5612
|
@ -1,4 +1,4 @@
|
|||
<a class='main-nav-link {selected ? "selected" : ""}'
|
||||
<a class='main-nav-link focus-fix {selected ? "selected" : ""}'
|
||||
aria-label={ariaLabel}
|
||||
aria-current={selected}
|
||||
on:click="onClick(event)"
|
||||
|
@ -22,7 +22,6 @@
|
|||
align-items: center;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
outline-offset: calc(-1 * var(--focus-width)); /* TODO: this is hacky, switch to box-sizing:border-box */
|
||||
}
|
||||
|
||||
.nav-icon-and-label {
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
{#each tabs as tab (tab.name)}
|
||||
<li class="{currentTabName === tab.name ? 'current' : 'not-current'}">
|
||||
<a aria-label="{tab.label} { currentTabName === tab.name ? '(Current)' : ''}"
|
||||
class="focus-fix"
|
||||
href={tab.href}
|
||||
rel="prefetch">
|
||||
{tab.label}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
{#each items as item (item.key)}
|
||||
<li class="generic-dialog-list-item">
|
||||
<button
|
||||
class="generic-dialog-list-button focus-after"
|
||||
class="generic-dialog-list-button focus-fix"
|
||||
on:click="fire('click', item)">
|
||||
<!-- Extra wrapper inside button is required for KaiOS. Seems old Firefox does not like flex buttons. -->
|
||||
<div class="generic-dialog-list-button-inner">
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<h1 class="modal-dialog-title">{title}</h1>
|
||||
{/if}
|
||||
<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">
|
||||
<SvgIcon className="close-dialog-button-svg" href="#fa-times" />
|
||||
</button>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
on:click="fire('click', event)"
|
||||
rel="prefetch"
|
||||
aria-label={ariaLabel || label}
|
||||
class="settings-list-button focus-after {className ? className : ''}"
|
||||
class="settings-list-button focus-fix {className ? className : ''}"
|
||||
>
|
||||
<span>
|
||||
{label}
|
||||
|
|
|
@ -85,6 +85,10 @@
|
|||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.inline-media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 240px) {
|
||||
.inline-media {
|
||||
min-height: 100px; /* TODO: hack for KaiOS, which renders the grouped-images style as 0 height */
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
className: ({ $underlineLinks }) => (classname(
|
||||
'notification-article',
|
||||
'shortcut-list-item',
|
||||
'focus-after',
|
||||
'focus-fix',
|
||||
$underlineLinks && 'underline-links'
|
||||
))
|
||||
},
|
||||
|
|
|
@ -294,7 +294,7 @@
|
|||
className: ({ visibility, timelineType, isStatusInOwnThread, $underlineLinks, $disableTapOnStatus }) => (classname(
|
||||
'status-article',
|
||||
'shortcut-list-item',
|
||||
'focus-after',
|
||||
'focus-fix',
|
||||
timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
|
||||
timelineType !== 'search' && 'status-in-timeline',
|
||||
isStatusInOwnThread && 'status-in-own-thread',
|
||||
|
|
|
@ -47,6 +47,7 @@
|
|||
</li>
|
||||
<li class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}">
|
||||
<button id={refreshElementId}
|
||||
class="focus-fix"
|
||||
aria-label="Refresh">
|
||||
<SvgIcon className="poll-icon" href="#fa-refresh" />
|
||||
<span class="poll-stat-text poll-stat-text-refresh" aria-hidden="true">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
|
||||
*:focus, .focus {
|
||||
*:focus {
|
||||
outline: var(--focus-width) solid var(--focus-outline);
|
||||
}
|
||||
|
||||
|
@ -13,6 +13,11 @@
|
|||
/* Special class to make focus outlines easier to see in some odd
|
||||
* cases where the outline would be clipped. */
|
||||
/* 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 {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -35,24 +40,28 @@
|
|||
// For KaiOS, do some additional things to improve the focus styles, which don't show up well
|
||||
// for some reason
|
||||
@media (max-width: 240px) {
|
||||
a:focus, span:focus {
|
||||
a:not(.button):focus, span:focus {
|
||||
background: var(--focus-bg) !important;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
button:focus, .button:focus {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// add extra "focus-after"-like styles for buttons to increase visibility
|
||||
button.icon-button {
|
||||
button.primary:focus, .button.primary:focus {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button.icon-button:focus {
|
||||
// add extremely visible styles for buttons, ala .focus-after
|
||||
button:focus, .button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button.icon-button:focus::after {
|
||||
button:focus::after, .button:focus::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
Loading…
Reference in a new issue