Updates Buefy for a11y #3. Updates datepickers year range to -200,50. New breakpoint for setting dropdowns as modal.

This commit is contained in:
Mateus Machado Luna 2019-10-23 13:10:02 -03:00
parent 11b281d7e2
commit 33c5549ca3
16 changed files with 40 additions and 17 deletions

6
package-lock.json generated
View File

@ -1951,9 +1951,9 @@
} }
}, },
"buefy": { "buefy": {
"version": "0.8.5", "version": "0.8.6",
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.5.tgz", "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.6.tgz",
"integrity": "sha512-yGQUhIsZWTodCx1rpfDTA32v5OjILpDIDAP+X6KoE6du3F3EZwJ/k5aT8D6Ba6AxNzVdDa2M7f0hzMddLbm38A==", "integrity": "sha512-7woxrdwANcnJbe7lofPxkJLGRRGIVwFXOo0kzEpiNB6alQj18NV6UrdAKse+LWCOADz+AeHe5gyc6qdgRjG5mw==",
"requires": { "requires": {
"bulma": "0.7.5" "bulma": "0.7.5"
} }

View File

@ -8,7 +8,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.0", "axios": "^0.19.0",
"buefy": "^0.8.5", "buefy": "^0.8.6",
"bulma": "^0.7.5", "bulma": "^0.7.5",
"mdi": "^2.2.43", "mdi": "^2.2.43",
"moment": "^2.22.2", "moment": "^2.22.2",

View File

@ -93,7 +93,9 @@
<b-modal <b-modal
@close="onMetadatumEditionCanceled()" @close="onMetadatumEditionCanceled()"
:active.sync="isNewMetadatumModalActive" :active.sync="isNewMetadatumModalActive"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div <div
autofocus="true" autofocus="true"
tabindex="-1" tabindex="-1"

View File

@ -213,7 +213,9 @@
:active.sync="isTextModalActive" :active.sync="isTextModalActive"
:width="640" :width="640"
scroll="keep" scroll="keep"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div class="tainacan-modal-content"> <div class="tainacan-modal-content">
<div class="tainacan-modal-title"> <div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_write_text') }}</h2> <h2>{{ $i18n.get('instruction_write_text') }}</h2>
@ -250,11 +252,11 @@
:active.sync="isURLModalActive" :active.sync="isURLModalActive"
:width="640" :width="640"
scroll="keep" scroll="keep"
trap-focus trap-focus
autofocus
role="dialog" role="dialog"
tabindex="-1" tabindex="-1"
aria-modal> aria-modal
aria-role="dialog">
<div class="tainacan-modal-content"> <div class="tainacan-modal-content">
<div class="tainacan-modal-title"> <div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_insert_url') }}</h2> <h2>{{ $i18n.get('instruction_insert_url') }}</h2>

View File

@ -235,7 +235,9 @@
ref="filterTypeModal" ref="filterTypeModal"
:width="680" :width="680"
:active.sync="isSelectingFilterType" :active.sync="isSelectingFilterType"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div <div
autofocus autofocus
role="dialog" role="dialog"

View File

@ -371,7 +371,9 @@
<b-modal <b-modal
@close="onCancelNewMetadataMapperMetadata" @close="onCancelNewMetadataMapperMetadata"
:active.sync="isMapperMetadataCreating" :active.sync="isMapperMetadataCreating"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div <div
autofocus autofocus
role="dialog" role="dialog"

View File

@ -12,7 +12,9 @@
<b-modal <b-modal
:active.sync="isPreviewModalActive" :active.sync="isPreviewModalActive"
scroll="keep" scroll="keep"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<!-- <div class="tainacan-modal-content"> <!-- <div class="tainacan-modal-content">
<div class="tainacan-modal-title"> <div class="tainacan-modal-title">
<h2>{{ $i18n.get('label_document') }}</h2> <h2>{{ $i18n.get('label_document') }}</h2>

View File

@ -33,7 +33,9 @@
:active.sync="isPreviewModalActive" :active.sync="isPreviewModalActive"
:width="1024" :width="1024"
scroll="keep" scroll="keep"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div <div
autofocus autofocus
role="dialog" role="dialog"

View File

@ -59,7 +59,7 @@ import FormNumericListInterval from '../../classes/filter-types/numeric-list-int
// Configure and Register Plugins // Configure and Register Plugins
Vue.use(Buefy, { Vue.use(Buefy, {
defaultTooltipAnimated: true defaultTooltipAnimated: true
}); });
Vue.use(VTooltip); Vue.use(VTooltip);
Vue.use(VueMasonry); Vue.use(VueMasonry);

View File

@ -43,6 +43,7 @@
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
size="is-small" size="is-small"
icon="calendar-today" icon="calendar-today"
:years-range="[-50, 3]"
:day-names="[ :day-names="[
$i18n.get('datepicker_short_sunday'), $i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'), $i18n.get('datepicker_short_monday'),

View File

@ -818,7 +818,9 @@
:active.sync="isFilterModalActive" :active.sync="isFilterModalActive"
:width="736" :width="736"
animation="slide-menu" animation="slide-menu"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div <div
ref="filters-mobile-modal" ref="filters-mobile-modal"
class="modal-inner-content" class="modal-inner-content"

View File

@ -796,7 +796,9 @@
:active.sync="isFilterModalActive" :active.sync="isFilterModalActive"
:width="736" :width="736"
animation="slide-menu" animation="slide-menu"
trap-focus> trap-focus
aria-modal
aria-role="dialog">
<div <div
autofocus="true" autofocus="true"
tabindex="-1" tabindex="-1"

View File

@ -111,8 +111,9 @@ $addColors: (
); );
$colors: map-merge($colors, $addColors); $colors: map-merge($colors, $addColors);
// Small size // Bulma Variables
$size-small: 0.85em; // 0.75em on Bulma. $size-small: 0.85em; // 0.75em on Bulma.
$dropdown-mobile-breakpoint: $tablet;
// Tainacan Header and side menus // Tainacan Header and side menus
$header-height: 52px; $header-height: 52px;

View File

@ -13,6 +13,7 @@
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
icon="calendar-today" icon="calendar-today"
:years-range="[-200, 50]"
:day-names="[ :day-names="[
$i18n.get('datepicker_short_sunday'), $i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'), $i18n.get('datepicker_short_monday'),
@ -34,6 +35,7 @@
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
icon="calendar-today" icon="calendar-today"
:years-range="[-200, 50]"
:day-names="[ :day-names="[
$i18n.get('datepicker_short_sunday'), $i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'), $i18n.get('datepicker_short_monday'),

View File

@ -11,6 +11,7 @@
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
icon="calendar-today" icon="calendar-today"
:years-range="[-200, 100]"
:day-names="[ :day-names="[
$i18n.get('datepicker_short_sunday'), $i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'), $i18n.get('datepicker_short_monday'),
@ -32,6 +33,7 @@
:date-formatter="(date) => dateFormatter(date)" :date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
icon="calendar-today" icon="calendar-today"
:years-range="[-200, 50]"
:day-names="[ :day-names="[
$i18n.get('datepicker_short_sunday'), $i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'), $i18n.get('datepicker_short_monday'),

View File

@ -78,6 +78,7 @@
:date-parser="(date) => dateParser(date)" :date-parser="(date) => dateParser(date)"
size="is-small" size="is-small"
icon="calendar-today" icon="calendar-today"
:years-range="[-200, 50]"
:day-names="[ :day-names="[
$i18n.get('datepicker_short_sunday'), $i18n.get('datepicker_short_sunday'),
$i18n.get('datepicker_short_monday'), $i18n.get('datepicker_short_monday'),