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

Calendar: Alt + Up Arrow support added

pull/4485/head
Tuğçe Küçükoğlu 2023-09-20 22:53:39 +03:00
parent 91b362b6a8
commit f8d27530c8
2 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/lib/calendar/Calendar.vue
View File

@ -2031,31 +2031,37 @@ export default {
case 'ArrowUp': { case 'ArrowUp': {
cellContent.tabIndex = '-1'; cellContent.tabIndex = '-1';
let prevRow = cell.parentElement.previousElementSibling;
if (prevRow) { if (event.altKey) {
let tableRowIndex = DomHandler.index(cell.parentElement); this.overlayVisible = false;
const tableRows = Array.from(cell.parentElement.parentElement.children); this.focused = true;
const prevTableRows = tableRows.slice(0, tableRowIndex).reverse(); } else {
let prevRow = cell.parentElement.previousElementSibling;
let hasNextFocusableDate = prevTableRows.find((el) => { if (prevRow) {
let focusCell = el.children[cellIndex].children[0]; let tableRowIndex = DomHandler.index(cell.parentElement);
const tableRows = Array.from(cell.parentElement.parentElement.children);
const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
return !DomHandler.getAttribute(focusCell, 'data-p-disabled'); let hasNextFocusableDate = prevTableRows.find((el) => {
}); let focusCell = el.children[cellIndex].children[0];
if (hasNextFocusableDate) { return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
let focusCell = hasNextFocusableDate.children[cellIndex].children[0]; });
focusCell.tabIndex = '0'; if (hasNextFocusableDate) {
focusCell.focus(); let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
focusCell.tabIndex = '0';
focusCell.focus();
} else {
this.navigationState = { backward: true };
this.navBackward(event);
}
} else { } else {
this.navigationState = { backward: true }; this.navigationState = { backward: true };
this.navBackward(event); this.navBackward(event);
} }
} else {
this.navigationState = { backward: true };
this.navBackward(event);
} }
event.preventDefault(); event.preventDefault();

10
doc/calendar/AccessibilityDoc.vue
View File

@ -116,12 +116,16 @@
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Selects the date, closes the popup and moves focus to the input element.</td> <td>Closes the popup and moves focus to the input element.</td>
</tr> </tr>
<tr> <tr>
<td><i>up arrow</i></td> <td><i>up arrow</i></td>
<td>Moves focus to the same day of the previous week.</td> <td>Moves focus to the same day of the previous week.</td>
</tr> </tr>
<tr>
<td><i>alt</i> + <i>up arrow</i></td>
<td>Closes the popup and moves focus to the input element.</td>
</tr>
<tr> <tr>
<td><i>down arrow</i></td> <td><i>down arrow</i></td>
<td>Moves focus to the same day of the next week.</td> <td>Moves focus to the same day of the next week.</td>
@ -148,7 +152,7 @@
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>page up</i></td> <td><i>shift</i> + <i>page up</i></td>
<td>Changes the date to previous year in date picker mode. Has no effect in month or year picker</td> <td>Changes the date to previous year in date picker mode. Has no effect in month or year picker.</td>
</tr> </tr>
<tr> <tr>
<td><i>page down</i></td> <td><i>page down</i></td>
@ -156,7 +160,7 @@
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>page down</i></td> <td><i>shift</i> + <i>page down</i></td>
<td>Changes the date to next year in date picker mode. Has no effect in month or year picker</td> <td>Changes the date to next year in date picker mode. Has no effect in month or year picker.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>