Client - make calendar arrows accessible to keyboard navigation
This commit is contained in:
parent
e3f5701b9d
commit
3821e37022
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user