fix(VCalendar): add aria roles to monthly calendar (#14640)

fixes #14604
vuetifyjs · Aug 9, 2022 · 2cd34b4 · 2cd34b4
1 parent 299330c
commit 2cd34b4
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 55 deletions.
diff --git a/packages/vuetify/src/components/VCalendar/VCalendar.ts b/packages/vuetify/src/components/VCalendar/VCalendar.ts
@@ -361,6 +361,9 @@ export default CalendarWithEvents.extend({
         weekdays,
         categories,
       },
+      attrs: {
+        role: 'grid',
+      },
       directives: [{
         modifiers: { quiet: true },
         name: 'resize',

diff --git a/packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts b/packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts
@@ -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[] {
@@ -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[] {
@@ -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) {
@@ -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 }
         }),