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

Time range a11y

Browse source
This commit is contained in:
Ben Grant 2021-06-01 03:50:01 +10:00
parent f502ea79ed
commit 67247dc032
2 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
View file

@ -90,6 +90,17 @@ const TimeRangeField = ({
step = Math.abs(step);
setStart(step);
}}
tabIndex="0"
onKeyDown={e => {
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
setStart(Math.max(start-1, 0));
}
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
setStart(Math.min(start+1, 24));
}
}}
/>
<Handle
value={end}
@ -113,6 +124,17 @@ const TimeRangeField = ({
step = Math.abs(step);
setEnd(step);
}}
tabIndex="0"
onKeyDown={e => {
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
setEnd(Math.max(end-1, 0));
}
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
setEnd(Math.min(end+1, 24));
}
}}
/>
</Range>
</Wrapper>

4
crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts
View file

@ -14,10 +14,10 @@ export const ToggleContainer = styled.div`
box-shadow: inset 0 -3px 0 0 var(--focus-color);
}
& > div:first-child label {
& > div:first-of-type label {
border-end-start-radius: 2px;
}
& > div:last-child label {
& > div:last-of-type label {
border-end-end-radius: 2px;
}
`;