Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - make calendar arrows accessible to keyboard navigation

Browse Source
This commit is contained in:
Sam 2024-01-17 14:39:42 +01:00
parent e3f5701b9d
commit 3821e37022
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div class="calendar-header"> <div class="calendar-header">
<div <button
class="calendar-arrow calendar-arrow-left" class="calendar-arrow calendar-arrow-left transparent"
@click="emit('displayPreviousMonth')" @click="emit('displayPreviousMonth')"
> >
<i class="fa fa-chevron-left" aria-hidden="true" /> <i class="fa fa-chevron-left" aria-hidden="true" />
</div> </button>
<div class="calendar-month"> <div class="calendar-month">
<span> <span>
{{ format(day, 'MMM yyyy', { locale: localeOptions }) }} {{ format(day, 'MMM yyyy', { locale: localeOptions }) }}
</span> </span>
</div> </div>
<div <button
class="calendar-arrow calendar-arrow-right" class="calendar-arrow calendar-arrow-right transparent"
@click="emit('displayNextMonth')" @click="emit('displayNextMonth')"
> >
<i class="fa fa-chevron-right" aria-hidden="true" /> <i class="fa fa-chevron-right" aria-hidden="true" />
</div> </button>
</div> </div>
</template> </template>
@ -42,10 +42,9 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.calendar-arrow, .calendar-arrow {
.calendar-month {
flex-grow: 1; flex-grow: 1;
padding: $default-padding; padding: $default-padding - 1 px;
} }
.calendar-arrow-left { .calendar-arrow-left {
text-align: left; text-align: left;
@ -56,7 +55,9 @@
cursor: pointer; cursor: pointer;
} }
.calendar-month { .calendar-month {
flex-grow: 1;
font-weight: bold; font-weight: bold;
padding: $default-padding;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }