[改善][a11y] グラフのa11y対応としてテーブルもDOMにレンダリングする

components/AgencyBarChart.vue

@@ -6,11 +6,24 @@
       </small>
     </template>
     <bar
+      :style="{ display: canvas ? 'block' : 'none' }"
       :chart-id="chartId"
       :chart-data="displayData"
       :options="displayOption"
       :height="240"
     />
+    <v-data-table
+      :style="{ top: '-9999px', position: canvas ? 'fixed' : 'static' }"
+      :headers="tableHeaders"
+      :items="tableData"
+      :items-per-page="-1"
+      :hide-default-footer="true"
+      :height="240"
+      :fixed-header="true"
+      :mobile-breakpoint="0"
+      class="cardTable"
+      item-key="name"
+    />
   </data-view>
 </template>
 
@@ -28,15 +41,17 @@
 <script lang="ts">
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
+import { ChartOptions } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import agencyData from '@/data/agency.json'
 import DataView from '@/components/DataView.vue'
 import { triple as colors } from '@/utils/colors'
 
-interface HTMLElementEvent<T extends HTMLElement> extends Event {
+interface HTMLElementEvent<T extends HTMLElement> extends MouseEvent {
   currentTarget: T
 }
 type Data = {
+  canvas: boolean
   chartData: typeof agencyData
   date: string
   agencies: VueI18n.TranslateResult[]
@@ -53,7 +68,14 @@ type Computed = {
       borderWidth: object
     }[]
   }
-  displayOption: any
+  displayOption: ChartOptions
+  tableHeaders: {
+    text: string
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 type Props = {
   title: string
@@ -70,6 +92,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   Computed,
   Props
 > = {
+  created() {
+    this.canvas = process.browser
+  },
   components: { DataView },
   props: {
     title: {
@@ -108,6 +133,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       dataset.label = this.$t(dataset.label) as string
     })
     return {
+      canvas: true,
       chartData: agencyData,
       date: agencyData.date,
       agencies
@@ -136,20 +162,20 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
     displayOption() {
       const self = this
-      let options = {
+      const options: ChartOptions = {
         tooltips: {
           displayColors: false,
           callbacks: {
-            title(tooltipItem: any) {
+            title(tooltipItem) {
               const dateString = tooltipItem[0].label
               return self.$t('期間: {duration}', {
                 duration: dateString!
               }) as string
             },
-            label(tooltipItem: any, data: any) {
+            label(tooltipItem, data) {
               const index = tooltipItem.datasetIndex!
-              const title = self.$t(data.datasets[index].label!)
-              const num = parseInt(tooltipItem.value).toLocaleString()
+              const title = self.$t(data.datasets![index].label!)
+              const num = parseInt(tooltipItem.value!).toLocaleString()
               const unit = self.$t(self.unit)
               return `${title}: ${num} ${unit}`
             }
@@ -158,10 +184,10 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         legend: {
           display: true,
           onHover: (e: HTMLElementEvent<HTMLInputElement>) => {
-            e!.currentTarget.style!.cursor = 'pointer'
+            e.currentTarget!.style!.cursor = 'pointer'
           },
           onLeave: (e: HTMLElementEvent<HTMLInputElement>) => {
-            e!.currentTarget.style!.cursor = 'default'
+            e.currentTarget!.style!.cursor = 'default'
           },
           labels: {
             boxWidth: 20
@@ -190,7 +216,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
                 fontSize: 9,
                 fontColor: '#808080',
                 maxTicksLimit: 10,
-                callback(label: string) {
+                callback(label) {
                   return `${label}${self.unit}`
                 }
               }
@@ -199,9 +225,29 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         }
       }
       if (this.$route.query.ogp === 'true') {
-        Object.assign(options, {animation:{duration: 0}})
+        Object.assign(options, { animation: { duration: 0 } })
       }
       return options
+    },
+    tableHeaders() {
+      return [
+        { text: '', value: 'text' },
+        ...this.displayData.datasets.map((text, value) => {
+          return { text: text.label, value: String(value) }
+        })
+      ]
+    },
+    tableData() {
+      return this.displayData.datasets[0].data.map((_, i) => {
+        return Object.assign(
+          { text: this.displayData.labels[i] as string },
+          ...this.displayData.datasets!.map((_, j) => {
+            return {
+              [j]: this.displayData.datasets[0].data[i]
+            }
+          })
+        )
+      })
     }
   }
 }

components/MetroBarChart.vue

@@ -6,11 +6,24 @@
       </small>
     </template>
     <bar
+      :style="{ display: canvas ? 'block' : 'none' }"
       :chart-id="chartId"
       :chart-data="displayData"
       :options="displayOption"
       :height="240"
     />
+    <v-data-table
+      :style="{ top: '-9999px', position: canvas ? 'fixed' : 'static' }"
+      :headers="tableHeaders"
+      :items="tableData"
+      :items-per-page="-1"
+      :hide-default-footer="true"
+      :height="240"
+      :fixed-header="true"
+      :mobile-breakpoint="0"
+      class="cardTable"
+      item-key="name"
+    />
   </data-view>
 </template>
 
@@ -36,13 +49,27 @@ interface HTMLElementEvent<T extends HTMLElement> extends Event {
   currentTarget: T
 }
 
-type Data = {}
+type Data = {
+  canvas: boolean
+}
 type Methods = {}
 type Computed = {
   displayData: {
-    labels: (string | undefined)[]
-    datasets: object
+    labels: string[]
+    datasets: {
+      label: string
+      data: number[]
+      backgroundColor: string
+      borderWidth: number
+    }[]
   }
+  tableHeaders: {
+    text: string
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
   displayOption: {
     responsive: boolean
     legend: {
@@ -85,6 +112,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   Computed,
   Props
 > = {
+  created() {
+    this.canvas = process.browser
+  },
   components: { DataView },
   props: {
     title: {
@@ -120,24 +150,47 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       required: true
     }
   },
+  data: () => ({
+    canvas: true
+  }),
   computed: {
     displayData() {
       const datasets = this.chartData.labels!.map((label, i) => {
         return {
-          label,
-          data: this.chartData.datasets!.map(d => d.data![i]),
+          label: label as string,
+          data: this.chartData.datasets!.map(d => d.data![i]) as number[],
           backgroundColor: colors[i],
           borderWidth: 0
         }
       })
       return {
-        labels: this.chartData.datasets!.map(d => d.label),
+        labels: this.chartData.datasets!.map(d => d.label!),
         datasets
       }
     },
+    tableHeaders() {
+      return [
+        { text: '', value: 'text' },
+        ...this.chartData.labels!.map((text, value) => {
+          return { text: text as string, value: String(value) }
+        })
+      ]
+    },
+    tableData() {
+      return this.displayData.datasets[0].data.map((_, i) => {
+        return Object.assign(
+          { text: this.chartData.datasets![i].label as string },
+          ...this.chartData.datasets!.map((_, j) => {
+            return {
+              [j]: this.displayData.datasets[0].data[i]
+            }
+          })
+        )
+      })
+    },
     displayOption() {
       const self = this
-      let options = {
+      const options = {
         responsive: true,
         legend: {
           display: true,
@@ -192,7 +245,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         }
       }
       if (this.$route.query.ogp === 'true') {
-        Object.assign(options, {animation:{duration: 0}})
+        Object.assign(options, { animation: { duration: 0 } })
       }
       return options
     }

components/TimeBarChart.vue

@@ -4,14 +4,32 @@
       <slot name="description" />
     </template>
     <template v-slot:button>
-      <data-selector v-model="dataKind" :target-id="chartId" />
+      <data-selector
+        v-model="dataKind"
+        :target-id="chartId"
+        :style="{ display: canvas ? 'block' : 'none' }"
+      />
     </template>
     <bar
+      :style="{ display: canvas ? 'block' : 'none' }"
       :chart-id="chartId"
       :chart-data="displayData"
       :options="displayOption"
       :height="240"
     />
+    <v-data-table
+      :style="{ top: '-9999px', position: canvas ? 'fixed' : 'static' }"
+      :headers="tableHeaders"
+      :items="tableData"
+      :items-per-page="-1"
+      :hide-default-footer="true"
+      :hide-default-header="true"
+      :height="240"
+      :fixed-header="true"
+      :mobile-breakpoint="0"
+      class="cardTable"
+      item-key="name"
+    />
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
         :l-text="displayInfo.lText"
@@ -35,6 +53,7 @@ import { single as color } from '@/utils/colors'
 
 type Data = {
   dataKind: 'transition' | 'cumulative'
+  canvas: boolean
 }
 type Methods = {
   formatDayBeforeRatio: (dayBeforeRatio: number) => string
@@ -72,6 +91,13 @@ type Computed = {
     scales: object
   }
   scaledTicksYAxisMax: number
+  tableHeaders: {
+    text: string
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 type Props = {
   title: string
@@ -90,6 +116,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   Computed,
   Props
 > = {
+  created() {
+    this.canvas = process.browser
+  },
   components: { DataView, DataSelector, DataViewBasicInfoPanel },
   props: {
     title: {
@@ -122,7 +151,8 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     }
   },
   data: () => ({
-    dataKind: 'transition'
+    dataKind: 'transition',
+    canvas: true
   }),
   computed: {
     displayCumulativeRatio() {
@@ -302,6 +332,20 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         this.dataKind === 'transition' ? 'transition' : 'cumulative'
       const values = this.chartData.map(d => d[dataKind])
       return Math.max(...values) * yAxisMax
+    },
+    tableHeaders() {
+      return [
+        { text: '', value: 'text' },
+        { text: this.title, value: '0' }
+      ]
+    },
+    tableData() {
+      return this.displayData.datasets[0].data.map((_, i) => {
+        return Object.assign(
+          { text: this.displayData.labels[i] },
+          { '0': this.displayData.datasets[0].data[i] }
+        )
+      })
     }
   },
   methods: {