scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Clearer focus ring for all elements

Browse source
This commit is contained in:
Benji Grant 2023-06-09 02:59:42 +10:00
parent c6875b0332
commit c4d47cd034
13 changed files with 115 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/[id]/page.module.scss
View file

@ -52,6 +52,11 @@
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
}
.tabSelected {

1
frontend/src/app/[id]/page.tsx
View file

@ -20,7 +20,6 @@ export const generateMetadata = async ({ params }: PageProps): Promise<Metadata>
const event = await getEvent(params.id).catch(() => undefined)
const { t } = await useTranslation('event')
// TODO: More metadata
return {
title: event?.name ?? t('error.title'),
}

6
frontend/src/app/global.css
View file

@ -89,6 +89,7 @@ body {
background: var(--background);
color: var(--text);
font-weight: var(--font-weight);
--focus-ring: 2px solid var(--secondary);
}
.light {
@ -131,6 +132,11 @@ body {
a {
color: var(--primary);
border-radius: .2em;
}
a:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
*::-webkit-scrollbar {

5
frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
View file

@ -146,6 +146,11 @@
cursor: pointer;
padding: 2px 8px;
user-select: none;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
}
.personSelected {

57
frontend/src/components/Button/Button.module.scss
View file

@ -1,19 +1,25 @@
.button {
cursor: pointer;
border: 0;
text-decoration: none;
font: inherit;
padding: 0;
margin: 0;
background: none;
border-radius: 3px;
& > div {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
border: 0;
text-decoration: none;
font: inherit;
box-sizing: border-box;
background: var(--override-surface-color, var(--primary));
color: var(--override-text-color, var(--background));
font-weight: 600;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1);
border-radius: 3px;
border-radius: inherit;
padding: .6em 1.5em;
transform-style: preserve-3d;
margin-bottom: 5px;
@ -36,15 +42,16 @@
transform: translate3d(0, 5px, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
}
&:hover, &:focus {
&:hover > div, &:focus > div {
transform: translate(0, 1px);
&::before {
transform: translate3d(0, 4px, -1em);
}
}
&:active {
&:active > div {
transform: translate(0, 5px);
&::before {
transform: translate3d(0, 0, -1em);
@ -52,13 +59,18 @@
}
@media print {
&::before {
& > div::before {
display: none;
}
}
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
}
.iconButton {
.iconButton > div {
height: 30px;
width: 30px;
padding: 0;
@ -68,14 +80,17 @@
}
}
.small {
.small > div {
padding: .4em 1.3em;
}
.loading {
color: transparent;
cursor: wait;
& > div {
color: transparent;
}
& img {
opacity: 0;
}
@ -89,7 +104,7 @@
}
}
&::after {
& > div::after {
content: '';
position: absolute;
top: calc(50% - 12px);
@ -103,7 +118,7 @@
}
@media (prefers-reduced-motion: reduce) {
&::after {
& > div::after {
content: 'loading...';
color: var(--override-text-color, var(--background));
animation: none;
@ -122,19 +137,21 @@
}
.secondary {
& > div {
background: transparent;
border: 1px solid var(--override-surface-color, var(--secondary));
color: var(--override-surface-color, var(--secondary));
margin-bottom: 0;
&::before {
content: none;
}
&:hover, &:active, &:focus {
transform: none;
}
@media print {
box-shadow: 0 4px 0 0 var(--override-shadow-color, var(--secondary));
}
}
& > div::before {
content: none;
}
&:hover > div, &:active > div, &:focus > div {
transform: none;
}
}

2
frontend/src/components/Button/Button.tsx
View file

@ -44,7 +44,7 @@ const Button: React.FC<ButtonProps> = ({
...shadowColor && { '--override-shadow-color': shadowColor },
...style,
},
children: <>{icon}{children}</>,
children: <div>{icon}{children}</div>,
...props,
}

7
frontend/src/components/CalendarField/components/Month/Month.module.scss
View file

@ -63,6 +63,13 @@
padding: 10px 0;
user-select: none;
touch-action: none;
position: relative;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
transition: none;

8
frontend/src/components/SelectField/SelectField.module.scss
View file

@ -8,16 +8,14 @@
border: 1px solid var(--primary);
box-shadow: inset 0 0 0 0 var(--primary);
border-radius: 3px;
outline: none;
transition: border-color .15s, box-shadow .15s;
appearance: none;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3CforeignObject%20width%3D%22100px%22%20height%3D%22100px%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22color%3A%23F79E00%3Bfont-size%3A60px%3Bdisplay%3Aflex%3Balign-items%3Acenter%3Bjustify-content%3Acenter%3Bheight%3A100%25%3Bwidth%3A100%25%3B%22%3E%E2%96%BC%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 1em;
&:focus {
border: 1px solid var(--secondary);
box-shadow: inset 0 -3px 0 0 var(--secondary);
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
}

4
frontend/src/components/Settings/Settings.module.scss
View file

@ -17,6 +17,10 @@
transition: transform .15s;
padding: 0;
&:focus-visible {
outline: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}

8
frontend/src/components/TextField/TextField.module.scss
View file

@ -9,11 +9,9 @@
box-shadow: inset 0 0 0 0 var(--primary);
border-radius: 3px;
font-size: 18px;
outline: none;
transition: border-color .15s, box-shadow .15s;
&:focus {
border: 1px solid var(--secondary);
box-shadow: inset 0 -3px 0 0 var(--secondary);
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
}

5
frontend/src/components/TimeRangeField/TimeRangeField.module.scss
View file

@ -48,6 +48,11 @@
white-space: nowrap;
padding-inline: var(--extra-padding);
}
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
}
.selected {

24
frontend/src/components/ToggleField/ToggleField.module.scss
View file

@ -1,23 +1,15 @@
.toggleContainer {
display: flex;
border: 1px solid var(--primary);
border-radius: 3px;
overflow: hidden;
--focus-color: var(--primary);
transition: border .15s;
&:focus-within {
--focus-color: var(--secondary);
border: 1px solid var(--focus-color);
& label {
box-shadow: inset 0 -3px 0 0 var(--focus-color);
}
}
& > div:first-of-type label {
border-inline-start: 1px solid var(--primary);
border-end-start-radius: 2px;
border-start-start-radius: 2px;
}
& > div:last-of-type label {
border-inline-end: 1px solid var(--primary);
border-start-end-radius: 2px;
border-end-end-radius: 2px;
}
}
@ -38,7 +30,11 @@
&:checked + label {
color: var(--background);
background-color: var(--focus-color);
background-color: var(--primary);
}
&:focus-visible + label {
outline: var(--focus-ring);
outline-offset: 2px;
}
}
@ -52,5 +48,5 @@
box-sizing: border-box;
align-items: center;
justify-content: center;
transition: box-shadow .15s, background-color .15s;
border-block: 1px solid var(--primary);
}

3
frontend/src/components/Video/Video.module.scss
View file

@ -20,6 +20,7 @@
max-width: 400px;
margin: 0 auto;
transition: transform .15s;
border-radius: 10px;
&:hover, &:focus {
transform: translateY(-2px);
@ -31,7 +32,7 @@
img {
width: 100%;
display: block;
border-radius: 10px;
border-radius: inherit;
background-color: #CCC;
}
span {