Skip to content

Commit

Permalink
feat(a11y): add keyboard focus for month and year
Browse files Browse the repository at this point in the history
  • Loading branch information
@acamachoappomni
acamachoappomni committed Oct 19, 2023
1 parent 69b8355 commit 458f9fd
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 131 deletions.
128 changes: 64 additions & 64 deletions src/calendar/table-month.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,18 @@
<td
v-for="(cell, j) in row"
:key="j"
:ref="`month-cell-${cell.text}`"
:ref="handleRefName(cell, i, j)"
class="cell"
role="button"
tabindex="0"
:disabled="isDisabled(cell)"
:tabindex="handleTabIndex(cell)"
:data-month="cell.month"
:class="getCellClasses(cell.month)"
@blur="onBlur(i, j)"
@keydown.tab.prevent.stop
@keydown.up.prevent="handleArrowUp(i, j)"
@keydown.down.prevent="handleArrowDown(i, j)"
@keydown.left.prevent="handleArrowLeft(i, j)"
@keydown.right.prevent="handleArrowRight(i, j)"
@keydown.up.prevent="handleArrowUp(cell, i, j)"
@keydown.down.prevent="handleArrowDown(cell, i, j)"
@keydown.left.prevent="handleArrowLeft(cell, i, j)"
@keydown.right.prevent="handleArrowRight(cell, i, j)"
>
<div>{{ cell.text }}</div>
</td>
Expand All @@ -56,7 +56,7 @@
import { chunk } from '../util/base';
import IconButton from './icon-button';
import { getLocale } from '../locale';
import { setYear } from '../util/date';
import { createDate, setYear } from '../util/date';
export default {
name: 'TableMonth',
Expand All @@ -82,6 +82,10 @@ export default {
type: Function,
default: () => [],
},
isDisabled: {
type: Function,
default: () => false,
},
},
computed: {
calendarYear() {
Expand All @@ -98,6 +102,12 @@ export default {
locale() {
return this.getLocale();
},
refsArray() {
if (this.$refs) {
return Object.entries(this.$refs);
}
return [];
},
},
methods: {
isDisabledArrows(type) {
Expand All @@ -115,68 +125,64 @@ export default {
}
return this.disabledCalendarChanger(date, type);
},
handleArrowUp(row, column) {
handleArrowUp(cell, row, column) {
if (row === 0) {
return;
}
const month = this.months[row - 1][column];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
const refName = this.handleRefName(cell, row - 1, column);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleArrowDown(row, column) {
handleArrowDown(cell, row, column) {
if (row === this.months.length - 1) {
return;
}
const month = this.months[row + 1][column];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
const refName = this.handleRefName(cell, row + 1, column);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleArrowLeft(row, column) {
if (column <= 0) {
if (row === 0 && column === 0) {
this.handleIconDoubleLeftClick();
const lastMonth = this.months[this.months.length - 1];
const month = lastMonth[lastMonth.length - 1];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
if (ref) {
ref.focus();
handleArrowLeft(cell, row, column) {
const currentRefName = this.handleRefName(cell, row, column);
const firstRef = this.refsArray[0];
if (currentRefName !== firstRef[0]) {
const refName = this.handleRefName(cell, row, column - 1);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
}
} else {
this.handleIconDoubleLeftClick();
const lastRef = this.refsArray[this.refsArray.length - 1];
if (lastRef.length) {
const element = lastRef[1];
if (element.length) {
element[0].focus();
}
}
return;
}
const month = this.months[row][column - 1];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleArrowRight(row, column) {
if (column >= 2) {
if (row === this.months.length - 1) {
const lastRow = this.months[row];
if (column === lastRow.length - 1) {
this.handleIconDoubleRightClick();
const month = this.months[0][0];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
if (ref) {
ref.focus();
}
handleArrowRight(cell, row, column) {
const currentRefName = this.handleRefName(cell, row, column);
const lastRef = this.refsArray[this.refsArray.length - 1];
if (currentRefName !== lastRef[0]) {
const refName = this.handleRefName(cell, row, column + 1);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
}
} else {
this.handleIconDoubleRightClick();
const firstRef = this.refsArray[0];
if (firstRef.length) {
const element = firstRef[1];
if (element.length) {
element[0].focus();
}
}
return;
}
const month = this.months[row][column + 1];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleIconDoubleLeftClick() {
Expand Down Expand Up @@ -206,22 +212,16 @@ export default {
this.$emit('select', parseInt(month, 10));
}
},
moveToFirstCell() {
const month = this.months[0][0];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
if (ref) {
setTimeout(() => {
ref.focus();
ref.classList.add('focus');
}, 1);
handleRefName(cellDate, row, col) {
const date = createDate(cellDate, 0);
if (!this.isDisabled(date)) {
return `year-cell-${row}-${col}`;
}
return undefined;
},
onBlur(i, j) {
const month = this.months[i][j];
const ref = this.$refs[`month-cell-${month.text}`]?.[0];
if (ref) {
ref.classList.remove('focus');
}
handleTabIndex(cellDate) {
const date = createDate(cellDate, 0);
return this.isDisabled(date) ? -1 : 0;
},
},
};
Expand Down
129 changes: 62 additions & 67 deletions src/calendar/table-year.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,19 @@
<tr v-for="(row, i) in years" :key="i">
<td
v-for="(cell, j) in row"
:ref="handleRef(cell)"
:ref="handleRefName(cell, i, j)"
:key="j"
aria-hidden="false"
class="cell"
role="button"
:tabindex="handleTabIndex(cell)"
:data-year="cell"
:class="getCellClasses(cell)"
@blur.prevent="onBlur(i, j)"
@keydown.tab.prevent.stop
@keydown.up.prevent="handleArrowUp(i, j)"
@keydown.down.prevent="handleArrowDown(i, j)"
@keydown.left.prevent="handleArrowLeft(i, j)"
@keydown.right.prevent="handleArrowRight(i, j)"
@keydown.up.prevent="handleArrowUp(cell, i, j)"
@keydown.down.prevent="handleArrowDown(cell, i, j)"
@keydown.left.prevent="handleArrowLeft(cell, i, j)"
@keydown.right.prevent="handleArrowRight(cell, i, j)"
>
<div>{{ cell }}</div>
</td>
Expand All @@ -52,7 +51,7 @@
<script>
import IconButton from './icon-button';
import { chunk } from '../util/base';
import { setYear } from '../util/date';
import { createDate, setYear } from '../util/date';
import { getLocale } from '../locale';
export default {
Expand Down Expand Up @@ -82,6 +81,10 @@ export default {
getYearPanel: {
type: Function,
},
isDisabled: {
type: Function,
default: () => false,
},
},
computed: {
years() {
Expand All @@ -101,6 +104,12 @@ export default {
locale() {
return this.getLocale();
},
refsArray() {
if (this.$refs) {
return Object.entries(this.$refs);
}
return [];
},
},
methods: {
isDisabledArrows(type) {
Expand All @@ -126,66 +135,64 @@ export default {
}
return chunk(years, 2);
},
handleArrowUp(row, column) {
handleArrowUp(cell, row, column) {
if (row === 0) {
return;
}
const year = this.years[row - 1][column];
const ref = this.$refs[`year-cell-${year}`]?.[0];
const refName = this.handleRefName(cell, row - 1, column);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleArrowDown(row, column) {
handleArrowDown(cell, row, column) {
if (row === this.years.length - 1) {
return;
}
const year = this.years[row + 1][column];
const ref = this.$refs[`year-cell-${year}`]?.[0];
const refName = this.handleRefName(cell, row + 1, column);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleArrowLeft(row, column) {
if (column % 2 === 0) {
if (row === 0 && column === 0) {
this.handleIconDoubleLeftClick();
const ref = this.$refs[`year-cell-${this.lastYear}`]?.[0];
if (ref) {
ref.focus();
handleArrowLeft(cell, row, column) {
const currentRefName = this.handleRefName(cell, row, column);
const firstRef = this.refsArray[0];
if (currentRefName !== firstRef[0]) {
const refName = this.handleRefName(cell, row, column - 1);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
}
} else {
this.handleIconDoubleLeftClick();
const lastRef = this.refsArray[this.refsArray.length - 1];
if (lastRef.length) {
const element = lastRef[1];
if (element.length) {
element[0].focus();
}
}
return;
}
const year = this.years[row][column - 1];
const ref = this.$refs[`year-cell-${year}`]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleArrowRight(row, column) {
if (column % 2 === 1) {
if (row === this.years.length - 1) {
const lastRow = this.years[row];
if (column === lastRow.length - 1) {
this.handleIconDoubleRightClick();
const year = this.years[0][0];
const ref = this.$refs[`year-cell-${year}`]?.[0];
if (ref) {
ref.focus();
}
handleArrowRight(cell, row, column) {
const currentRefName = this.handleRefName(cell, row, column);
const lastRef = this.refsArray[this.refsArray.length - 1];
if (currentRefName !== lastRef[0]) {
const refName = this.handleRefName(cell, row, column + 1);
const ref = this.$refs[refName]?.[0];
if (ref) {
ref.focus();
}
} else {
this.handleIconDoubleRightClick();
const firstRef = this.refsArray[0];
if (firstRef.length) {
const element = firstRef[1];
if (element.length) {
element[0].focus();
}
}
return;
}
const year = this.years[row][column + 1];
const ref = this.$refs[`year-cell-${year}`]?.[0];
if (ref) {
ref.focus();
ref.classList.add('focus');
}
},
handleIconDoubleLeftClick() {
Expand Down Expand Up @@ -213,28 +220,16 @@ export default {
this.selectedYear = parseInt(year, 10);
}
},
handleRef(cellDate) {
return this.disabledCalendarChanger(cellDate, 'year') ? undefined : `year-cell-${cellDate}`;
},
handleTabIndex(cellDate) {
return this.disabledCalendarChanger(cellDate, 'year') ? -1 : 0;
},
moveToFirstCell() {
const year = this.years[0][0];
const ref = this.$refs[`year-cell-${year}`]?.[0];
if (ref) {
setTimeout(() => {
ref.focus();
ref.classList.add('focus');
}, 1);
handleRefName(cellDate, row, col) {
const date = createDate(cellDate, 0);
if (!this.isDisabled(date)) {
return `year-cell-${row}-${col}`;
}
return undefined;
},
onBlur(i, j) {
const year = this.years[i][j];
const ref = this.$refs[`year-cell-${year}`]?.[0];
if (ref) {
ref.classList.remove('focus');
}
handleTabIndex(cellDate) {
const date = createDate(cellDate, 0);
return this.isDisabled(date) ? -1 : 0;
},
},
};
Expand Down

0 comments on commit 458f9fd

Please sign in to comment.