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

Calendar field a11y

Browse source
This commit is contained in:
Ben Grant 2021-06-01 03:39:59 +10:00
parent 70085defcf
commit f502ea79ed
3 changed files with 35 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
crabfit-frontend/src/components/CalendarField/CalendarField.tsx
View file

@ -168,7 +168,17 @@ const CalendarField = ({
selected={selectedDates.includes(date.format('DDMMYYYY'))} selected={selectedDates.includes(date.format('DDMMYYYY'))}
selecting={selectingDates.includes(date)} selecting={selectingDates.includes(date)}
mode={mode} mode={mode}
onPointerDown={(e) => { type="button"
onKeyPress={e => {
if (e.key === ' ' || e.key === 'Enter') {
if (selectedDates.includes(date.format('DDMMYYYY'))) {
setSelectedDates(selectedDates.filter(d => d !== date.format('DDMMYYYY')));
} else {
setSelectedDates([...selectedDates, date.format('DDMMYYYY')]);
}
}
}}
onPointerDown={e => {
startPos.current = {x, y}; startPos.current = {x, y};
setMode(selectedDates.includes(date.format('DDMMYYYY')) ? 'remove' : 'add'); setMode(selectedDates.includes(date.format('DDMMYYYY')) ? 'remove' : 'add');
setSelectingDates([date]); setSelectingDates([date]);

16
crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts
View file

@ -51,21 +51,27 @@ export const CalendarBody = styled.div`
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
grid-gap: 2px; grid-gap: 2px;
& div:first-of-type { & button:first-of-type {
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
& div:nth-of-type(7) { & button:nth-of-type(7) {
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
& div:nth-last-of-type(7) { & button:nth-last-of-type(7) {
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
& div:last-of-type { & button:last-of-type {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
`; `;
export const Date = styled.div` export const Date = styled.button`
font: inherit;
color: inherit;
background: none;
border: 0;
appearance: none;
background-color: ${props => props.theme.primaryBackground}; background-color: ${props => props.theme.primaryBackground};
border: 1px solid ${props => props.theme.primaryLight}; border: 1px solid ${props => props.theme.primaryLight};
display: flex; display: flex;

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

@ -10,9 +10,15 @@ export const ToggleContainer = styled.div`
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
&:focus-within { &:focus-within label {
outline: Highlight auto 1px; box-shadow: inset 0 -3px 0 0 var(--focus-color);
outline: -webkit-focus-ring-color auto 1px; }
& > div:first-child label {
border-end-start-radius: 2px;
}
& > div:last-child label {
border-end-end-radius: 2px;
} }
`; `;
@ -36,6 +42,7 @@ export const HiddenInput = styled.input`
&:checked + label { &:checked + label {
color: ${props => props.theme.background}; color: ${props => props.theme.background};
background-color: ${props => props.theme.primary}; background-color: ${props => props.theme.primary};
--focus-color: ${props => props.theme.primaryDark};
} }
`; `;
@ -49,4 +56,6 @@ export const LabelButton = styled.label`
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: box-shadow .15s;
--focus-color: ${props => props.theme.primary};
`; `;