Skip to content

Commit 2cd34b4

Browse files
authored
fix(VCalendar): add aria roles to monthly calendar (#14640)
fixes #14604
1 parent 299330c commit 2cd34b4

File tree

3 files changed

+180
-55
lines changed

3 files changed

+180
-55
lines changed

packages/vuetify/src/components/VCalendar/VCalendar.ts

+3
Original file line numberDiff line numberDiff line change
@@ -361,6 +361,9 @@ export default CalendarWithEvents.extend({
361361
weekdays,
362362
categories,
363363
},
364+
attrs: {
365+
role: 'grid',
366+
},
364367
directives: [{
365368
modifiers: { quiet: true },
366369
name: 'resize',

packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts

+12
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,9 @@ export default CalendarBase.extend({
9090
genHead (): VNode {
9191
return this.$createElement('div', {
9292
staticClass: 'v-calendar-weekly__head',
93+
attrs: {
94+
role: 'row',
95+
},
9396
}, this.genHeadDays())
9497
},
9598
genHeadDays (): VNode[] {
@@ -111,6 +114,9 @@ export default CalendarBase.extend({
111114
key: day.date,
112115
staticClass: 'v-calendar-weekly__head-weekday',
113116
class: this.getRelativeClasses(day, outside),
117+
attrs: {
118+
role: 'columnheader',
119+
},
114120
}), this.weekdayFormatter(day, this.shortWeekdays))
115121
},
116122
genWeeks (): VNode[] {
@@ -134,6 +140,9 @@ export default CalendarBase.extend({
134140
return this.$createElement('div', {
135141
key: week[0].date,
136142
staticClass: 'v-calendar-weekly__week',
143+
attrs: {
144+
role: 'row',
145+
},
137146
}, weekNodes)
138147
},
139148
getWeekNumber (determineDay: CalendarTimestamp) {
@@ -159,6 +168,9 @@ export default CalendarBase.extend({
159168
key: day.date,
160169
staticClass: 'v-calendar-weekly__day',
161170
class: this.getRelativeClasses(day, outside),
171+
attrs: {
172+
role: 'cell',
173+
},
162174
on: this.getDefaultMouseEventHandlers(':day', nativeEvent => {
163175
return { nativeEvent, ...day }
164176
}),

0 commit comments

Comments
 (0)