Skip to content

Commit

Permalink
fix(VCalendar): add aria roles to monthly calendar (#14640)
Browse files Browse the repository at this point in the history
fixes #14604
  • Loading branch information
knknk98 authored Aug 9, 2022
1 parent 299330c commit 2cd34b4
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 55 deletions.
3 changes: 3 additions & 0 deletions packages/vuetify/src/components/VCalendar/VCalendar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,9 @@ export default CalendarWithEvents.extend({
weekdays,
categories,
},
attrs: {
role: 'grid',
},
directives: [{
modifiers: { quiet: true },
name: 'resize',
Expand Down
12 changes: 12 additions & 0 deletions packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ export default CalendarBase.extend({
genHead (): VNode {
return this.$createElement('div', {
staticClass: 'v-calendar-weekly__head',
attrs: {
role: 'row',
},
}, this.genHeadDays())
},
genHeadDays (): VNode[] {
Expand All @@ -111,6 +114,9 @@ export default CalendarBase.extend({
key: day.date,
staticClass: 'v-calendar-weekly__head-weekday',
class: this.getRelativeClasses(day, outside),
attrs: {
role: 'columnheader',
},
}), this.weekdayFormatter(day, this.shortWeekdays))
},
genWeeks (): VNode[] {
Expand All @@ -134,6 +140,9 @@ export default CalendarBase.extend({
return this.$createElement('div', {
key: week[0].date,
staticClass: 'v-calendar-weekly__week',
attrs: {
role: 'row',
},
}, weekNodes)
},
getWeekNumber (determineDay: CalendarTimestamp) {
Expand All @@ -159,6 +168,9 @@ export default CalendarBase.extend({
key: day.date,
staticClass: 'v-calendar-weekly__day',
class: this.getRelativeClasses(day, outside),
attrs: {
role: 'cell',
},
on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
return { nativeEvent, ...day }
}),
Expand Down
Loading

0 comments on commit 2cd34b4

Please sign in to comment.