vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Calendar keyboard support update

pull/2835/head
Tuğçe Küçükoğlu 2022-08-01 15:20:19 +03:00
parent 923e931bbf
commit 53a7d935d6
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/calendar/Calendar.vue
View File

@ -2,11 +2,12 @@
<span ref="container" :id="id" :class="containerClass"> <span ref="container" :id="id" :class="containerClass">
<input :ref="inputRef" v-if="!inline" type="text" role="combobox" :id="inputId" :class="['p-inputtext p-component', inputClass]" :style="inputStyle" <input :ref="inputRef" v-if="!inline" type="text" role="combobox" :id="inputId" :class="['p-inputtext p-component', inputClass]" :style="inputStyle"
aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" inputmode="none" aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" inputmode="none"
@input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" v-bind="inputProps"> @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" :tabindex="0" v-bind="inputProps">
<CalendarButton v-if="showIcon" :icon="icon" class="p-datepicker-trigger" :disabled="disabled" @click="onButtonClick" type="button" :aria-label="$primevue.config.locale.chooseDate" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId"/> <CalendarButton v-if="showIcon" :icon="icon" class="p-datepicker-trigger" :disabled="disabled" @click="onButtonClick" type="button" :aria-label="$primevue.config.locale.chooseDate" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId"/>
<Portal :appendTo="appendTo" :disabled="inline"> <Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
<div :ref="overlayRef" :id="panelId" :class="panelStyleClass" :style=panelStyle v-if="inline || overlayVisible" :role="inline ? null : 'dialog'" :aria-modal="inline ? null : 'true'" :aria-label="$primevue.config.locale.chooseDate" @click="onOverlayClick" @mouseup="onOverlayMouseUp" v-bind="panelProps"> <div :ref="overlayRef" :id="panelId" :class="panelStyleClass" :style=panelStyle v-if="inline || overlayVisible" :role="inline ? null : 'dialog'" :aria-modal="inline ? null : 'true'" :aria-label="$primevue.config.locale.chooseDate"
@click="onOverlayClick" @keydown="onOverlayKeyDown" @mouseup="onOverlayMouseUp" v-bind="panelProps">
<template v-if="!timeOnly"> <template v-if="!timeOnly">
<div class="p-datepicker-group-container"> <div class="p-datepicker-group-container">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year"> <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
@ -2248,7 +2249,9 @@ export default {
focusableElements[focusedIndex - 1].focus(); focusableElements[focusedIndex - 1].focus();
} }
else { else {
if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1)) if (focusedIndex == -1)
focusableElements[focusableElements.length - 1].focus();
else if (focusedIndex === (focusableElements.length - 1))
focusableElements[0].focus(); focusableElements[0].focus();
else else
focusableElements[focusedIndex + 1].focus(); focusableElements[focusedIndex + 1].focus();
@ -2308,6 +2311,9 @@ export default {
if (event.code === 'ArrowDown' && this.overlay) { if (event.code === 'ArrowDown' && this.overlay) {
this.trapFocus(event); this.trapFocus(event);
} }
else if (event.code === 'ArrowDown' && !this.overlay) {
this.overlayVisible = true;
}
else if (event.code === 'Escape') { else if (event.code === 'Escape') {
if (this.overlayVisible) { if (this.overlayVisible) {
this.overlayVisible = false; this.overlayVisible = false;
@ -2344,6 +2350,17 @@ export default {
}); });
} }
}, },
onOverlayKeyDown(event) {
switch (event.code) {
case 'Escape':
this.input.focus();
this.overlayVisible = false;
break;
default:
break;
}
},
onOverlayMouseUp(event) { onOverlayMouseUp(event) {
this.onOverlayClick(event); this.onOverlayClick(event);
}, },