Merge pull request #6469 from Foo-x/6400-focus-charts-and-tables

fix: focus to charts and tables

components/index/_shared/DataViewTable.vue

@@ -1,5 +1,6 @@
 <template>
   <v-data-table
+    :ref="'displayedTable'"
     :headers="headers"
     :items="items"
     :items-per-page="-1"
@@ -84,6 +85,16 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         .filter((h) => h !== this.headerKey)
     },
   },
+  mounted() {
+    const vTables = this.$refs.displayedTable as Vue
+    const vTableElement = vTables.$el
+    const tables = vTableElement.querySelectorAll('table')
+    // NodeListをIE11でforEachするためのワークアラウンド
+    const nodes = Array.prototype.slice.call(tables, 0)
+    nodes.forEach((table: HTMLElement) => {
+      table.setAttribute('tabindex', '0')
+    })
+  },
   methods: {
     formatDate(dateString: string): string {
       const date = dayjs(new Date(dateString))

components/index/_shared/ScrollableChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="chartContainer" class="LegendStickyChart">
-    <div ref="scrollable" class="scrollable">
+    <div ref="scrollable" class="scrollable" tabindex="0">
       <div :style="{ width: `${chartWidth}px` }">
         <slot name="chart" :chart-width="chartWidth" />
       </div>